Skip to content

aria-live="assertive" blocks label from being read #3353

@rheydt

Description

@rheydt

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    category/accessibilityIssues or PRs related to accessibilityissue/bug-confirmedIssues about a bug that has been confirmed by a maintainerissue/reviewedIssue has recently been reviewed (mid-2020)

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions