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

Navigation sub menus not totally accessible via the keyboard #207

Closed
4 tasks
alexstine opened this issue May 31, 2022 · 3 comments · Fixed by #210
Closed
4 tasks

Navigation sub menus not totally accessible via the keyboard #207

alexstine opened this issue May 31, 2022 · 3 comments · Fixed by #210
Assignees

Comments

@alexstine
Copy link
Contributor

While viewing a site such as https://make.wordpress.org, the main navigation contains sub menus. An example of such sub menu is Support. It has Documentation and Forums links contained within.

Here are the issues that need to be fixed to make the sub menus accessible.

  1. Sub menus should not open on focus. This can become some super confusing UX to hear you have been thrown in to a new list of links.
  2. If Support has a sub menu, there should be a button directly after the Support link that says Open Support Sub Menu.
  3. The above button should receive aria-expanded="false" as the default and toggle to true when the sub menu is visible.
  4. If inside a sub menu, pressing Escape should close the sub menu and move focus to the trigger that opened it.

Thanks to @courtneyr-dev for letting me know about the sub menus. I otherwise would have missed this unless I somehow found it by mistake.

@dd32
Copy link
Member

dd32 commented May 31, 2022

Unfortunately, it looks like the menu markup is coming from Gutenberg. We do dynamically generate the block content, but that's just creating a series of wp:navigation-link blocks nested within a wp:navigation block. I've not looked at the source Gutenberg generates, but I suspect this is an upstream issue more than a WordPress.org-specific one.

Here's the list of the Navigation block issues tagged accessibility, I don't see anything about Submenu's there - which doesn't help me figure it out :)

https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Accessibility+%28a11y%29%22+label%3A%22%5BBlock%5D+Navigation%22

@ryelle
Copy link
Contributor

ryelle commented May 31, 2022

I think if we switch to using the navigation-submenu block instead of navigation-link for these top-level items, we'll get the menu & toggle button functionality.

@alexstine
Copy link
Contributor Author

Confirmed. This is not a Gutenberg issue in default usage.

@ryelle ryelle self-assigned this Jun 1, 2022
ryelle added a commit that referenced this issue Jun 28, 2022
…210)

* Header: Switch to submenu blocks for navigation items with submenus

Fixes #207

* Fix typo

* Display second level items inline in the overflow menu

* Use the toggle button pattern for the overflow menu
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

Successfully merging a pull request may close this issue.

3 participants