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

Make the Classic block toolbar operable with a keyboard. #6163

Merged
merged 2 commits into from Apr 17, 2018

Conversation

Projects
None yet
2 participants
@afercia
Contributor

afercia commented Apr 13, 2018

This PR tries to solve conflicts that prevent the Classic block toolbar to be operated with a keyboard. Two issues:

  • Alt+F10 to move from the block to the toolbar doesn't work: it conflicts with the Mousetrap global Alt+F10
  • once the toolbar is focused, arrows navigation with right and left arrows doesn't work: conflicts with WritingFlow I guess and focus goes back to the editable area

I've tested on all browsers, also on Windows, and looks good to me.

To test:

  • create a new post, add 1 paragraph, 1 Classic block, and 1 paragraph
  • on all the 3 blocks, verify that everything works as expected
  • once the editable area has focus, Alt+F10 moves focus to the block toolbar
  • pressing again Alt+F10 when focus is on the toolbar shouldn't do anything
  • arrows and tab navigation works on the toolbar
  • Escape moves focus back to the block content (this is buggy on Safari and IE11 for unrelated reasons, will open a new issue)

Verify the above steps with both option for the toolbar placement: normal and "fixed to top:

Note:
the underlying issue is that TinyMCE uses its own Alt+F10 shortcut with a keydown event, while the Mousetrap Alt+F10 is currently used with a keyup event and it's "global", attached to the document. So when pressing Alt+F10 on the Classic editor, first the TinyMCE keydown fires, then when releasing the keys the Mousetrap keyup fires.
I've paired both to keydown and stopped propagation of the Classic editor event.

Fixes #6118

@afercia

This comment has been minimized.

Contributor

afercia commented Apr 16, 2018

Rebased to solve conflict.

@youknowriad

LGTM 👍

@afercia

This comment has been minimized.

Contributor

afercia commented Apr 17, 2018

Thanks Riad! 🎉

@afercia afercia merged commit 9d41b96 into master Apr 17, 2018

2 checks passed

codecov/project 43.91% (-0.03%) compared to 9966a96
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@afercia afercia deleted the update/classic-block-shortcuts-and-keyboard-accessibility branch Apr 17, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment