| description | Use when building an accessible data table (semantic markup, sortable columns, sticky header that stays put while users scroll long lists, mobile-safe reflow strategy, row selection with select-all and indeterminate state, virtualised tables that need `aria-rowcount` / `aria-colcount`), when adding a Cmd+K (Ctrl+K on non-Mac) command palette to a product so power users can jump to any feature or run any command without leaving the keyboard, or when an existing `<div role="table">` mess needs to be refactored to a native `<table>` for keyboard support and free a11y. Prevents the `<div role="table">` and `<div role="row">` anti-pattern (loses keyboard semantics that the native `<table>` gives for free), missing `scope` on `<th>` (screen readers cannot associate header with cells), sortable column header built as a `<div>` with a click handler (no keyboard activation, no focus, no `:focus-visible`), `<thead>` declared `position: sticky` without a scrolling parent (it never sticks; the parent MUST have `overflow: auto` and a height constraint), command palette built without focus restoration (focus jumps to body when closed), command palette listbox using DOM focus on options instead of `aria-activedescendant` (typing in the input breaks; the APG combobox pattern is explicit), keyboard-only Cmd+K with no visible trigger button (WCAG 2.1.1 violation), and missing `<caption>` or `aria-label` on a data table (screen-reader users have no context). Covers the native `<table>` surface (`<caption>`, `<thead>`, `<tbody>`, `<tfoot>`, `<th>` with `scope="col" / "row" / "colgroup" / "rowgroup"`, `headers="<id>"` for complex tables with `colspan` / `rowspan`), `aria-sort` (`ascending` / `descending` / `none` / `other`) on the sorted column header, `aria-rowcount` and `aria-colcount` for virtualised tables, the `<th><button aria-sort="...">` sortable-column pattern, `position: sticky; inset-block-start: 0;` on `<thead>` inside a scrolling wrapper, the mobile-table strategy matrix (horizontal scroll vs container-query card reflow vs hide-some-columns), row selection with `<input type="checkbox" aria-label="...">` and an indeterminate header checkbox, the command-palette pattern using `<dialog>showModal()` for focus trap and Escape, the APG Combobox pattern with `aria-activedescendant` (DOM focus stays on the search input), the global Cmd+K / Ctrl+K hotkey registration pattern, and the WCAG 2.1.1 rule that every keyboard shortcut MUST have a visible UI equivalent. Keywords: data table, accessible table, native HTML table, table semantic markup, table caption, table th scope, table aria-sort, table aria-rowcount, table aria-colcount, sticky header, position sticky, sortable column, indeterminate checkbox, row selection, select-all checkbox, virtualised table, command palette, Cmd-K, Ctrl-K, command palette pattern, ARIA combobox, role listbox, aria-activedescendant, aria-expanded, aria-controls, aria-haspopup, dialog showModal, focus trap, focus restore, mobile table reflow, container-query table, table on mobile, horizontal scroll table, table not accessible, screen reader does not announce sort, mobile table overflow, command palette focus broken, table sort breaks keyboard, header not sticky, cmd+K not working, how do I make an accessible data table, sortable table HTML, command palette pattern, Cmd K dialog, table on mobile, accessible table header, how to add cmd K, what is command palette.
|
