Inserter: Allow focus to move to the toggle when opening the inserter #62513
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
…, so that the browser can correctly handle focus-visible on the tabs
|
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 If 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. |
Closed
scruffian
added
[Type] Bug
|
Size Change: -9 B (0%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
…, so that the browser can correctly handle focus-visible on the tabs (WordPress#62513)
ellatrix
pushed a commit
that referenced
this pull request
Jun 18, 2024
…, so that the browser can correctly handle focus-visible on the tabs (#62513)
ellatrix
pushed a commit
that referenced
this pull request
Jun 18, 2024
…, so that the browser can correctly handle focus-visible on the tabs (#62513)
|
I just cherry-picked this PR to the wp/6.6-beta-3 branch to get it included in the next release: b5f409b |
ellatrix
added
Backported to WP Core
ellatrix
pushed a commit
that referenced
this pull request
Jun 18, 2024
…, so that the browser can correctly handle focus-visible on the tabs (#62513)
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.
What?
Fix for #62441
We noticed that the focus-visible state of the tabs is sometimes set and other times not. This seems to be connected to where focus is when it is moved to the tabs. This change ensures that when opening the inserter, focus is always moved to the toggle button before the tabs are focussed. This ensures that when the browser focuses the tabs it can correctly handle apply focus-visible or not, depending on how the user interacted with the toggle.
Why?
The tabs should only show focus when they are navigated to via keyboard interactions, not mouse.
How?
Only prevent the default events happening on the toggle when the inserter is already open. We need to prevent the default events when the inserter is open because the inserter behaves like a dialog.
If the inserter is opened already then when we click on the toggle button then the initial click event will close the inserter and then be propagated to the inserter toggle and it will open it again. To prevent this we need to stop the propagation of the event.
This won't be necessary when the inserter no longer behaves like a dialog.
Testing Instructions
Testing Instructions for Keyboard
Notes
See https://cssence.com/2022/focus-visible-and-javascript/ for more details on how focus-visible should work.
Props @jeryj for working with me on this.