[ @sdxc/ui/mixins ]
listboxKeys
Adapts @remix-run/ui/listbox's ARIA listbox keyboard pattern onto a ListBox's option-list host, delegating arrow keys, Home/End, typeahead.
import { listboxKeys } from "@sdxc/ui/mixins";Usage
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
listboxKeys(): MixinDescriptor<HTMLElement>Examples
<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.
Event
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.
new ListboxChangeEvent(init: { value: listbox.ListboxValue; activeValue: listbox.ListboxValue })| 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. |