eui
eui copied to clipboard
[EuiDataGrid][A11y] Provide contextual `aria-label` to column selector draggable button
Description
Relates to: https://github.com/elastic/kibana/issues/205846
Currently the usage of EuiDraggable inside EuiDataGrid's column selector uses a static aria-label (code). This results in repetitive labels for all columns inside the selector and does not provide the required context for the action.
Output
Drag handle button Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key
Expected behavior:
Instead of drag handle the button should add context about which item will be dragged (list item content)
https://github.com/user-attachments/assets/0eb4a145-f69e-4ffc-8a01-1e4c2bfce911
Additional improvement
Additionally when starting the drag of an item inside the column selector popover, the entire informational hint is repeated again.
clickable Name button Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel. Some screen readers may require you to be in focus mode or to use your pass through key You have lifted an item in position 1
We might want to consider the following:
- a) prevent duplicate output (currently the focus is moved from the draggable button to the drag item content which triggers a repeated output)
- b) add a less verbose version while dragging is in progress