Skip to content

Select: accessibility fix #2523

@PosikBoy

Description

@PosikBoy

Describe the bug

I’m using a Select component with a custom rendered filter (TextInput), but I’m unable to make it accessible for screen-reader users. The TextInput is rendered inside a Popup, which applies tabindex="-1" to the input props (technically, this is done by FloatingFocusManager). As a result, the placeholder, aria-label, and the role of the TextInput are not announced by screen readers.

Proposed solution:
If the SelectPopup allowed passing modal and initialFocus props, then FloatingFocusManager would not apply tabindex="-1" by default to the TextInput (or any other custom filter element), preserving its accessibility.

Note: When TextInput is focused tabindex is removed, but by default it's -1.

  1. Click on control
  2. TextInput with tabindex -1 is focused, so the role of the TextInput are not announced by screen readers
  3. TabIndex is removed

Reproduction

https://stackblitz.com/edit/gravity-ui-uikit-example-kfzf7bq5?file=src%2FApp.tsx

Steps to reproduce

You can use a screen reader to understand the problem. Voice over: cmd + f5

Expected:
The input should be announced something like:
“Filter text input. Edit text. You can type to filter options. Popup with n items.”

Actual:
Instead of announcing the input, the screen reader jumps straight to the list and says:
“First option, 1 of n."

Environment

MacOS, yandex browser

Validations

Metadata

Metadata

Assignees

Labels

a11yIssue or pull request related to accessibility improvements

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions