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 menu block: keyboard accessibility issues #20369

Closed
enriquesanchez opened this issue Feb 21, 2020 · 2 comments
Closed

Navigation menu block: keyboard accessibility issues #20369

enriquesanchez opened this issue Feb 21, 2020 · 2 comments
Labels
[Block] Navigation Affects the Navigation Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Needs design efforts.

Comments

@enriquesanchez
Copy link
Contributor

The accessibility team recently performed a few accessibility tests of the new navigation menu block.

The general consensus is that keyboard-only interaction is very difficult, and at times impossible. In particular, the team found that:

  • Could not move keyboard focus to the 'Add Navigation Link' inserter button.
  • I was able to add a submenu item by way of the 'Add submenu' option in the block's toolbar. This pattern feels more intuitive and easier to navigate. However, having the interaction split into two different places (on the modal I create a new navigation link, but then I have to go back to the block to edit the newly added link placeholder) was confusing.
  • Having the nested links disappear when the subblock was not selected was disorienting. It made me believe that somehow my sublinks had been deleted.
  • Moving between the main block and nested blocks was very difficult and unpredictable. There was no visible focus that gave a clear sense of place while exploring the blocks. It was very difficult to understand what was going - what mode am I in? Am I in the navigation block, or in a menu item?
  • Tabbing from an active submenu list item sent focus to the sidebar, when I had expected to move to the next top level menu item
  • The relationship between a top-menu list item and its children was confusing; it seemed like being in edit mode for the parent item automatically included being in edit mode for the children, but that didn't continue to other parent items.
  • In the color palette when you don't like the default colors offered, you need to open another popover and you can only use arrows keys to change the color. When I tab to use HEX section the popover closes.

Worth adding that on my tests, the 'block navigator' overlay felt much more intuitive and easier to navigate.

@enriquesanchez enriquesanchez added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Needs design efforts. [Block] Navigation Affects the Navigation Block labels Feb 21, 2020
@karmatosed karmatosed assigned karmatosed and unassigned karmatosed Mar 6, 2020
@karmatosed
Copy link
Member

Noting @enriquesanchez is going to split this out into actionable issues so we can make a move on each and work out which need design and which don't. Thanks for doing that!

@karmatosed
Copy link
Member

@enriquesanchez as you've split this out into issues, should this one be closed now?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Needs design efforts.
Projects
None yet
Development

No branches or pull requests

2 participants