GridPicker

C-36 OfficeWCAG 2.2 AA · Passed

The Insert table size picker (10 × 8): arrows grow the selection, the live label names it, Enter inserts. The label is the grid's aria-describedby.

Axis / element	Values
`__grid` · `__row` · `__cell[data-state="selected"]`	the size grid
`__label`	"4 × 3 table"

Guidance

When to use

Use it in the Insert table popover to choose a table size by columns and rows, up to 10 by 8.
Use it when a quick size pick covers most cases and a dialog covers the rest.
Use __label to name the current size, such as "4 × 3 table".

When to consider something else

When users need more than 10 columns or 8 rows, or exact settings, open the Insert table dialog with Spin buttons. See SpinButton.
When the choice is a color, use the Color picker, which shares the cell size but names each cell. See ColorPicker.

Usability

Do

Grow the highlighted block from the top-left cell as the pointer or arrow keys move.
Update the label on every change so the size is always readable.
Keep an "Insert table…" command next to the grid for sizes the grid cannot reach.
Use Fluent Regular glyphs for any command next to the grid inside .qf-office (README, Icons).

Don’t

Don't make each cell a tab stop; the grid is one control.
Don't use the highlight color as the only sign of the size; the label states it.

Accessibility

Keyboard

GridPicker keyboard
Keys	Action
`Tab`	Moves focus to the grid, which is one tab stop.
`Arrow Right / Arrow Left`	The binding must add or remove a column from the selection and update the label.
`Arrow Down / Arrow Up`	The binding must add or remove a row from the selection and update the label.
`Enter`	The binding must insert a table of the selected size and close the popover.
`Escape`	Closes the popover without inserting and returns focus to the opener.

Roles and names

__grid has role="grid", an aria-label ("Insert table") and aria-describedby pointing at __label.
Rows are role="row" and cells role="gridcell"; selected cells carry data-state="selected" as a visual state.
The label text must change with the selection so screen readers can read the new size; the binding should announce it through a polite live region as well.

Focus

Focus stays on __grid (tabindex="0") while the selection moves; it shows a :focus-visible ring.
After insert, focus moves to the first cell of the new table in the document.

Other requirements

Cells are 1rem (16px), below 2.5.8's 24px; the keyboard path and the Insert table dialog are the equivalent, so keep the dialog command present.
In forced colors selected cells fill with Highlight and all cells get a CanvasText border.
Selected cells use the app accent soft fill; check it reaches 3:1 against unselected cells (1.4.11).

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

GridPicker test checklist
Area	Automated	A person checks
General	Passed	Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom	Passed	At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard	Passed	Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order. (5 rows)
Screen reader	Passed	With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (3 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- grid-picker --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

GridPicker package
Source	`css/classic/components/pickers.css`
Specimens also use	Box · Card · Chip · Popover · Table · Text · Toolbar
Sprites	—
React	Not yet available: the React binding has not started.

Latest updates

No recorded changes yet.

All release notes