fix(select): communicate component state to screen reader #2947
Conversation
chasestarr
requested review from
gergelyke,
nadiia,
sandgraham and
tajo
as code owners
|
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/uber-ui-platform/baseweb/bjc2e5poo |
| @@ -179,6 +179,7 @@ export type PropsT = { | |||
| }; | |||
|
|
|||
| export type SelectStateT = { | |||
| activeDescendant: ?string, | |||
There was a problem hiding this comment.
should we add these to the TS type definitions too?
|
This works pretty great overall. However; it seems that backspace doesn't work anymore. |
Can you please provide some reproduction steps and also validate against master? I didn't make any changes related to backspace in this PR. It may be a separate regression |
Do you mean to remove the selected value? It only works for |
|
Ah, it's not a regression. When you select a value you are not able to delete part of it to search for other options. That's a bit annoying. |
* fix(menu): tell screenreader menu item is disabled * feat(menu): add activedescendant change handler * fix(select): apply active descendant to select input * fix(select): apply listbox id to input controls * fix(select): applies aria label with selected values * fix(menu): update menu tests * fix(select): conditionally apply listbox id * fix(select): update snapshot * chore(types): update typescript defs
Description
Improves the select component so that screen readers can successfully operate it. See #2929 for an approach that would make
Selecta semantic combobox, but may lead to unintended changes in behavior. This Diff seems to be a good middle ground between making it operational, but not changing functionality.Scope