Defect 3 Menu Systems

[srancour]

Description or Additional Context

9/16/2024: The menu systems are not individually navigable with the keyboard. For each menu option the user must Navigate through each sub menu, sub sub menu and sub sub sub menu option before moving to the next open. The arrow keys do not work in the menu.

Example

On every page when you tab through the navigation, it forces you to go through every single menu and submenu, which adds in a ton of extra tab stops that are unnecessary.

Code snippet

Content menu

<li class="menu-item menu-item--expanded menu-level-0">
  <a href="/admin/content" class="toolbar-icon toolbar-icon-system-admin-content is-active" data-drupal-link-system-path="admin/content" aria-current="page">Content</a>
  <ul class="toolbar-menu lower-level-nav menu-level-1">
    ...
  </ul>
</li>

Steps to reproduce

Navigation: Home or any other page
Load page and tab through all navigation elements to see that you have to tab through every element that exists.

Recommended resolution

Ideally, there would be some combination of arrow keys that would allow you to navigate the menu options at each level, without needing to go through all the sub menu options.

This was captured already in #17764.

This issue seems to be coming from the Admin toolbar module.

Defect Criterion

WCAG 1.3.1 - Information and Relationships - Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Users affected

• Keyboard only
• Screen reader

Teams that this affects:

• CMS Team