Skip to content

[EuiDataGrid][A11y] Provide contextual aria-label to column selector draggable button #8516

@mgadewoll

Description

@mgadewoll

Description

Relates to: elastic/kibana#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)

Screen.Recording.2025-03-28.at.17.38.04.mov

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

Metadata

Metadata

Assignees

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions