Accessibility

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

Icon-Only Floating Trigger

When floatingMenuLabel is an icon or symbol, provide an accessible name with floatingMenuAriaLabel.

<FabButton
  floating
  floatingShape="circle"
  floatingMenuLabel={<i className="fa-solid fa-plus" aria-hidden="true" />}
  floatingMenuAriaLabel="Actions"
  sections={sections}
/>

For Web Component usage, use the standard aria-label attribute.

<fab-button floating floating-shape="circle" aria-label="Actions">
  <button data-section="compose">Compose</button>
  <button data-section="upload">Upload</button>
</fab-button>

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"