mi6
Screen reader incorrectly says you can type inside a select (single + multi)
Summary of the bug
Raised on behalf of a customer
When focusing on a select (single-select or multi), the screen reader says "Type text or, to display a list of choices, press Control-Option-Space". The "type text" bit is misleading because you can't actually type anything in it.
🪜 How to reproduce
- With a screen reader turned on, go to single- or multi-select component e.g. Storybook.
- Focus on the select.
- See / hear that it says you can type in it.
📸 Screenshots or code
🖥 📱 Device
Tested using VoiceOver on Chrome
🧐 Expected behaviour
The screen reader should not say that you can type in it.
🚨 Urgency (low, medium or high)
This is medium urgency for the customer. This needs to be resolved by 10th February at the latest (alongside their other issue, #4078) but it should ideally be done well before then, particularly with it being accessibility-related.
I believe this is due to having role="combobox" on our select component.
It's true you cannot type into a single / multi-select in the same way you can with a searchable select. However, the select does still actually respond to typing characters, e.g. if you're focused on the select and type the letter C, it selects the first option beginning with a C (just like a native select).
Maybe a potential solution would be to keep role="combobox" and just make sure that screen reader actually announces that an option has been selected. (At the moment, if you select "Cappuccino" for example, by pressing "c", the screen reader doesn't say anything to indicate that "Cappuccino" is now selected).
Would this count as "typing text" like the screen reader says? This would be very similar to the behaviour of the WCAG combobox example.
This work might be affected by #666 and #3757 - as we hew closer to native combobox functionality
