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:
1) Open a menu with a mouse click or the space key.
2) Close menu (press 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.)
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: 1) Open a menu with a mouse click or the
spacekey. 2) Close menu (pressescor 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: https://github.com/angular/material/issues/11678