elastic / eui

Elastic UI Framework 🙌
https://eui.elastic.co/
Other
56 stars 841 forks source link

[A11y] [SearchBar] Filters: WCAG 3.2.2 On Input does not cause a change of context #8088

Closed rbrtj closed 42 minutes ago

rbrtj commented 1 month ago

Describe the problem This issue is copied from: #191867 The search bar provides a filters section. When you focus on a filter, the screen reader reads the filter name but does not indicate that activating the component will shift the focus.

To Reproduce Pasting an example that occurs in ML, but it appears in all places where filters are visible.

Open Kibana and navigate to the "Machine Learning" section then tab through the buttons, the Screen Reader should announce the label associated with each button. Tabbing to the "Level" component, the Screen Reader reads "Button Level". Activating the "Level" component opens a new dialog and adjusts the focus so the next tab will result in the focus being set on the first entry in the dialog. But the user is not informed prior to activating the "Level" component that a change in focus will occur. An example of a better label for the "Level" component is the button for the "Calendar" icon above, which, when tabbed into, the Screen Reader reads "Date Quick Select Button", which informs the user that activating the button will present them with a way to select a date. Suggest adding "Select" to the "Level" component so the Screen Reader will read "Level Select Button" Image

Proposed solution

Activating the "Level" component, the screen reader should read "Level Select Button"

WCAG or Vendor Guidance (optional)

WCAG Criterion - 3.2.2 On Input - Level A Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.