Skip to content

[data grid] Improve keyboard navigation based on the ARIA spec #14204

Open
@arminmeh

Description

@arminmeh

Summary

Data grid already supports keyboard interaction, which is aligned with the grid keyboard interaction ARIA specs, but it is not aligned with the ARIA specs for the treegrid

Among other things, data tree grid is missing expand/collapse control via arrow keys

From the spec

Right Arrow:
If focus is on a collapsed row, expands the row.
If focus is on an expanded row or is on a row that does not have child rows, moves focus to the first cell in the row.
If focus is on the right-most cell in a row, focus does not move.
If focus is on any other cell, moves focus one cell to the right.
Left Arrow:
If focus is on an expanded row, collapses the row.
If focus is on a collapsed row or on a row that does not have child rows, focus does not move.
If focus is on the first cell in a row and row focus is supported, moves focus to the row.
If focus is on the first cell in a row and row focus is not supported, focus does not move.
If focus is on any other cell, moves focus one cell to the left.

Similar ticket for tree view: #12654

Search keywords: accessibility, keyboard, aria

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilitya11ycomponent: data gridThis is the name of the generic UI component, not the React module!enhancementThis is not a bug, nor a new featurefeature: Row groupingRelated to the data grid Row grouping featurefeature: Tree dataRelated to the data grid Tree data feature

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions