# Keyboard navigation

> Moving focus among the items of a control with the arrow keys, in any layout and reading direction.

Keyboard navigation moves focus among the items of a composite control — a list,
a toolbar, a grid — with the arrow keys. Tab moves between controls; the arrow
keys move within one.

## Best practices

**Make each composite control a single Tab stop.** Tab enters the control and
Tab leaves it, however many items it holds. On entry, focus goes to the item that
was last focused, or else to the first selected item, or else to the first item.

**Follow the axis the items are laid out on.** Up and Down move through a
vertical arrangement; Left and Right through a horizontal one. Keys along the
other axis are left for other uses.

**Mirror horizontal movement in right-to-left text.** Where text reads right to
left, the next item is to the left, and Left Arrow moves to it.

**Provide Home and End** to reach the first and last items directly.

**Stop at the ends of a list; consider wrapping in a short cyclic set.** Stopping
tells people they have reached the end of a list. In a menu or a small toolbar,
moving from the last item to the first saves a key press and loses nothing.

**Pass over items that cannot be used.** Disabled items are skipped, so every
stop is one where something can happen.

**Keep the focused item in view.** When focus moves to an item outside the
visible region, scroll by the least amount that reveals it.

## Behaviour

Each statement is verified by a test in Chromium, Chromium (touch), Firefox, WebKit, WebKit (touch), unless it names the environments it applies to or is marked open.

### Keys

- A vertical axis answers ArrowUp and ArrowDown and ignores ArrowLeft and ArrowRight.
- A horizontal axis answers ArrowLeft and ArrowRight, mirrored right-to-left.
- Home and End go to the ends on either axis.

### Steps

- `next` and `previous` move by one.
- Without `loop`, a step past either end stays at the end.
- With `loop`, a step past either end comes round to the other.
- From nowhere, `next` lands first and `previous` lands last.
- An empty set has nowhere to land.

### Pages

- A page lands on the farthest item that a view starting at the current one holds whole.
- A page moves at least one item on, however long that item is.
- A page stops at either end.
- From no item, a page onward lands first and a page back lands last.
- Items may be measured in any frame, such as one that runs right to left.
- Among ten thousand items, a page measures only the items it passes.

## Reference implementation

React: `npx shadcn@latest add https://ui.publictheta.com/r/navigation.json`