Toolbar
fandhe-frontend-pre-styled-ui の toolbar mod が提供するスタイル済み Toolbar 部品です。
ボタン・リンク・セパレータ・ToggleGroup を横方向（または縦方向）にグループ化する操作バーです。role="toolbar" + aria-orientation を持つグループ化コンテナと、roving tabindex（フォーカスが常に 1 項目のみに当たる状態）の状態機械を提供します。押下状態の管理は独自実装せず、既存の Toggle Group の状態機械（ToggleGroup/MultiToggleGroup）をそのまま再利用します。矢印キーによる実際のフォーカス移動（DOM 配線）はクライアントランタイム（fandhe-frontend-wasm-full）側の後続実装です。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
headless-ui の Toolbar（role="toolbar"）に pre-styled-ui の recipe CSS を適用した静的掲示です。Button / Separator / ToggleGroup（既存の ToggleGroup 状態機械を再利用）/ Link の 6 パーツすべてを 1 つの Toolbar 内に組み合わせています。roving tabindex（focused=0）により先頭の Undo ボタンのみ tabindex="0" です。
Features
- ボタン・リンク・セパレータ・ToggleGroup を横方向（または縦方向）にグループ化する操作バー。Root / Button / Link / Separator / ToggleGroup / ToggleItem の 6 anatomy パーツを持つ。
- roving tabindex（focused/item_count/loop_focus/orientation の複合状態機械 Toolbar）。フォーカス対象の項目のみ tabindex="0"、それ以外は tabindex="-1" になる。
- disabled 項目もフォーカス順序から除外しない（WAI-ARIA APG の toolbar パターン推奨に従う意図的な設計。aria-disabled/data-disabled で操作不能のみを表す）。
- 押下状態の管理は独自実装せず、既存の ToggleGroup/MultiToggleGroup 状態機械を再利用する。
- separator は toolbar 自身の向きと直交する aria-orientation を出力する（横向き toolbar のセパレータは縦線になる）。
- link は既存の Link コンポーネントへ完全委譲し、external 時の target="_blank"/rel="noopener noreferrer" を不可分に付与する。
Anatomy
root
button
separator
toggle-group
toggle-item
linkAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | Orientation | Orientation::Horizontal | root の role="toolbar" に付与する向き（Horizontal/Vertical）。aria-orientation/data-orientation の両方へ反映される。 |
| label | &str | root に付与する aria-label（空文字列のときは省略）。 | |
| focused | bool | button/link/toggle-item に付与。true のとき tabindex="0"、false のとき tabindex="-1"（roving tabindex）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| root | data-orientation | horizontal |
| toggle-item | data-state | off |
| toggle-item | data-value | bold, italic |
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| role="toolbar" / aria-orientation | root に付与。orientation 引数の値（horizontal/vertical）を反映する。 |
| role="separator" / aria-orientation | separator に付与。toolbar 自身の向きと直交する値になる。 |
| role="group" | toggle-group に付与（aria-orientation は role="group" に許可されないため付与しない）。 |
| aria-pressed | toggle-item に付与。押下状態（true/false）を表す。 |
| aria-disabled | disabled な button/toggle-item に付与。ネイティブ disabled は付与せずフォーカス順序に残す。 |