Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Implement focus management in main menu

See original GitHub issue

Issue Summary

Tabbing through Wagtail’s main menu, it should be possible to move between all visible menu items one by one, opening submenus as required. Instead, users have to tab through submenus that are closed:

menu-focus-management

The correct behavior would be:

When submenus aren’t open, users shouldn’t have to tab through their menu items.
Submenus can be opened by clicking, pressing Enter while focused; and closed with the Esc key or clicking outside
Opening a submenu, the focus now moves to the submenu and is trapped there until closed
Submenu triggers should use button tags instead of a, so screen readers announce the correct behavior (button instead of link), and browsers do not display a link target of “#” (see #5349).

Steps to Reproduce

Go to the Wagtail admin
Navigate with a keyboard through the menu items

Related: #5336

Issue Analytics

State:
Created 4 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

2reactions

martekicommented, Jul 27, 2019

@thibaudcolas I’m going to take the route of using aria-expanded="false" or aria-expanded="true" to show the submenus, since the standard ARIA menu markup is meant for application menus (and not so much for navigation lists on web pages).

0reactions

fabienheureuxcommented, Jul 14, 2020

@marteki is there an open PR for this issue ? I wanted to work on it, following your approach, but if part of the work has already been done here it could be helpful 😉

Top Results From Across the Web

Focus management | Interface guidelines

Overview. Managing focus within a page or application is essential for users to successfully navigate, complete actions, and understand where they are.

Actions Menu Button Example Using element.focus() - W3C

focus () to set focus in response to events that trigger focus movement inside the menu. An alternative technique for managing focus movement ......

Focus management and inert | CSS-Tricks

Many forms of assistive technology use keyboard navigation to understand ... Focus management is the practice of coordinating what can and ...

Developer-driven focus management for single-page ... - Ad Hoc

Developer-driven focus management is determining keyboard focus after taking an action. This could include submitting a form, expanding a menu, ...

Web Accessibility: Aria, Focus, Focus Management - Telerik

The concept of focus management is really important in understanding how assistive technologies handle announcing elements in the DOM or even ...