Enabling arrow key to navigation in the Bootstrap dropdown-menu with JAWS

Question

Is it possible to navigate using keyboard to the drop down menu using arrow keys(up/down) for JAWS users?

Here is the code:

 <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" 
     data-toggle="dropdown" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">                    
      <li><a href="#">Dropdown link1</a></li>
      <li><a href="#">Dropdown link2</a></li>
    </ul>
  </div>

Steps:
1. open JAWS 15.0
2. focus on button with drop down menu
3. Press enter key
4. Press Up/Down key to move focus

Expected results:
Focus should be visible

Actual results:
1. Focus is invisible after JAWS started
2. Focus is visible if JAWS not start

http://jsfiddle.net/fewu2/t8q71q8f/

Answer 1

A good way to prevent Virtual Cursor mode from becoming activated when pressing "up" or "down" buttons via the keyboard is to use the role of application in a parent element.

If you are using Javascript to control navigation between the <li> elements, try this:

<div role="application">
    <div class="btn-group" role="group">
        ...
    </div>
</div>

Answer 2

Try giving your dropdown option li elements a role o menuitem.

In NVDA at least, I believe, which works very similarly, coming across a dropdown like this will trigger it to go into what Jaws would call "forms mode", which means you can use the arrow keys.

If this doesn't work, try moving the user's focus after clicking that dropdown button onto the first li of the menu.

I do have some code that handled this satisfactorily, and I remember that one of these were what fixed it for me. I'll go find out specifically which, if not both.

HTH.