Escape as Select/Edit mode Toggle #58637
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Right now an Enter keypress moves from navigation mode into edit mode, and an Escape keypress resets focus back to the top of the document. It feels like a focus loss to me. This change makes an Escape keypress in navgation mode return to edit mode.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core SVNIf you're a Core Committer, use this list when committing to GitHub Merge commitsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
@andrewserong @alexstine - I know y'all have worked a lot on List View keyboard interactions. I want to make sure I'm not undoing anything here. |
|
Size Change: +597 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
andrewserong
approved these changes
Feb 4, 2024
There was a problem hiding this comment.
Thanks for the ping @jeryj, this feels great to me! It might be worth confirming with @alexstine, too.
✅ Escape key behaviour in the list view still allows deselecting blocks
✅ Escape key within the editor canvas (post and site editors) still allows deselecting multiple blocks
✅ When only a single block is selected in the editor canvas, Escape now allows toggling between select/edit
LGTM! ✨
|
Apologies, I forgot to check the failing tests before giving an approving review (the behaviour feels good to me, though, so I was excited to give it the ✅ 😄). Before landing, I think some of the e2e tests will need fixing up to reflect the new behaviour. For example it seems In the case of that test, it's still possible to select all blocks and delete them, it's just that I think that test expected to be able to go to no block selection by pressing the Escape key twice, which is no longer possible. That does feel good to me in practice, but will need to be reflected in the test (and likely confirm with @alexstine that it isn't a blocker if it's now harder to get to a state where no blocks are selected). |
|
Here's a visual that shows what Andrew outlined here:
This is an excellent improvement for the writing flow. Thank you 🙏 |
|
Flaky tests detected in 073ae19. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7787907482
|
MaggieCabrera
added
the
[Focus] Accessibility (a11y)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In the editor, escape is a shortcut to switch to Select/Navigation mode , and then another Escape keypress resets selection to the top of the DOM. This always surprises me, and feels like a focus loss as I can't see where the focus is anymore. I like @jasmussen's recommendation to turn Escape into a toggle between Select/Edit modes
What?
Use Escape as a toggle between Edit and Select modes.
Why?
To have a more predictable experience. Escape doing two things (switching to select mode, then moving focus to the top of the DOM feels really off to me).
How?
Add an isEscape check to the top of the onKeydown for the breadcrumb. This makes it operate very similarly to the Enter keypress to switch to Edit mode.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast