Keyboard & screen readers

The tooltip is a labelled dialog with a focus trap. The rest of the page is inert, keys work as expected, and every step is announced. Buttons are at least 44px.

Keys

→: Next step
←: Previous step
Esc: Skip the tour
Tab: Move between tooltip buttons (and the target on interactive steps)

Focus and inert

While a step shows, everything outside the tour is inert. On interactive steps the target stays reachable.

What a screen reader hears

Start the tour to see the announcements.

Accessibility and labels

// Built in, nothing to configure:
// - role="dialog" with aria-labelledby / aria-describedby
// - focus moves to "Next" and is trapped in the tooltip
// - the page behind is inert (the target stays usable on interactive steps)
// - ArrowRight / ArrowLeft move, Escape skips, focus returns to the trigger
// - a polite live region announces "Step 2 of 4: Search"

<SpotlightProvider
  escToDismiss={true}
  labels={{ next: 'Weiter', previous: 'Zurück', skip: 'Überspringen', done: 'Fertig',
            stepOf: (n, total) => `Schritt ${n} von ${total}` }}
>