# activeDescendantKeys

> The combobox keyboard pattern over options a server rendered: arrows choose a row of the listbox the host's `aria-controls` names while focus stays in the host, and Enter follows it.

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

Moves the choice through the controlled options: Down from the host to the first and around
from the last, Up back toward the host. Enter follows the chosen option, or the only option
when none is chosen and the listbox sits in no `aria-busy` region, so stale rows never open.

## Signature

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

## Examples

```tsx
<input role="combobox" aria-controls="search-options" mix={[activeDescendantKeys()]} />
```

## Used with it

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

### chosenOption

The index of the option `combobox` has chosen, or `-1` while the combobox itself is the
choice. The choice lives in `aria-activedescendant`, so it reads the same to every caller.

#### Signature

```ts
chosenOption(combobox: HTMLElement): number
```

Returns: The chosen option's index among the controlled listbox's options.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `combobox` | `HTMLElement` | The element carrying `aria-controls` and `aria-activedescendant`. |

### chooseOption

Chooses the option at `index`, or none for `-1`, marking it `aria-selected` and scrolling it
into view. Call it after replacing the options, since a new list starts with whatever
choice its markup carries.

#### Signature

```ts
chooseOption(combobox: HTMLElement, index: number): void
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `combobox` | `HTMLElement` | The element carrying `aria-controls`. |
| `index` | `number` | The option to choose, or `-1` to choose none. |