Keyboard
Navigate the tour with ArrowRight, ArrowLeft, and Escape keys.
When keyboard control is enabled, Borda attaches a document-level keydown listener that maps arrow keys and Escape to tour navigation. Enabled by default.
Key bindings
| Key | Action |
|---|---|
ArrowRight | Next step |
ArrowLeft | Previous step |
Escape | Close the tour |
Config
Keyboard control is part of the tour config:
await borda.mount({
steps: [
{
target: '#element',
title: 'Title',
description: 'Use arrow keys to navigate.',
placement: 'bottom-center',
},
],
tour: {
hasKeyboardControl: true,
},
});
Disable keyboard navigation:
tour: {
hasKeyboardControl: false,
}
Events
Keyboard input emits dedicated events:
import { BordaEvent } from '@retoo/borda';
instance.api.events.on(BordaEvent.ON_KEYBOARD_NEXT, () => {
console.log('ArrowRight pressed');
});
instance.api.events.on(BordaEvent.ON_KEYBOARD_PREV, () => {
console.log('ArrowLeft pressed');
});
Notes
- Keypresses originating from form controls (
input,textarea,select,contenteditable) are ignored so the widget doesn't interfere with text input. - Keyboard listeners are automatically removed on unmount.