트리 그리드와 기타 고급 패턴

Some widgets are genuinely complex: treegrids, grids, and trees combine rows, columns, and expandable nodes all at once. 🌳

A treegrid is a grid whose rows can expand and collapse like a tree, perfect for a file browser with nested folders and columns of detail.

Use role="treegrid" on the container, role="row" on each row, and role="gridcell" on the cells. The structure mirrors a real grid.

A row that can open carries aria-expanded, true when its children show and false when collapsed. Leaf rows omit it entirely.

Use aria-level to tell users how deep a row sits in the tree. Level 1 is the top, and each nested row counts one higher.

In a treegrid, arrow keys move on both axes: Up and Down change rows, while Left and Right move between cells or collapse and expand.

On a parent row, Right Arrow expands it and Left Arrow collapses it. This matches how desktop file trees have always worked.

The whole treegrid is a single tab stop. Roving tabindex moves the real focus among cells so the widget feels like one composite control.

For dynamic or virtualized rows, use aria-setsize and aria-posinset so users hear position counts even when not all rows are rendered.

Advanced grids add Home and End to jump to the first or last cell, and Ctrl with Home or End to leap to the very start or end of the data.

These patterns are unforgiving, so follow the APG example closely and test with a real screen reader. Small mistakes break the whole widget.

You build a file browser where rows open to reveal nested rows inside a grid. Which role fits?

A treegrid blends grid and tree: rows with aria-expanded and aria-level, two-axis arrow keys, one tab stop via roving tabindex. Lean on the APG and test hard. ✅