Accessibility

One Tab Stop

Click a cell in the grid below, then walk it with the arrow keys. Press Tab and you leave the grid in one press rather than one per cell: the cells carry a roving tabindex, and every control inside a cell answers through the cell that holds it.

That is also why the selection checkbox is not tabbable, and why Space on the cell toggles it instead.

// One tab stop. The cells carry a roving tabindex: the active one is 0,
// every other is -1, so Tab leaves the grid rather than walking it.
//
// A control inside a cell answers through the cell rather than taking a
// stop of its own. That is why the selection checkbox is not tabbable and
// Space on the cell toggles it instead: a hundred-row grid used to cost a
// hundred presses to step over.

// Where the focus is, and how to move it
grid.focus.active;                         // { row, col, section? }
grid.focus.focusCell({ row: 0, col: 2 });
grid.focus.moveBy(1, 0);

// A negative row is the header: the body starts at 0, so a focus sitting
// above it is the header row rather than a row of data.
grid.focus.active.row < 0;

Navigation

Actions

Every binding a registered feature contributes. A feature that is not registered contributes nothing, so its keys stay free.

The ARIA Shape

Positions are absolute rather than relative to the rendered window, which is what lets a virtualized grid tell the truth: row 1,400 of 2,000 says exactly that, even though only twenty rows exist in the DOM.

The grid below holds 2,000 rows and renders a dozen or so. Click a cell, sort a column, tick a row, then read the attributes off the DOM: the count never shrinks to the window, and the row index says where the row sits in the whole set. The count reads 2,001 because ARIA counts the header row too. The last badge is the exception that proves the point: it counts rows in the DOM, so sorting a selected row out of the window takes it back to zero while the grid still holds the selection.

<!-- A div-based ARIA grid, or treegrid once rows nest. Every row and cell
     carries its position, so a screen reader can say where it is even
     though only a window of rows exists in the DOM. -->
<div role="grid" aria-rowcount="2000" aria-colcount="5">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <div role="columnheader" aria-colindex="1" aria-sort="ascending" tabindex="0">Name</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="42" data-dg-row-id="41">
      <div role="gridcell" aria-colindex="1" data-dg-cell="40:0" tabindex="-1">Ada</div>
    </div>
  </div>
</div>

ARIA Attributes

The Announcer

Sorting, filtering, paging, selection, column changes, row moves and a blocked edit all go through a polite live region. Every string belongs to the locale pack, so it speaks the language the grid is in, and any of them can be replaced.

The region is invisible, so the panel below mirrors it. Sort a column, type in the quick filter, tick a row or move a column, and read what a screen reader would have heard.

// A polite live region announces what a sighted user sees change.
// Every string is part of the locale pack, so it speaks the grid's
// language, and any of them can be replaced.
createDataGrid<Person>({
  columns, data, getRowId,
  announcer: {
    sorted: (column, direction) => `${column}, ${direction}ending`,
    filtered: (count) => `${count} rows left`,
    selected: (count) => `${count} selected`,
    rowMoved: (position) => `moved to ${position}`
  }
});

// The full set also covers sortCleared, page, columnResized, columnMoved,
// columnPinned, columnVisibility, copied, rowExpanded, rowPinned and
// editInvalid.

What It Says

Every string the announcer speaks. Each one belongs to the locale pack, so it is in the grid's language, and any of them can be replaced through announcer.

Right to Left

Layout uses logical properties throughout, so dir="rtl" mirrors the grid rather than restyling it. Flip the switch below: Name is pinned to the start, so it moves to the right edge and its shadow turns with it, and the sort arrow and column menu follow.

The columns are wider than the demo, so drag the scrollbar in both directions too. Horizontal scrolling is normalized through scrollStart, because browsers disagree on whether scrollLeft is negative under RTL.

<!-- Layout uses logical properties throughout, so dir="rtl" mirrors the
     grid, pinned columns included. Horizontal scroll is normalized through
     scrollStart, since browsers disagree on the sign of scrollLeft under
     RTL. -->
<div dir="rtl">
  <DataGrid {grid} toolbar />
</div>