JAWS does not read the selected chip items properly when using Left/Right Key navigation.

[UdhayaKumarDuraisamy]

Summary

I have a custom MultiSelect component that I built using a Blazor server application. After selecting multiple values, the selected values are appended as chips. I have provided support to move focus to the chips when the user uses the Left or Right arrow keys. This functionality works well except when using the JAWS screen reader. When JAWS is enabled, after selecting values, if the user uses the Left key, it announces the value properly. However, if the user uses the Left key again, it reads each letter of the word instead of reading the word as a whole. Additionally, it breaks the Left/Right key navigation. You can refer to the below shaed videos for more details.

DOM Structure:

<div class="
    e-multiselect
    e-control-wrapper
    e-control-container
    e-input-group
    e-valid-input
    e-input-focus
  " style="width: 100%" _bl_7d688dda-5e80-447a-bf63-d880f3323648="">
  <div class="e-multi-select-wrapper" tabindex="-1" _bl_cff53ad9-83bc-452d-a94d-1519d938b81e="">
    <span class="e-chips-collection" id="default_val"
      ><span
        class="e-chips"
        id="BM"
        data-value="BM"
        title="Bermuda"
        aria-label="Bermuda"
        ><span class="e-chipcontent">Bermuda</span>
    <!--!-->
    <span class="e-chips-close"></span></span><span
        class="e-chips"
        id="CA"
        data-value="CA"
        title="Canada"
        aria-label="Canada"
        ><span class="e-chipcontent">Canada</span>
    <!--!-->
    <span class="e-chips-close"></span></span></span><span
      class="e-delim-values e-delim-view e-delim-hide"
      _bl_aad6329f-6a79-4c6f-bf81-ca669376f590=""
      >Bermuda, Canada</span><span class="e-multi-searcher"
      ><input
        class="e-dropdownbase e-control e-multiselect e-lib"
        name="local"
        spellcheck="false"
        autocomplete="off"
        role="combobox"
        aria-haspopup="true"
        aria-expanded="true"
        aria-describedby=""
        type="text"
        tabindex="0"
        aria-labelledby="default_val"
        aria-disabled="false"
        id="local"
        size="5"
        _bl_89b980a4-eaee-4abb-bcff-41c8dfb09dd3=""
        aria-activedescendant="local_0"
        aria-owns="local_popup"
        aria-controls="local_options" /></span><span class="e-clear-icon" aria-label="clear" role="button"
      ><!--!-->
      <div
        class="e-spinner-pane e-spin-hide"
        style="z-index: auto"
        _bl_648f867d-5a7e-434e-b2f8-3aeb4a42edde=""
      >
        <div class="e-spinner-inner"><!--!--></div>
      </div></span>
  </div>
</div>

Expected result

The JAWS reader needs to announce the selected values chip properly, and it should not break the functionality of keyboard navigation.

Actual result

If the user uses the left key again, it reads each letter of the word instead of reading the word as a whole. Additionally, it disrupts the left/right key navigation.

Example

[Without JAWS]

[With JAWS] https://github.com/FreedomScientific/standards-support/assets/98140917/c921b383-a1a0-465f-a167-04630b4cc2e0

Additional Information

JAWS version and build number

JAWS 2024.2310.70 - October 2023

Operating System and version

Edition : Windows 11 Enterprise Version : 22H2

Browser and version:

Google Chrome & Version 120.0.6099.71 (Official Build) (64-bit)

[rajendranr-5483]

Team,

Would you be able to provide an update on this accessibility issue?

[stevefaulkner]

@UdhayaKumarDuraisamy @rajendranr-5483 It is difficult to advise without having a working demo of the code to test, but i note that the "chips" do not have a role assigned, so they are classed as generic elements, so interaction will be as expected for span elements

<span class="e-chips-collection" id="default_val">
<span
        class="e-chips"
        id="BM"
        data-value="BM"
        title="Bermuda"
        aria-label="Bermuda"
        >
<span class="e-chipcontent">Bermuda</span>

I also noted that closing 2 tags in the code example are missing?

can you provide a working test version?