# gridListKeys

> Adapts the WAI-ARIA grid pattern onto a GridList's rows and action cells: one roving focus position moves with the arrow and Home/End keys or a click, and Space, Shift and a click drive selection through a `SelectionModel` instance.

```ts
import { gridListKeys } from "@sdxc/ui/mixins";
```

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

```ts
gridListKeys(model: SelectionModel): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `model` | `SelectionModel` | Behavior class instance owning the grid's selected keys. |

## Examples

```tsx
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.

### 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.

#### Signature

```ts
const GRIDLIST_ROW_KEY_ATTRIBUTE = "data-rmx-key"
```