CustomSelectControl V2: keep legacy arrow down behavior only for legacy wrapper #62919
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
85 tasks
|
Size Change: 0 B Total Size: 1.75 MB ℹ️ View Unchanged
|
ciampo
force-pushed
the
fix/custom-select-control-v2-arrow-down
branch
from
5321e8e
to
38c1546
Compare
|
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. |
ciampo
added
[Type] Enhancement
|
Hey @t-hamano , if I'm not mistaken you use a Windows machine regularly. I have found this comment in the V1 component: gutenberg/packages/components/src/custom-select-control/index.js Lines 26 to 29 in b76de86 Are you aware of this behavior? Would it be ok if, in the V2 (non legacy) version of the component, we relied on the arrow down key to open the select popover? Thank you 🙏 |
tyxla
reviewed
Jul 1, 2024
packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
Show resolved
Hide resolved
packages/components/src/custom-select-control-v2/test/index.tsx
Outdated
Show resolved
Hide resolved
ciampo
force-pushed
the
fix/custom-select-control-v2-arrow-down
branch
from
79b0a3d
to
a518d2f
Compare
mirka
reviewed
Jul 1, 2024
packages/components/src/custom-select-control-v2/custom-select.tsx
Outdated
Show resolved
Hide resolved
This is the first time I've seen this code, but it looks like it's intended to simulate the behavior of the native select element in Windows OS. On Windows OS, the native select elements behave as follows:
97784a2cb54294de6a164c9d92cb160d.mp4This behavior is the same for On the other hand, in this PR, the up and down arrow keys always open the dropdown. db00db5095c3c769669578cecf4b915f.mp4I'm concerned that behavior that differs from the Windows OS standard may be a bit confusing for keyboard users. I don't really understand the history of this PR being submitted, so sorry if I'm off the mark 🙏 |
|
Thank you, @t-hamano ! Always appreciate your help :D
It seems that there isn't a standard behavior across OSs — on MacOS, pressing arrow down on a closed Looking into the WAI-ARIA APG, it looks like the recommended behavior is to open the dropdown when pressing arrow down:
That is a valid concern, but unfortunately, one that we can't easily solve across all OSs unless we try to sniff the OS (which I'd like to avoid). In this scenario, I'd suggest we follow the WAI-ARIA APG — that would mean that, in |
ciampo
force-pushed
the
fix/custom-select-control-v2-arrow-down
branch
from
c2f7c59
to
3ed4327
Compare
I see, if that’s the case then I think it’s okay 👍 |
…lProps` + `<button />`
ciampo
force-pushed
the
fix/custom-select-control-v2-arrow-down
branch
from
3ed4327
to
1b388cc
Compare
|
Hey folks, I think this PR should be ready for a final round of review, if we agree on the approach taken |
tyxla
approved these changes
Jul 4, 2024
| /** | ||
| * External dependencies | ||
| */ | ||
| // eslint-disable-next-line no-restricted-imports |
There was a problem hiding this comment.
🤔 Shouldn't we allow Ariakit imports within the components package? Sounds like it could be an exception to the ESLint rule.
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jul 18, 2024
…cy wrapper (WordPress#62919) * Use isLelacy flag to enable/disable showOnKeyDown behavior * Add unit tests * CHANGELOG * Unit tests: Add `sleep()` before pressing `Tab` key * Use label when checking that the listbox hasn't opened * Use label variable instead of hardcoded string * Use `Ariakit.Select` prop types instead of `CustomSelectButtonInternalProps` + `<button />`
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?
Tracked in #55023
Change the result of pressing the arrow down key when focussing the trigger button on V2
CustomSelectControl(non-legacy). While the V1 and the V2 legacy wrapper select previous/next option item (with the select popover hidden), the V2 (non legacy) component opens the select popover instead.Why?
The V1 behavior felt non-standard, but we see value in retaining the original behavior in the V2 legacy wrapper.
Having a separate V2 allows us to switch to a better, more standard default.
How?
showOnKeyDownprop to internal users of theButtonisLegacyprop to affect theshowOnKeyDownbehaviorTesting Instructions
CustomSelectControl. Focus the trigger button and press the arrow down key. V1 and V2 (legacy wrappers) should keep the select popover closed and change item selection, while V2 (default) should open the select popover.