search

elastic / eui

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

[A11y] [EuiTable] Improve accessibility on table headers #8087

Closed rbrtj closed 1 week ago

rbrtj commented 1 month ago

Describe the problem The issue originally comes from: #191869. However, it isn't really related to ML but rather to the EUI implementation. I’m transferring it, as discussed on Slack.

To Reproduce Open Kibana and find any table that includes sortable headers. E.G: Machine Learning section -> Overview Then tab through the buttons, the Screen Reader should announce the label associated with each button. In the case of the highlighted button in the screenshot, the Screen Reader only announces "Jobs in group Button". Screen Reader should read something to the effect of "Jobs in group button unsorted. Clicking will sort ascending" (or words to that effect as appropriate), to inform the user that the column is currently unsorted and can be sorted in ascending or descending order.

Image

Proposed solution

For presented case: Activating the "Jobs in group" component, the screen reader should read "Jobs in group button unsorted. Clicking will sort ascending"

WCAG or Vendor Guidance (optional)

WCAG Criterion - 4.1.2 Name, Role, Value - Level A

rbrtj commented 1 week ago

Closing with: https://github.com/elastic/eui/pull/8092#issuecomment-2431198629 It seems to be working fine for now.