[EuiDataGrid][A11y] Column selector dragging accessibility improvements
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
## Description
Relates to:
- https://github.com/elastic/kibana/issues/211244
- https://github.com/elastic/kibana/issues/205863
There are currently a couple of implementation issues with the keyboard navigation for dragging in `EuiDataGrid`'s column selector functionality when using screen readers (specifically tested in NVDA/Windows).
1. When focusing the drag icon button and starting a drag, the drag item will be re-rendered in a portal (for more context why this happens, see this [PR](https://github.com/elastic/eui/pull/8048)). This re-render causes the focus on the drag button to be lost. As a result NVDA exists Focus mode and the attempt to reorder the dragging item using arrow keys is not possible, as the arrow keys are occupied by the NVDA browse mode navigation.
2. For mouse user comfort, the drag item text content is also a drag handle. Keyboard focus is disabled via `tabindex="-1"`. This technically requires the drag icon button and text content to use the same `dragHandleProps` which results in the focus being moved from the button to the text on drag start. (this might be a none-issue if we manually ensure the focus is returned to the button for [1])
3. The drag icon button only triggers on `Space` key while buttons use `Space` and `Enter` keys.
4. Usually screen readers automatically switch to focus mode on focusable elements (e.g. this is the case for the switch element of the same draggable item). This is not the case for the drag icon button (custom element) which results in users not being able to press `Space` to start dragging. It requires users to manually switch to focus move (NVDA: `insert + Space`) first.
- this seems to potentially be a general issue with the drag handles for `EuiDraggable` as also other custom usages have the same issue (e.g. https://github.com/elastic/kibana/issues/205682)
>[!NOTE]
As the column selector uses EUI drag components (`EuiDraggable`, `EuiDroppable`) we should review if there are more generic fixes to be made to solve the issues or if other components would require similar updates as well.
Contributor guide
Assessment
This issue has not been assessed yet.