Not all subjects within a menu of the primary navigation are navigable

[rautenburger]

(Only when NVDA screen reader is enabled.)

Not all subjects within a menu of the primary navigation is navigable using the arrow keys (nor tab).

Tested on:
https://q-src.github.io/styleguide/en/#main-navigation
(Chrome)
Tested with: NVDA screen reader

[topaxi]

I'm not sure what is going on here, and if I have correctly configured the NVDA screen reader (default settings...). Arrow keys left/right read single letters (is this normal for a screen reader?), I'm not sure which navigation points should be reachable through tabs and which should be reachable through arrow keys, maybe there are even more different ways to go through navigations which I don't know as I'm no accessibility expert (yet? 😄). Also once I activate the screen reader, some elements magically receive new markup like tabindex="-1", is this done by Firefox or the NVDA reader?

I've read up on some accessibility attributes and things and I'm not sure how to proceed.

I found someone with a similar menu structure with an implementation like this: https://stackoverflow.com/a/12279190/4737452

[rautenburger]

@almeidap
Do you know what's up?

[bit-pro-iew-eui]

All menu points are accessible with the keyboard. It works as designed:
Tab for the main menu points
Enter for displaying the fly-out
Arrow keys for navigating inside the fly-out
Escape to close the fly-out
Closing issue.

[topaxi]

Using the NVDA screen reader, not all elements within the navigation are accessible, as @rautenburger reported. This seems like a bug?

[bit-pro-iew-eui]

• The navigation submenus or elements should work with tab, instead of arrow keys.
  The "X Close" should also be reachable with tab. See also The primary navigation menus should be navigable using tab #551
• Correct the tabindex-1 of the close button (with chevron), and make sure is reachable with the tab key.
• Declare the role of this close button (with chevron) as button, not a menuitem.

[gillerr]

The bootstrap-accessibility-plugin makes sure navigation sub-menu elements are accessed through arrow key down instead of tab key.

[angelogti]

For some reason the problem with NVDA remains: once a menu section is expanded, not all items are navigable with the arrows. The focus jumps from this:

to this, ignoring the items in between:

the problem disappears as soon as NVDA is closed.

(tested on https://admin-ch.github.io/styleguide/en/widgets.html#03-widgets-01-alerts, chrome )