[ @sdxc/ui/mixins ]
treeKeys
Adapts the WAI-ARIA tree keyboard pattern onto a Tree's rows.
import { treeKeys } from "@sdxc/ui/mixins";Usage
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
treeKeys(model: SelectionModel): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Description |
|---|---|---|
model | SelectionModel | Behavior class instance owning the tree's selected-key set. |
Examples
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.
new TreeChangeEvent(init: {
selectedKeys: ReadonlySet<SelectionModel.Key>;
activeKey: SelectionModel.Key | null;
})| 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.
const TREE_ITEM_ATTRIBUTE = "data-tree-item"