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

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 NVDA screen reader. When NVDA 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>

Actual behavior:

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.

Expected behavior:

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

NVDA logs, crash dumps and other attachments:

[Without NVDA] 139

[With NVDA] 137

System configuration

NVDA installed/portable/running from source:

Installed from the NVDA wesite https://www.nvaccess.org/download/.
NVDA version:

Windows version:

Edition : Windows 11 Enterprise Version : 22H2

Does the issue still occur after restarting your computer?

Yes.

@UdhayaKumarDuraisamy welcome to the NVDA project. This is due to the fact that NVDA provides a virtual navigation mode called browse mode in which the keyboard is overtaken by the screen reader in order to provide a more efficient way of navigating. You can turn browse mode off by pressing nvda key+space bar or by disabling the coresponding setting in NVDA browse mode settings. Closing as invalid.

Also please don't use only screen shots to describe things, but insert a text showing what is on the screenshot. There are lots of blind developers who cannot investigate because we cannot read what's on the screenshot.

I also encourage you to study the user guide of NVDA, there is everything you need to know about browse mode and focus mode and how NVDA works.

nvaccess / nvda