-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
CustomSelectControl: refactor with ariakit #55023
Comments
select
/combobox
components with ariakitselect
/combobox
components with ariakit
@andrewhayward @afercia @alexstine Hey folks! We're looking into improving the Before getting too far into this, we wanted to check in with you all to hear your thoughts on this. Do you have any concerns with the existing Note When testing the new version, the select's popover will appear to be misaligned. You can use the shortcut |
@brookewp thanks for the ping.
The only concern I have with the existing The Ariakit's Select implementation seems more correct to me, at a first glance. It uses a
To emulate a HTML select element This is the behavior we'd want to use for a HTML select-like component. All the properties to be used and intereaction are detailed in the APG. Example available here: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only Input with suggestions This is the pattern we'd want to use for Initial testingQuickly testing with Safari and VoiceOver:
|
Thank you for looking in to this, @afercia ! And also for sharing some very useful links to the relevant parts of the specs.
Thank you! That's good to know, especially since the new version of the component that Brooke has been working on is indeed based on the ariakit
Could you be more specific about what exactly is wrong vs the expected behaviour? I'm also going to re-open this issue, since it was meant to be a tracking issue for @brookewp's ongoing work on those components. |
Oh sorry I think I closed it not intentionally, somehow.
Well simply testing it with a screen reader clearly shows the bugs so I'm assuming this hasn't been tested properly. In both the Multi-Select and the Controlled example, the 'selected' announcement is wrong. I think it's because of incorrect usage of I'm testing with:
Multi-SelectInitial announcement of the two selected options looks correct: But, as soon as arrow keys are used to move to the other options, the announcement is wrong: 'flamingo pink' is not selected but it is announced as 'added to selection'. or, it announces that a selection has bee 'replaces' while it is not true: And again, moving through the options it announces 'removed from selection' or 'added to selection' when it's not true. ControlledThis is a bit uncomfortable to test as there are a few containers with CSS overflow property that cut-off the dropdown. I removed those CSS using the dev tools inspector properties for testing purposes. Again, navigating through the options, it may announce an option as 'selected' while it is not true: |
@afercia, thanks for testing. There's a bug in WebKit/Safari. I can reproduce the same behavior on the APG Multi-Select Listbox example. Safari has known issues with For now, the |
Thank you Diego for the reply!
Do you suggest, for now, always setting |
The Safari bug is a really bad one. It also affected the block autocompleter. Safari needs to keep support for ARIA attributes, that's the least Apple could do. |
Yes that's a known problem but I don't think it's the only one. Latest Safari version seems to made things even worse. However, we already went through listboxes, comboboxes, autotompleters, Still, it's important to note that the 'Add new tag' combobox with suggestions does work with Safari / Voiceover. It does use Since this combobox + listbox does work, I'd suggest to investigate in depth why it works and why the other ones don't. There must be something that we are missing (and I couldn't find it out so far). Screenshot of the Tag suggestions working with Safari / Voiceover: Tested with: |
That would be the |
I believe it works likely because the controlled descendant appears directly after the input in the DOM. |
Yes it is possible. Also, I seem to recall Safari / VoiceOver don't work at all with options nested within groups. |
Context
Continuing with the exploration started by @ciampo in #41466, this issue will track the migration of
CustomSelectControl
to Ariakit.Legacy: #55234
New version: #55790
Initial steps
CustomSelect
: AddWordPressComponentsProps
#56998children
(and a CustomSelectControlV2.Item component) to allow its consumers to specify select optionsvalue
/onChange
/defaultValue
/label
/size
props)V2 Legacy Wrapper
Completed in #57902
CustomSelectControl
: add additional unit tests #56575onChange
callback and DOM elementsCustomSelectControlV2
: fix handling of extra attributes passed tooptions
in the legacy adapter #62255value
is passed? (can be reproduced by following the testing instructions inCustomSelectControlV2
: fix handling of extra attributes passed tooptions
in the legacy adapter #62255 re.FontAppearanceControl
in global styles) — fix in CustomSelectControl V2: fix setting initial value and reacting to external controlled updates #62733onChange
doesn't fire on first render on v1 while it does on legacy v2 (WIP PRCustomSelectControlV2
: Fix initial value not being set in the select for the V1 legacy adapter #62308, comment) — fix in CustomSelectControl V2: fix setting initial value and reacting to external controlled updates #62733CustomSelectControlV2
: Fix styling issues #62424)CustomSelectControl
#63139V2
To discuss
DropdownMenuV2
? (see CustomSelectControlV2: Add root element wrapper #62803 (comment)))DropdownMenuV2
tooisMultiple
prop? (especially when neithervalue
nordefaultValue
are specified, but also for TS ergonomics)height
(including the maximum and minimum heights) (see Improve CustomSelectControl's usability around max height #49110)Select
-related components recently added to AriakitDropdownMenuItem
?SelectItemCheck
To implement
CustomSelectControl
andCustomSelectControl.Item
CustomSelectControlV2: Rename for consistency #60178InputBase
for styling #60261Select
components (see changelog)InputControlPrefixWrapper
disabled
To check before releasing
The text was updated successfully, but these errors were encountered: