Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve overlay menu keyboard experience #62

Open
pomerantsev opened this issue Dec 11, 2020 · 0 comments
Open

Improve overlay menu keyboard experience #62

pomerantsev opened this issue Dec 11, 2020 · 0 comments

Comments

@pomerantsev
Copy link

pomerantsev commented Dec 11, 2020

Two separate but related improvements can be made to the overlay menu (the one that opens when activating the Contents button on a narrow viewport).

  • Close menu on Escape press. It is expected (and it's an accessibility requirement) that popups can be dismissed by keyboard, and there's currently no way to do this.
  • Contain focus within the menu. If you keep tabbing through the menu, focus eventually goes to the main content, and users generally don't expect invisible or obscured content to be focusable. There are open-source libraries that can take care of this (for example, focus-trap and focus-lock), however for a simple UI such as this one, implementing the focus locking functionality should take no more than a few lines of code.

Why is this important?
It's probably assumed that a narrow viewport equals to a no-keyboard device, but that is not always true:

  • it may be a narrow browser window on a regular desktop / laptop;
  • it may be a wide desktop browser with a high zoom factor which effectively narrows the viewport in terms of CSS pixels;
  • it may be a narrow-screen mobile device with a keyboard attached.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant