# listboxKeys

> Adapts `@remix-run/ui/listbox`'s ARIA listbox keyboard pattern onto a ListBox's option-list host, delegating arrow keys, `Home`/`End`, typeahead, and `Enter`/`Space` to `@remix-run/ui/listbox`'s own `list()` primitive, and reports the shared context's selected value and active option as a typed event.

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

Turns a ListBox's option-list host into the ARIA listbox keyboard surface
by delegating to `@remix-run/ui/listbox`'s `list()` primitive. Use it inside an
ancestor `listbox.Context` alongside a matching `option()` mixin.

## Signature

```ts
listboxKeys(): MixinDescriptor<HTMLElement>
```

## Examples

```tsx
<listbox.Context value={value} activeValue={activeValue} onSelect={onSelect} onHighlight={onHighlight}>
  <div role="listbox" aria-label="Frameworks" mix={[listStyle, listboxKeys()]}>
    {frameworks.map((option) => (
      <div key={option.value} mix={[optionStyle, listbox.option(option)]}>{option.label}</div>
    ))}
  </div>
</listbox.Context>
```

## Used with it

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

### ListboxChangeEvent

Dispatched on a ListBox's option-list host by listboxKeys
whenever the shared context's selected value or active option moves, so
a consumer can react without reading that context directly.

#### Signature

```ts
new ListboxChangeEvent(init: { value: listbox.ListboxValue; activeValue: listbox.ListboxValue })
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `value` | `readonly listbox.ListboxValue` | Value the listbox currently reports as selected, or `null` when nothing is selected. |
| `activeValue` | `readonly listbox.ListboxValue` | Value of the option currently active for keyboard and pointer navigation, or `null` when none is active. |