Vivid Logo Vivid

Data Grid

Allows users to interact with data in a tabular format.

  • Sort functionality is not announced when header cell is focussed.
    We have an item on the backlog to address this improvement.

This component was tested and signed off by Applause (external accessibility specialists).

Keyboard Interactions

  • Navigate data-grid cells using the Arrow keys.
  • If a cell contains an interactive element, it can be reached using the Tab key.
  • If a header cell contains sort functionality, it can be activated using the Space or Enter key.

Implementation

  • Usage of selected attribute defines the aria-selected value.
  • Similarly, usage of sort-direction attribute is reflected in aria-sort value.
  • When a cell is sorted but not according to ascending or descending algorithm, use sort-direction="other".

Resources