Fix Dropdown/DropdownMenu toggle closing in all UAs #31170
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
|
Size Change: -4 B (0%) Total Size: 1.05 MB
ℹ️ View Unchanged
|
stokesman
added
[Package] Components
stokesman
requested review from
ajitbohra,
chrisvanpatten and
ellatrix
as code owners
7 tasks
|
Changing the tabindex affects a11y so this will PR needs a11y feedback. Added the related tag 👍 |
|
@stokesman I came to the same conclusion in #30392. Could you rebase this PR? |
ellatrix
reviewed
Sep 13, 2021
|
@diegohaz can you take a brief look as well? |
stokesman
force-pushed
the
update/dropdown-tabindex
branch
from
b67dbcf
to
4ff1e08
Compare
|
Thanks for reviewing @ellatrix! It's rebased with a comment like the suggested. |
diegohaz
approved these changes
Sep 14, 2021
|
Thanks for reviewing @diegohaz 🙇
Tricky since a |
fullofcaffeine
added a commit
that referenced
this pull request
Sep 16, 2021
* trunk: (74 commits) Update docs for ClipboardButton component (#34711) Post Title Block: add typography formatting options (#31623) Bump plugin version to 11.5.0 Navigation Screen: Adjust header toolbar icon styles (#34833) Fix the parent menu item field in REST API responses (#34835) Rewrite FocusableIframe as hook API (#26753) Create Block: Remove wp-cli callout since not recommended and outdated (#34821) Global Styles: Fix dimensions panel default controls display (#34828) [RNMobile][Embed block] Enable embed preview for Instagram and Vimeo providers (#34563) Increase Link UI search results to 10 on Nav Editor screen (#34808) Prevent welcome guide overflow x scroll (#34713) Enable open on click for Page List inside Navigation. (#34675) [RNMobile] [Embed block] - Unavailable preview fallback bottom sheet title update (#34674) Add missing field _invalid in menu item REST API (#34670) Fix Dropdown/DropdownMenu toggle closing in all UAs (#31170) Navigation submenu block: replace global shortcut event handlers with local ones (#34812) Navigation Screen: Consolidate menu name and switcher (#34786) Remove parent and position validation from menu item REST API endpoint (#34672) Clean theme data when switching themes in the customizer (#34540) Components: add reset timeout to ColorPicker's copy functionality. (#34601) ...
7 tasks
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.
The Dropdown (and DropdownMenu) components have broken toggle behavior in some browsers (notably Safari and Firefox on macOS). Making the root element of the
Dropdowncomponent focusable makes its current toggling logic work as intended.Before this PR, I'd tried alternate approaches (#30397, #30786) that were not nearly as simple.
Explainer
The intended behavior depends on testing that the focused element is inside of the dropdown component:
gutenberg/packages/components/src/dropdown/index.js
Line 68 in 7453998
The UAs in which the current logic fails do not focus buttons when pressed. Instead, focus goes to the closest focusable containing element and ends up outside of the component. The change here ensures that focus won't leave the component and thus the current logic will work.
Extra
I threw in an extraneous but related change b67dbcf to remove a workaround that had been made due to the buggy dropdown behavior.
How has this been tested?
Manually in Chrome, Firefox and Safari on macOS. In the post editor and site editor, toggling all the dropdowns.
Types of changes
Bug fix #29746
Screenshots
Before: the broken toggling of various dropdowns in Safari on macOS.
dropdowns-in-safari.mp4
Checklist:
*.native.jsfiles for terms that need renaming or removal).