Reported by @jorgeoliveira117

Related Kibana issue: elastic/kibana#219240

Description

When navigating EuiSelectable with searchable in screen readers, the search input is not announced while it is focused. This results in the user not having information about the element.

The search input has a hint text applied in code (code), but it's not read out. This is because the activeOptionIndex that's set on onFocus (code) populates the aria-describedby which controls the screen reader navigation/focus for listboxes. Instead of the search input that's focused, the active option will be focused and read by the screen reader. The input is skipped.

It seems like we need to change when the activeOptionIndex is set to ensure the search input is focusable standalone.

⚠️ Ensure to test the update in Kibana to understand potential test case failures.

Impact and severity

Medium - High: The component is functional but semantically it's not correct and creates confusion for screen reader users. Basically the input element is invisible due to it not being announced.

Violates WCAG 4.1.2 Name, Role, Value (Level A)

Minimum reproducible sandbox

https://eui.elastic.co/next/docs/components/forms/selection/selectable/#searchable

To Reproduce

• Open EuiSelectable with searchable=true
• Navigate with a screen reader (e.g. NVDA in Windows) and focus the search input
• observe that the input is focused in the DOM but the screen reader focus moves to an option in the selectable list

Expected behavior

The search input is focusable by screen reader navigation and read out with all its semantic information.