NotivueKeyboard

import { NotivueKeyboard } from 'notivue'

Drop-in component to automatically enable keyboard navigation on Custom Components with more than two actions. Usage and Configuration.

Props

interface NotivueKeyboardProps {
  /**
   * Key to combine with Shift to enter or exit the stream.
   *
   * @default "n"
   */
  comboKey?: string
  /**
   * Whether to focus the next candidate (or exit the stream) after pressing
   * any button or link inside a notification.
   *
   * @default true
   */
  handleClicks?: boolean
  /**
   * Text to be announced when leaving the stream
   *
   * @default "You're leaving the notifications stream. Press CTRL + N to navigate it again."
   */
  leaveMessage?: string
  /**
   * Text to be announced when attempting to navigate the stream but no candidates are available.
   *
   * @default "No notifications to navigate"
   */
  emptyMessage?: string
  /**
   * Whether to render the enter/leave notification or just announce it via screen reader.
   *
   * @default true
   */
  renderAnnouncement?: boolean
  /**
   * Maximum times to announce that the user is leaving the stream.
   *
   * @default 3
   */
  maxAnnouncements?: number
}

Slot Props

Same values are retuned by the useNotivueKeyboard composable for convenience.

{
  /**
   * Reactive tab index value for the custom notification
   * focusable elements.
   *
   * Meant to be added to the focusable elements
   * via `:tabindex="elementsTabIndex"`.
   */
  elementsTabIndex: TabIndexValue
  /**
   * Reactive map of tab index values for the notification containers.
   *
   * Meant to be passed as prop to Notivue
   * via `:containersTabIndex="containersTabIndex"`.
   */
  containersTabIndex: ContainersTabIndexMap
}