search

miguelcobain / ember-paper

The Ember approach to Material Design.
http://miguelcobain.github.io/ember-paper
MIT License
889 stars 331 forks source link

Add action to return focus to menu button for improved accessibility #1185

Open glunn opened 3 years ago

glunn commented 3 years ago

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. Restore Focus (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. Lost Focus (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