TextFormatToolbar

Usage

import { TextFormatToolbar, type TextFormatCommand } from '@epasslive/design-system'

// Full compact set over a contentEditable surface
<TextFormatToolbar
  controls={editorSurfaceId}
  onCommand={(cmd: TextFormatCommand) => exec(cmd)}
/>

// Reduced comment-style set
<TextFormatToolbar
  commands={['bold', 'italic', 'link']}
  controls={commentSurfaceId}
  onCommand={exec}
/>

Pair with RichTextEditor for contentEditable surfaces — it composes this molecule and forwards its commands prop. The controls prop must match the editable surface’s id so aria-controls wiring is correct.

Commands

The 14 TextFormatCommand keys: bold, italic, underline, strikethrough, h1, h2, h3, ul, ol, link, quote, code, undo, redo. The default commands set includes all of them except undo and redo — both are valid commands but are excluded from the default compact set; pass them explicitly in a commands array to show them.

Accessibility

• Root is role="toolbar" named via ariaLabel (default "Formatting toolbar"); every button carries its own aria-label (e.g. "Bold", "Heading 1").
• controls wires aria-controls to the editable surface — pass the same id the surface renders with.
• onMouseDown is preventDefault()-ed on each button so activation never steals focus — the caret stays in the editable surface.
• Keyboard navigation follows the WAI-ARIA toolbar pattern via roving tabindex: initial focus goes to the first enabled button (tabIndex 0, all others -1).ArrowRight/ArrowLeft move focus among the enabled buttons with wrap-around, Home/End jump to the first/last button, and disabled buttons are skipped by the traversal.
• Target size: the visual button stays 32×32px (h-8 w-8) but the hit rectangle grows to the 44px --ep-tap-min floor via min-h/min-w utilities plus an inline-style belt-and-braces (the CopyButton pattern) — WCAG 2.5.8 (24px) and the 2.5.5 guideline (44px) are both satisfied.
• For generic toolbar-region guidance (role, naming, landmark behavior), see TableToolbar.

Internationalization

Per-command accessible names are catalog-backed: the design-system i18n/en.json and i18n/fr.json both define all 14 keys under textFormatToolbar.commands (plus textFormatToolbar.label for the toolbar name). The labels prop is the override mechanism — pass localized strings (e.g. from next-intl) per command and any key you don’t override falls back to its English default, e.g. labels={{ bold: "Gras", link: "Insérer un lien" }}. RichTextEditor wires this for you: give it locale ("en" | "fr") and toolbarLabel and it passes the toolbar name through as the toolbar’s ariaLabel.