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

Writing flow: improved tabbing for Edit mode #19235

Merged
merged 1 commit into from Dec 19, 2019
Merged

Writing flow: improved tabbing for Edit mode #19235

merged 1 commit into from Dec 19, 2019

Conversation

@ellatrix
Copy link
Member

ellatrix commented Dec 19, 2019

Description

Spit out from #18779.
Blocks #18779.

This PR changes block navigation (tabbing) behaviour for Edit mode, which is needed for #18779. This turns out to be a drastic improvement from the current tabbing experience.

  • When in Edit mode, pressing Tab will focus the next focusable element after the content, which is normally the inspector controls (sidebar which contain block controls), and pressing Shift+Tab will focus the focusable element before the content, which will be the block toolbar in #18779.
  • When in Edit mode, pressing the arrow keys will navigate across blocks as before.
  • When in Navigation mode (press Esc), pressing Tab will still focus the next block, and pressing Shift+Tab will focus the previous block.

I believe the new tabbing behaviour creates a beautiful balance between edit mode (super easy access to block controls), navigation mode (easy access to other blocks), and traditional editor navigation (arrow keys to access other blocks).

It also reduces the need for the obscure region shortcut Ctrl+~ and toolbar shortcut Alt+F10.

From @MarcoZehe:

I tested the latest and greatest from this pull request on gutenberg.run [#18779], and must say I am totally sold on this new tabbing behavior. This makes everything much more consistent than it was, and also makes everything reachable in a linear fashion. Moreover, if stuck in the side bar, there already is a Skip Link back to the main edit area, so one can nicely get around.

I am all for taking this and deal with any fall-out in followups, also with improving the toolbar experience so it is ARIA authoring practices compliant. This is an enormous step forward from the current master.

How has this been tested?

Tab around in Edit and Navigation mode.

Screenshots

Types of changes

Enhancement

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .
Copy link
Contributor

youknowriad left a comment

it's a little bit weird that that tabbing stops at the first block and then when we start over, the post title is skipped.

I still wonder whether it's better to have the "constraint tabbing" behavior when in edit mode and a block UI is focused but I'll defer to other a11y testers. I believe @MarcoZehe already approved the behavior in this PR.

@ellatrix

This comment has been minimized.

Copy link
Member Author

ellatrix commented Dec 19, 2019

@youknowriad You're right this this might be possible to improve when you first tab into a block. I feel like you should be in Navigation mode when you first tab to a block. That also make sense as it is the mode you Escape to, and Edit mode is the mode you Enter

@ellatrix

This comment has been minimized.

Copy link
Member Author

ellatrix commented Dec 19, 2019

@youknowriad Thanks for the review! Let's try this, and I'll follow up with more polish to this behaviour.

@ellatrix ellatrix merged commit 6d1feb9 into master Dec 19, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@ellatrix ellatrix deleted the try/one-tab-stop branch Dec 19, 2019
@youknowriad youknowriad added this to the Gutenberg 7.2 milestone Jan 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.