-
Notifications
You must be signed in to change notification settings - Fork 138
Description
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.
- Click on control
- TextInput with tabindex -1 is focused, so the role of the TextInput are not announced by screen readers
- 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
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.