0

We are using a component that creates a drop down select that ends up looking like this.Dropdown list

With the JAWS software closed keyboard navigation works perfectly well to move between the items in the search result list. However with JAWS open, you cannot interact with the list with keyboard. It simply doesn't recognize the search results container for some reason, and therefor of course it won't read the results. I am unsure why JAWS seems to be breaking the results.

This is what the resulting code looks like in dev tools.

`

<c-famli-site-search-input data-id="search" c-famlisitesearchinput_famlisitesearchinput-host="">
   <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-form-element">
      <div c-famlisitesearchinput_famlisitesearchinput="" class="screen-reader-container">
         <div aria-live="assertive" tabindex="-1" c-famlisitesearchinput_famlisitesearchinput="" style="position: absolute; left: -9999px;">Cake Store FEIN 444777447</div>
      </div>
      <label c-famlisitesearchinput_famlisitesearchinput="" class="slds-form-element__label" id="label-158">Select account</label>
      <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-form-element__control">
         <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-combobox_container search-input-has-custom-error">
            <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="true">
               <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                  <input c-famlisitesearchinput_famlisitesearchinput="" class="slds-input slds-combobox__input has-custom-height slds-combobox__input-value search-input-has-custom-error" type="text" aria-autocomplete="list" aria-labelledby="label-158" autocomplete="off" role="searchbox" placeholder="Search" title="" tabindex="0" aria-controls="listbox-158" aria-haspopup="listbox">
                  <lightning-icon c-famlisitesearchinput_famlisitesearchinput="" class="slds-input__icon slds-input__icon_right slds-icon-utility-search slds-icon_container">
                     <lightning-primitive-icon>
                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="search" aria-hidden="true" viewBox="0 0 52 52">
                           <g>
                              <path d="M49.62 45.27L36.22 32a18.9 18.9 0 10-34.1-9.2A18.91 18.91 0 0032 36.27l13.3 13.3a1.45 1.45 0 002.1 0l2.1-2.1a1.68 1.68 0 00.12-2.2zm-28.7-11.5a12.9 12.9 0 1112.9-12.9 12.87 12.87 0 01-12.9 12.9z" fill-rule="evenodd"></path>
                           </g>
                        </svg>
                     </lightning-primitive-icon>
                  </lightning-icon>
                  <button c-famlisitesearchinput_famlisitesearchinput="" class="slds-button slds-button_icon slds-input__icon slds-input__icon_right slds-hide" aria-label="Clear selection" type="button">
                     <lightning-icon c-famlisitesearchinput_famlisitesearchinput="" class="slds-button__icon slds-icon-utility-close slds-icon_container">
                        <lightning-primitive-icon>
                           <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="close" aria-hidden="true" viewBox="0 0 52 52">
                              <g>
                                 <path d="M31 25.4l13-13.1c.6-.6.6-1.5 0-2.1l-2-2.1c-.6-.6-1.5-.6-2.1 0L26.8 21.2c-.4.4-1 .4-1.4 0L12.3 8c-.6-.6-1.5-.6-2.1 0l-2.1 2.1c-.6.6-.6 1.5 0 2.1l13.1 13.1c.4.4.4 1 0 1.4L8 39.9c-.6.6-.6 1.5 0 2.1l2.1 2.1c.6.6 1.5.6 2.1 0L25.3 31c.4-.4 1-.4 1.4 0l13.1 13.1c.6.6 1.5.6 2.1 0L44 42c.6-.6.6-1.5 0-2.1L31 26.8c-.4-.4-.4-1 0-1.4z"></path>
                              </g>
                           </svg>
                        </lightning-primitive-icon>
                     </lightning-icon>
                  </button>
               </div>
               <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-dropdown slds-dropdown_fluid" id="listbox-158" role="listbox">
                  <ul c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox slds-listbox_vertical" aria-expanded="true">
                     <li c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__item" role="option" data-title="Cake Store" aria-label="Cake Store FEIN 444777447" aria-live="off">
                        <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity" data-recordid="001BZ000007lJAzYAM">
                           <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media__body" id="001BZ000007lJAzYAM-158" aria-label="Cake Store FEIN 444777447">
                              <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__option-text slds-listbox__option-text_entity" title="Cake Store FEIN 444777447">
                                 <lightning-formatted-rich-text c-famlisitesearchinput_famlisitesearchinput="" class="slds-rich-text-editor__output"><span><strong>Ca</strong>ke Store <br> FEIN: 444777447</span></lightning-formatted-rich-text>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__item" role="option" data-title="Local Gov Friday" aria-label="Local Gov Friday FEIN 444777896" aria-live="off">
                        <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity" data-recordid="001BZ000007lJEmYAM">
                           <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media__body" id="001BZ000007lJEmYAM-158" aria-label="Local Gov Friday FEIN 444777896">
                              <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__option-text slds-listbox__option-text_entity" title="Local Gov Friday FEIN 444777896">
                                 <lightning-formatted-rich-text c-famlisitesearchinput_famlisitesearchinput="" class="slds-rich-text-editor__output"><span>Lo<strong>ca</strong>l Gov Friday <br> FEIN: 444777896</span></lightning-formatted-rich-text>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__item" role="option" data-title="Local Fridays Awesome" aria-label="Local Fridays Awesome FEIN 475866666" aria-live="off">
                        <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity" data-recordid="001BZ000007lJJRYA2">
                           <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media__body" id="001BZ000007lJJRYA2-158" aria-label="Local Fridays Awesome FEIN 475866666">
                              <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__option-text slds-listbox__option-text_entity" title="Local Fridays Awesome FEIN 475866666">
                                 <lightning-formatted-rich-text c-famlisitesearchinput_famlisitesearchinput="" class="slds-rich-text-editor__output"><span>Lo<strong>ca</strong>l Fridays Awesome <br> FEIN: 475866666</span></lightning-formatted-rich-text>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__item" role="option" data-title="Tiffany's Lawn Care" aria-label="Tiffany's Lawn Care FEIN 454545444" aria-live="off">
                        <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity" data-recordid="001BZ000007qmJ1YAI">
                           <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media__body" id="001BZ000007qmJ1YAI-158" aria-label="Tiffany's Lawn Care FEIN 454545444">
                              <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__option-text slds-listbox__option-text_entity" title="Tiffany's Lawn Care FEIN 454545444">
                                 <lightning-formatted-rich-text c-famlisitesearchinput_famlisitesearchinput="" class="slds-rich-text-editor__output"><span>Tiffany's Lawn <strong>Ca</strong>re <br> FEIN: 454545444</span></lightning-formatted-rich-text>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__item" role="option" data-title="Tree Care By Tiffany" aria-label="Tree Care By Tiffany FEIN 474747744" aria-live="off">
                        <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity" data-recordid="001BZ000007qmanYAA">
                           <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media__body" id="001BZ000007qmanYAA-158" aria-label="Tree Care By Tiffany FEIN 474747744">
                              <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__option-text slds-listbox__option-text_entity" title="Tree Care By Tiffany FEIN 474747744">
                                 <lightning-formatted-rich-text c-famlisitesearchinput_famlisitesearchinput="" class="slds-rich-text-editor__output"><span>Tree <strong>Ca</strong>re By Tiffany <br> FEIN: 474747744</span></lightning-formatted-rich-text>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__item" role="option" data-title="TB Local City Small Gov" aria-label="TB Local City Small Gov FEIN 455655555" aria-live="off">
                        <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity" data-recordid="001BZ000007ypMFYAY">
                           <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media__body" id="001BZ000007ypMFYAY-158" aria-label="TB Local City Small Gov FEIN 455655555">
                              <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__option-text slds-listbox__option-text_entity" title="TB Local City Small Gov FEIN 455655555">
                                 <lightning-formatted-rich-text c-famlisitesearchinput_famlisitesearchinput="" class="slds-rich-text-editor__output"><span>TB Lo<strong>ca</strong>l City Small Gov <br> FEIN: 455655555</span></lightning-formatted-rich-text>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__item" role="option" data-title="TB Local City Large Gov" aria-label="TB Local City Large Gov FEIN 858588885" aria-live="off">
                        <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity" data-recordid="001BZ000007ypMPYAY">
                           <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media__body" id="001BZ000007ypMPYAY-158" aria-label="TB Local City Large Gov FEIN 858588885">
                              <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__option-text slds-listbox__option-text_entity" title="TB Local City Large Gov FEIN 858588885">
                                 <lightning-formatted-rich-text c-famlisitesearchinput_famlisitesearchinput="" class="slds-rich-text-editor__output"><span>TB Lo<strong>ca</strong>l City Large Gov <br> FEIN: 858588885</span></lightning-formatted-rich-text>
                              </div>
                           </div>
                        </div>
                     </li>
                     <li c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__item" role="option" data-title="TB Local City Gov OptOut" aria-label="TB Local City Gov OptOut FEIN 257794725" aria-live="off">
                        <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media slds-media_center slds-listbox__option slds-listbox__option_entity" data-recordid="001BZ000007ypMyYAI">
                           <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-media__body" id="001BZ000007ypMyYAI-158" aria-label="TB Local City Gov OptOut FEIN 257794725">
                              <div c-famlisitesearchinput_famlisitesearchinput="" class="slds-listbox__option-text slds-listbox__option-text_entity" title="TB Local City Gov OptOut FEIN 257794725">
                                 <lightning-formatted-rich-text c-famlisitesearchinput_famlisitesearchinput="" class="slds-rich-text-editor__output"><span>TB Lo<strong>ca</strong>l City Gov OptOut <br> FEIN: 257794725</span></lightning-formatted-rich-text>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
         <label c-famlisitesearchinput_famlisitesearchinput="" class="slds-form-element__label slds-var-m-top_xx-small search-input-form-error" role="alert">Please choose an account from the search</label>
      </div>
   </div>
</c-famli-site-search-input>

`

And this is the code that generates it. Source code

Any help would be much appreciated. Thank you.

When using the JAWS screen reader software it for some reason is breaking the ability to navigate the search results with keyboard. This should not happen.

Improve this question

1 Answer 1

Reset to default
1

You first have to understand the two modes that a screen reader such as JAWS runs in. "Browse mode" and "Forms mode" are typical ways to describe the two modes.

In browse mode, keyboard events are sent to the screen reader itself and it performs whatever keyboard shortcut assigned to that event. For example, pressing B in browse mode will navigate the screen reader user to the next button.

In forms mode, keyboard events are sent to the browser, as if the screen reader were not running. The browser, or your javascript code, is then given a shot at handling the keyboard event. So pressing B will actually type the letter "B" rather than navigate to a button. It's called "forms mode" because you generally want this mode when dealing with form elements such as <input> fields.

Most screen readers automatically will switch between the two modes by default (although you can change that in your screen reader settings). You usually hear an audible sound when it switches between the two. But the switch only happens if your keyboard focus moves to an appropriately coded form element.

You can also switch between modes manually. With JAWS, that's Ins+Z. You'll hear JAWS announce "virtual PC cursor" on or off.

In this case, the mode should switch automatically when focus moves to a listbox. Your code is using role="listbox" so you should get the switching for free but I suspect that the actual keyboard focus never goes to the listbox so JAWS doesn't know to switch.

You can test this out by running your code, pressing Ins+Z to go into forms mode, then see if arrow down works on your list. I suspect it will work.

Now, you don't want the user to have to press Ins+Z in order to use your component so you'll want the focus to go to the listbox so that the mode can switch automatically.

Take a look at the combobox pattern with autocomplete. There are some working examples on that page.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you so much for the reply. I'll see about auto setting the focus (though I'm not exactly sure what event I should do that on). Regardless I really appreciate the info and I'll check out link and see what I can figure out.
You don't directly cause the automatic switch between modes but you get it for free if you use the right role. You're using role="listbox", which is good, but you won't get the autoswitching unless the focus moves to the listbox.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.