コンテンツにスキップ
Hypermedia Components

ツールバー

hc-toolbar は、関連するコントロールを横にまとめるレイアウト プリミティブです。子のスタイリングには関与しません — ツールバー内の ボタンや入力欄は普段の見た目を保ちます。

別名: アクションバー。

基本の HTML

Section titled “基本の HTML”

構造

Section titled “構造”
  • 子要素 — 通常はボタンですが、フォーカス可能なコントロールなら 何でも機能します。
  • セパレータ — 素の <hr aria-orientation="vertical"> が 1px の 縦の区切り線を描きます。ツールバー内の <hr> はツールバー自身が スタイルするため、hc-separator クラスは不要です(明示的な role="separator" も不要 — <hr> の暗黙のロールです)。純粋に 視覚的なもので、ツールバーにセパレータは必須ではありません。
  • スペーサー — <span data-hc-spacer="true"></span> が伸びて、 後続の子を端へ押しやります(右端の保存ボタンなど)。汎用の .hc-spacer ユーティリティのツールバースコープ版です(任意の flex 行で使える同じ発想 — シェルを参照)。

JavaScript

Section titled “JavaScript”

ロービングタブインデックスのキーボード挙動には installToolbar() が 必要です — ないと矢印キーは何もせず、ツールバーはネイティブの Tab 順にフォールバックします。起動時に一度インストールしてください:

import { installToolbar } from '@hypermedia-components/core';
installToolbar(); // idempotent; returns an uninstaller

ゼロ設定の @hypermedia-components/core/behaviors エントリは自動で インストールし、htmx でスワップされた内容も自動で拾います。

キーボードナビゲーション

Section titled “キーボードナビゲーション”

installToolbar() は、すべての .hc-toolbar[role="toolbar"] を WAI-ARIA APG のツールバーパターンへ 昇格させます: ツールバー全体が単一の Tab ストップになり、矢印キーが コントロール間でフォーカスを動かします。素の .hc-toolbar レイアウト クラス(role="toolbar" なし)はネイティブのフォーカス順を保ち、 手を付けられません。

キー動作
Tab / Shift+Tab1 つのストップとしてツールバーへ入る / 出る。フォーカスは最後に使ったコントロールへ戻ります。
→ / ←前 / 次のコントロール(水平ツールバー)。両端でラップし、RTL ではミラー。
↓ / ↑aria-orientation="vertical" のときの前 / 次のコントロール。
Home / End最初 / 最後のコントロール。

無効なコントロール(disabled または aria-disabled="true")は スキップされます。ナビゲーションはフォーカスを動かすだけです — ボタンはネイティブの Space / Enter による起動を 保ちます。

<!-- Vertical toolbar: arrows become ↑ / ↓ -->
<div class="hc-toolbar" role="toolbar" aria-orientation="vertical"
     aria-label="Drawing tools">
  <button class="hc-button" type="button" data-variant="ghost">Pen</button>
  <button class="hc-button" type="button" data-variant="ghost">Brush</button>
  <button class="hc-button" type="button" data-variant="ghost">Eraser</button>
</div>

ツールバー内のテキストフィールドは、軸方向の矢印を自身のキャレットの ために保持します。それを飛び越えてツールバーの両端へ行くには Home / End を使ってください。

アクセシビリティ

Section titled “アクセシビリティ”
  • ラッパーに role="toolbar" を適用し、ツールバーが制御する対象を 説明する aria-label を必ず含めてください("Editor toolbar"、"Filter actions")。
  • ビヘイビアがインストールされていれば、ツールバーは上の APG ロービングタブインデックスパターンに従います。JavaScript なしでは コントロールはネイティブの左から右(または上から下)のフォーカス順に 留まります — すべてのコントロールは、個別の Tab ストップとして依然 到達可能です。
  • ツールバー内のボタンは依然として標準のボタンです。明確なラベル (トグルボタンには aria-pressed="true")を使ってください。

テーマ用トークン

Section titled “テーマ用トークン”
トークンパス用途
toolbar.gap子要素間のギャップ。
toolbar.padding-x / -y内側のパディング。
toolbar.bg / -border / -radius面のスタイリング。
toolbar.separatorセパレータの色。

CSS 変数

Section titled “CSS 変数”
生成される CSS 変数を表示
--hc-toolbar-gap
--hc-toolbar-padding-x | -padding-y
--hc-toolbar-bg | -border | -radius
--hc-toolbar-separator

関連

Section titled “関連”