-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Description
Issue:
If you associate a form label with a react-select input, the label is never announced by a screen reader.
Replication:
Example here: https://codesandbox.io/s/n0q28p50xp
Tested using react-select v2, VoiceOver and Safari.
Expected behavior:
When native select element is associated with a label, a screen reader will read the label when the select receives focus.
Actual behavior:
Instead, when the react-select input receives focus, the screen reader is interrupted and begins immediately reading the contents of the A11yText
component (which are manually generated by react-select and don't support including label text) because that component uses aria-live="assertive"
.
Impact:
Without being able to associate a label with the input in a form, this component is not compliant with WCAG 2.0 accessibility guidelines (https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)
Possible solutions include:
- Using
aria-live="polite"
instead of"assertive"
(better practice, anyway, since you don't know what else in the application/website the screen reader might be needing to keep track of) - Adding a new optional prop where form label text could be passed to the
A11yText
component - Allowing an
id
prop to be passed to the native input element