[ @sdxc/ui/mixins ]
gridListKeys
Adapts the WAI-ARIA grid pattern onto a GridList's rows and action cells.
import { gridListKeys } from "@sdxc/ui/mixins";Usage
Adds ARIA grid keyboard and pointer navigation to a GridList's rows and
action cells, driving a SelectionModel from both and mirroring its
"change" events back onto the rows as aria-selected.
Signature
gridListKeys(model: SelectionModel): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Description |
|---|---|---|
model | SelectionModel | Behavior class instance owning the grid's selected keys. |
Examples
let model = new SelectionModel({ keys: rows.map((row) => row.id) });
<div role="grid" mix={[gridListKeys(model)]}>
{rows.map((row) => (
<div key={row.id} role="row" data-rmx-key={row.id} tabIndex={-1}>
{row.label}
<button role="gridcell" tabIndex={-1}>Remove</button>
</div>
))}
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
Constant
GRIDLIST_ROW_KEY_ATTRIBUTE
Attribute every GridList row exposes its SelectionModel.Key on;
gridListKeys() correlates a row with the key SelectionModel tracks its
selection under, and writes aria-selected back as the model changes.
const GRIDLIST_ROW_KEY_ATTRIBUTE = "data-rmx-key"