Add combobox props to MaskedInput with suggestions #7588
Conversation
I believe that is the automatic readout that happens when you've selected something and then it's active again. For example, here's what happens in Headless UI combobox |
It seems like it announces that even when I haven't selected anything previously. Just seems a little odd. |
|
Taylor and I chatted more about the 'completion selected' announcement. Seems like something was changed recently in voiceover with this behavior. It also isn't consistent in how it reads out even with suggestion drop downs outside of Grommet. This behavior seems outside of our control so leaving things as they are for now. |
What does this PR do?
Adds
comboboxprops to MaskedInput (similar to TextInput logic).Slight modifications to the logic so that each mask section can appropriately inform screen reader if it's expanded.
According to ARIA documentation, an "id" is needed to associate the input with the combobox, so added "id" to the stories in MaskedInput and TextInput that involve the suggestions.
Where should the reviewer start?
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/combobox_role
What testing has been done on this PR?
Locally in SizeUnits story with VoiceOver.
How should this be manually tested?
Same as above.
Do Jest tests follow these best practices?
screenis used for querying.asFragment()is used for snapshot testing.Any background context you want to provide?
What are the relevant issues?
Closes #7573
Screenshots (if appropriate)
Do the grommet docs need to be updated?
Should this PR be mentioned in the release notes?
Yes. Fixed MaskedInput to support
comboboxaria properties for dropdown options.Is this change backwards compatible or is it a breaking change?
Backwards compatible.