# treeKeys

> Adapts the WAI-ARIA tree keyboard pattern onto a Tree's rows: a roving focus position moves between visible rows, arrow keys expand, collapse, or step into and out of a subtree, and typed text matches labels, with every selection change delegated to a shared `SelectionModel`.

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

Turns a Tree's row list into the ARIA tree keyboard surface for its rows:
arrow keys move, expand, and collapse; typed text searches labels; and
every selection delegates to `model`, mirroring back and firing TreeChangeEvent.

## Signature

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

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `model` | `SelectionModel` | Behavior class instance owning the tree's selected-key set. |

## Examples

```tsx
let model = new SelectionModel({ mode: "multiple" });
<div role="tree" mix={[treeKeys(model)]}>
  <div role="treeitem" aria-level={1} aria-expanded="true" data-tree-item="docs">Docs</div>
  <div role="treeitem" aria-level={2} data-tree-item="docs/readme">README</div>
</div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### TreeChangeEvent

Dispatched on a Tree's row list by treeKeys whenever the bound
`SelectionModel`'s selection changes or the roving cursor moves rows, so
a consumer can react without reading the model or DOM focus directly.

#### Signature

```ts
new TreeChangeEvent(init: {
		selectedKeys: ReadonlySet<SelectionModel.Key>;
		activeKey: SelectionModel.Key | null;
	})
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `selectedKeys` | `readonly ReadonlySet<SelectionModel.Key>` | Keys the bound model currently reports as selected. |
| `activeKey` | `readonly SelectionModel.Key \| null` | Key of the row currently holding the roving keyboard cursor, or `null` when no row has focus. |

### TREE_ITEM_ATTRIBUTE

Attribute every Tree row exposes itself on; its value doubles as the
`SelectionModel.Key` treeKeys toggles, ranges over, and mirrors
`aria-selected` onto, while `aria-level`/`aria-expanded` derive each row's place.

#### Signature

```ts
const TREE_ITEM_ATTRIBUTE = "data-tree-item"
```