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

a11y: Allow the user to exit the menu when unfocusing or ESC #7406

Merged
merged 1 commit into from
Oct 13, 2020

Conversation

skateman
Copy link
Member

@skateman skateman commented Oct 8, 2020

I set an onKeyDown event on both menu levels, if the ESC key is pressed, the second level of the menu gets collapsed. I also made the overlay focusable, so if the user goes through the menu, it gets collapsed before the user can enter the main content area.

With the current implementation there's one catch though: if the user expands the second level and starts moving on the menu items with the keyboard backwards (SHIFT+TAB), it can go around and can get to the main content area without collapsing. I have a few ideas about how this could be solved:

  • detect if the focus left the browser's active area with window.onblur and collapse the menu (alt+tab would also collapse the menu)
  • collapse the second level if the user gets back to the first (might make navigation less comfortable)
  • leave as it is and let's hope for common sense 🙏 🤣

Parent issue #7358

@skateman skateman mentioned this pull request Oct 8, 2020
6 tasks
@skateman skateman changed the title a11y: Allow the user to exit the menu when unfocusing or ESC [WIP] a11y: Allow the user to exit the menu when unfocusing or ESC Oct 8, 2020
@miq-bot miq-bot added the wip label Oct 8, 2020
@kavyanekkalapu
Copy link
Member

i think second solution seems better, when shift+tab focus shifted to first level menu from second level, then second menu should be collapsible.

@skateman skateman force-pushed the a11y-menu-escape-unfocus branch from 5e4df63 to efbe188 Compare October 10, 2020 16:50
@skateman skateman removed the question label Oct 10, 2020
@skateman skateman force-pushed the a11y-menu-escape-unfocus branch from efbe188 to cd4b3c5 Compare October 11, 2020 07:29
@skateman skateman changed the title [WIP] a11y: Allow the user to exit the menu when unfocusing or ESC a11y: Allow the user to exit the menu when unfocusing or ESC Oct 11, 2020
@miq-bot miq-bot removed the wip label Oct 11, 2020
@skateman skateman force-pushed the a11y-menu-escape-unfocus branch from cd4b3c5 to 25635f0 Compare October 13, 2020 12:05
@miq-bot
Copy link
Member

miq-bot commented Oct 13, 2020

Checked commit skateman@25635f0 with ruby 2.6.3, rubocop 0.69.0, haml-lint 0.28.0, and yamllint
0 files checked, 0 offenses detected
Everything looks fine. 🍪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants