` gets none of that.
When you build a custom widget, you must add it back yourself:
- **`tabindex="0"`** to put a non-interactive element into the natural tab order.
- **`tabindex="-1"`** to make an element focusable only by script (useful for moving focus after a dialog opens).
- **Never use positive `tabindex`** — it overrides DOM order and creates surprises.
- **Key handlers** for the keys the role implies (Space and Enter on a button, arrows on a tab list, Escape on a dialog).
- **A visible focus style** so the user can see where they are.
Manage focus on view changes. When a dialog opens, move focus into it and trap it inside until it closes; then return focus to the element that opened it. Single-page navigations should move focus to the main heading of the new view.
## Common mistakes
- Click handlers attached to `
` or `` with no role, tabindex, or key handlers.
- Modal dialogs that let Tab leak to the page underneath.
- Custom dropdowns that open on click but cannot be opened or operated from the keyboard.
- Positive `tabindex` values used to "fix" focus order, which then desynchronises with the visual layout.
- Hover-only menus that never receive focus.
## Verification
- Unplug the mouse. Walk through every interactive feature.
- Check that the focus order matches the visual reading order.
- Open every dialog, menu, and dropdown — press Escape and Tab to confirm focus is managed and never trapped.