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

Classic block toolbar can't be operated with a keyboard #6118

Closed
afercia opened this issue Apr 11, 2018 · 2 comments · Fixed by #6163
Closed

Classic block toolbar can't be operated with a keyboard #6118

afercia opened this issue Apr 11, 2018 · 2 comments · Fixed by #6163
Assignees
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

@afercia
Copy link
Contributor

afercia commented Apr 11, 2018

When using only the keyboard, in the Classic block there's no way to focus the block toolbar to access its formatting controls.

This block is basically a TinyMCE instance and in the WordPress old editor moving focus works by using the shortcut Alt+F10. However, in Gutenberg, Alt+F10 focuses the toolbar for a fraction of a second and then focus is moved to the top toolbar, see screenshot below for clarity:

screen shot 2018-04-11 at 17 54 52

The block toolbar itself and all its controls have a tabindex="-1" attribute so they're out of the tab sequence and there's really no way to move focus there. Again, this works in the old editor because TinyMCE offers a way to move focus to the toolbar and then focus is managed programmatically with arrows/tab navigation.

I've noticed also other inconsistencies and events conflicts, for example pressing Escape doesn't do what it should. But I won't enter into details since in its current state this block isn't even fully testable with a keyboard.

Considering this block aims to offer the same user experience of the old editor, it should work with the same level of accessibility too. Unfortunately, right now there's a serious accessibility regression here, since it's not usable at all by keyboard users and screen reader users.

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Apr 11, 2018
@afercia
Copy link
Contributor Author

afercia commented Apr 11, 2018

Testing note:
removing the Alt+F10 shortcut from editor/components/navigable-toolbar/index.js for testing purposes makes the native TinyMCE Alt+F10 work on the Classic block..
but:
then only Tab navigation works. Arrows don't work because as soon as the right or left arrow keys are pressed, focus is moved to the block content (I guess it's the "Writing Flow").

@afercia
Copy link
Contributor Author

afercia commented Apr 12, 2018

As far as I see, in most of the cases (except for the post title for example) the keyboard shortcuts events are bound to the document so they're, in a way, "global" shortcuts.

This can be easily checked, for example:

  • click on any empty area on the sides of the post content
  • press Alt+F10
  • focus is moved to the inserter button in the top bar

Not sure this is the behavior users expect. Regardless, the Classic block is basically a TinyMCE instance that uses its own Alt+F10 shortcut implementation. However, when using the shortcut, what actually happens is the same as when no blocks are selected. Also the Gutenberg "global" shortcuts kick in and moves focus to the top bar.

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

Successfully merging a pull request may close this issue.

2 participants