Add action to return focus to menu button for improved accessibility #1185
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi Ember Paper community 👋 first time contributor here.
I've outlined a bug and one possible solution for it. Happy to help with another approach or add tests for this one if you find it useful, would love to see this fixed. Thanks for publishing this add-on : )
Overview
Preserving focus is important for users who rely on the keyboard to navigate. This PR would return focus to the menu button on close.
Steps:
space
key.esc
or select one of the items using enter or a click).Expected behavior
When the menu dialog is closed, focus should return to the element that invoked it.
(Above gif shows a user navigating via the keyboard and closing the menu using
esc
, focus is returned to the menu button.)Current behavior
Focus is "lost" and users have to re-navigate from the beginning of the page.
(Above gif shows a user navigating via the keyboard and closing the menu using
esc
, focus is sent to the top app level and the user has to start over.)Documentation
Additional details are available in the: WAI-ARIA Authoring Practices (Menu)
Implementations of material design in other frameworks have stumbled across the same issue: angular/material#11678