Accessibility

Keyboard Navigation

For section-action buttons, choose between tab order and toolbar behavior.

<FabButton
  keyboardNavigation="toolbar"
  keyboardOrientation="horizontal"
  loopNavigation
  sections={[
    { key: "copy", content: "Copy", onClick: () => {} },
    { key: "share", content: "Share", onClick: () => {} },
    { key: "save", content: "Save", onClick: () => {} }
  ]}
/>

• keyboardNavigation="tab": default tab order
• keyboardNavigation="toolbar": one tab stop + arrow navigation (Home/End included)
• keyboardOrientation: horizontal, vertical, or both
• loopNavigation: wraps focus last/first (default true)

Keyboard Shortcuts

Use shortcut or shortcutId per section.

<FabButton
  keyboardNavigation="toolbar"
  sections={[
    { key: "copy", shortcut: "1", content: "Copy", onClick: () => {} },
    { key: "share", shortcutId: [16, 95], content: "Share", onClick: () => {} },
    { key: "save", shortcutId: 17, content: "Save", onClick: () => {} }
  ]}
/>

Rule of thumb:

• shortcut: key-based tokens ("1", "c", "code:Digit1", "key:Enter")
• shortcutId: keyboard-map ID tokens (16, [16, 95])

Action Analytics Hook

Track action source metadata with onSectionAction.

<FabButton
  keyboardNavigation="toolbar"
  sections={[
    { key: "copy", shortcut: "1", content: "Copy", onClick: () => {} },
    { key: "share", shortcutId: 16, content: "Share", onClick: () => {} },
    { key: "save", content: "Save", onClick: () => {} }
  ]}
  onSectionAction={(meta) => {
    console.log(meta.key, meta.index, meta.source)
  }}
/>

meta.source values:

• click
• shortcut
• keyboard-nav

Web Component Event

<fab-button id="analytics-button" keyboard-navigation="toolbar">
  <button data-section="copy" data-shortcut="1">Copy</button>
  <button data-section="share" data-shortcut-id="16">Share</button>
</fab-button>
<script>
  const button = document.getElementById("analytics-button")
  button?.addEventListener("section-action", (event) => {
    console.log(event.detail)
  })
</script>

Full Shortcut Maps

FabButton exports both maps:

import {
  FAB_BUTTON_SHORTCUT_ID_TO_CODE,
  FAB_BUTTON_SHORTCUT_CODE_TO_ID
} from "@rezafab/fab-button"

Use this to generate all IDs (1-149) dynamically for your own docs or tooling.