-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Inserter: Allow focus to move to the toggle when opening the inserter #62513
Conversation
…, 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. |
Size Change: -9 B (0%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Testing well!
…, so that the browser can correctly handle focus-visible on the tabs (WordPress#62513)
…, so that the browser can correctly handle focus-visible on the tabs (#62513)
…, 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 |
…, so that the browser can correctly handle focus-visible on the tabs (#62513)
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.