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

Keyboard navigation in block toolbar is confusing #25465

Closed
mapk opened this issue Sep 18, 2020 · 3 comments
Closed

Keyboard navigation in block toolbar is confusing #25465

mapk opened this issue Sep 18, 2020 · 3 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended

Comments

@mapk
Copy link
Contributor

mapk commented Sep 18, 2020

Describe the bug
In the screencast below, I found an odd interaction while using the keyboard for navigating through the block's toolbar. Clicking the right arrow takes me from the Block Transform icon to the up arrow, then I clicked the down arrow to navigate down to the down arrow in the toolbar, this jumped my cursor up to the Title but left the block I was on as selected. Very confusing.

To reproduce
Steps to reproduce the behavior:

  1. In a block on the page, click Shift + Tab to keyboard navigate to the block's toolbar.
  2. Click the Right Arrow to just to the up arrow icon in the toolbar.
  3. Click the Down Arrow to move down to the down arrow.
  4. Notice the cursor jumped to the Title but still left the other block highlighted as selected.

Expected behavior
I expect that clicking the Down Arrow I would not jump to the Title block, but drop down to the down arrow in the block toolbar. I know that if I click the Right Arrow again, that will move me to the down arrow. But that didn't make a whole lot of sense to me visually.

Screenshots

keyboard

Tested on Firefox.

@mapk mapk added [Type] Bug An existing feature does not function as intended [a11y] Keyboard & Focus labels Sep 18, 2020
@ZebulanStanphill ZebulanStanphill added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Sep 18, 2020
@mariohamann
Copy link

This is exactly the problem @afercia mentioned in #24898 (comment) – and it seems to be another reason to position the buttons side by side.

  • As far as I understand the toolbar's ARIA attributes describe its orientation as horizontal: role="toolbar" aria-orientation="horizontal"
  • The UI does not match the keyboard's behavior – and I think in this case the UI should definitely follow the DOM.

@afercia
Copy link
Contributor

afercia commented Sep 19, 2020

Exactly, thanks for pointing that out @mariohamann. This is one more reason to revert the visual change that made the mover buttons stacked vertically.

The toolbar has a horizontal orientation. The expected interaction is arrows navigation with right and left keys. The vertically stacked mover buttons visually break this expectation. I'd suggest close this issue in favor of #24898.

@mapk
Copy link
Contributor Author

mapk commented Sep 21, 2020

Thanks for catching that, @mariohamann.

I'd suggest close this issue in favor of #24898.

Will do. Makes sense.

@mapk mapk closed this as completed Sep 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

4 participants