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

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions