Fix VoiceOver bug for Listbox component in Chrome
#2824
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
Chrome currently has a bug if you use a `Listbox` with a `Label` and use the `aria-multiselectable` attribute. This combination will cause VoiceOver to _not_ announce the `role="option"` elements when interacting with them. If we drop the `aria-multiselectable` OR the `aria-labelledby` it starts working. Alternatively replacing `aria-labelledby` with `aria-label` won't work either. I filed a Chrome bug report about this here: https://bugs.chromium.org/p/chromium/issues/detail?id=1498261 --- Luckily there is a workaround in our `Listbox` implementation. Right now we always require the `Listbox.Button` to be there. The `Listbox.Options` component doesn't work on its own in our implementation. This means that whenever we open the `Listbox` that we have to go via the `Listbox.Button`. This `Listbox.Button` is already labelled by the `Listbox.Label` if there is one. This also means that we can safely drop the `id` of the label inside the `aria-labelledby` from the `Listbox.Options`. This wouldn't have worked if our `Listbox.Options` could be used in a standalone way without the `Listbox.Button`. At the end of the day the hierarchy looks like this: - Options is labelled by the Button - Button is labelled by the Label - Label Fixes: #2817
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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.
Chrome currently has a bug if you use a
Listboxwith aLabeland use thearia-multiselectableattribute. This combination will cause VoiceOver to not announce therole="option"elements when interacting with them.If we drop the
aria-multiselectableOR thearia-labelledbyit starts working. Alternatively replacingaria-labelledbywitharia-labelwon't work either.I filed a Chrome bug report about this here: https://bugs.chromium.org/p/chromium/issues/detail?id=1498261
Luckily there is a workaround in our
Listboximplementation. Right now we always require theListbox.Buttonto be there. TheListbox.Optionscomponent doesn't work on its own in our implementation.This means that whenever we open the
Listboxthat we have to go via theListbox.Button. ThisListbox.Buttonis already labelled by theListbox.Labelif there is one.This also means that we can safely drop the
idof the label inside thearia-labelledbyfrom theListbox.Options.This wouldn't have worked if our
Listbox.Optionscould be used in a standalone way without theListbox.Button.At the end of the day the hierarchy looks like this:
Fixes: #2817