Overview

Borda is accessible out of the box: every interactive element is keyboard-operable, exposes ARIA roles and attributes, and keeps a visible focus indicator. No extra configuration is required.

Keyboard navigation

Keyboard control is enabled by default. Disable it with tour.hasKeyboardControl: false.

await borda.mount({
  steps: [...],
  tour: {
    hasKeyboardControl: false,
  },
});

Focus management

When the tour mounts, focus moves to the first interactive element within the tooltip. The focus trap keeps tab navigation within the active tooltip, overlay close button, and skip checkbox — users cannot tab to elements behind the overlay.

When the tour closes or finishes, focus returns to the previously focused element.

ARIA attributes

Every interactive component exposes ARIA roles and attributes:

Every component accepts an aria prop to override or extend its attributes:

await borda.mount({
  steps: [
    {
      target: '#element',
      title: 'Title',
      description: 'Description',
      placement: 'bottom-center',
    },
  ],
  tourTooltip: {
    aria: {
      ariaLabel: 'Product tour tooltip',
    },
  },
  closeButton: {
    aria: {
      ariaLabel: 'Dismiss tour',
    },
  },
});

The available attributes are defined by ComponentAriaProps:

interface ComponentAriaProps {
  ariaLabel?: string;
  ariaLabelledby?: string;
  ariaDescribedby?: string;
  ariaDisabled?: boolean;
  ariaExpanded?: boolean;
  ariaControls?: string;
  ariaPressed?: ComponentAriaPressed;
  ariaHaspopup?: ComponentAriaHaspopup;
}

See the component pages for the aria shape each component accepts.