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

Visual and physical disconnect when using keyboard nav with movers in vertical configuration. #22316

Open
talldan opened this issue May 13, 2020 · 3 comments
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility

Comments

@talldan
Copy link
Contributor

talldan commented May 13, 2020

Describe the bug
Recently, arrow key navigation was introduced to the Block Toolbar, a really positive feature, since it makes the toolbar a single tab stop.

I noticed that the left and right arrow keys are used to navigate a toolbar, but when the block movers are in their vertical configuration it doesn't feel right to use left/right:
Screenshot 2020-05-13 at 5 50 03 pm

Here, I want to press up and down to switch between the buttons. Pressing up/down unfortunately results in the toolbar losing focus, I think it triggers navigation between blocks.

Technically, left and right is probably correct for the DOM order, but I found it caused a disconnect for those navigating based on the visual positioning.

I also discovered the same in #22314.

To reproduce
Steps to reproduce the behavior:

  1. Add a navigation block
  2. Add navigation links with multiple levels of nesting
  3. Select a deeply nested navigation link and try navigating the toolbar using the keyboard

Expected behavior
Not sure!

@talldan talldan added [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility labels May 13, 2020
@talldan
Copy link
Contributor Author

talldan commented May 13, 2020

cc @diegohaz I know this is something you worked on. Was wondering what your thoughts are about this?

@diegohaz
Copy link
Member

I also expect vertical keys to work when navigating through the toolbar movers with keyboard. At first, I don't see any problems with doing that (as long as the horizontal keys still work).

I've tried to find a reference on native or web widgets with this kind of behavior, but all of them seem to just ignore the visual representation. For example, on MacOS/Chrome menus, you only navigate using vertical keys, even though you have a lot of items represented horizontally in the UI:

May-14-2020 16-31-18

The WAI-ARIA Authoring Practices have this example on layout grids where you can navigate through search result articles using arrow keys. To select the description paragraph, you have to use the right arrow keys, even though it's visually in a new row:

May-14-2020 16-43-30

In the markup, each article represents a grid row with 3 cells, so it makes sense for screen reader users.

@diegohaz
Copy link
Member

diegohaz commented May 14, 2020

As you mentioned, the toolbar loses focus and gets hidden when you use up/down arrow keys, which makes this expectation break even more harmful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility
Projects
None yet
Development

No branches or pull requests

2 participants