ツールバー
stimeo--toolbar
単一のタブストップとして、矢印キーで移動できるコントロール群。
stimeo--toolbar コントローラは、WAI-ARIA の Toolbar パターンを実装する。ロービングタブインデックス(アクティブのみ tabindex=0、他は -1)でグループを単一のタブストップに保ち、矢印キーでコントロール間のフォーカスを移す。横向きは ArrowRight/ArrowLeft、縦向きは ArrowUp/ArrowDown、Home/End で先頭/末尾へ移動する。wrap=true なら端でループ、wrap=false なら端で停止する。外からフォーカスが戻ったときは直近のアクティブコントロールへ復帰する。各コントロールの機能(押下・トグル・メニュー開閉)は各要素の責務で、ここでは消費側の小さなスクリプトが aria-pressed をトグルする。ライブラリは振る舞いのみを提供する。
キーボード操作
| キー | 動作 |
|---|---|
| → / ← | 次/前のコントロールへ(横向き)。 |
| ↓ / ↑ | 次/前のコントロールへ(縦向き)。 |
| Home / End | 先頭/末尾のコントロールへ。 |
<%# Markup for the toolbar demo.
Focusable controls are laid out in a role="toolbar" + aria-label container. The
library handles roving tabindex (only the active one is tabindex=0) and focus movement
via arrows / Home / End. Pressing/toggling each button is each element's responsibility. %>
<div
class="toolbar"
data-controller="stimeo--toolbar"
role="toolbar"
aria-label="<%= t("components.toolbar.demo.label") %>"
data-stimeo--toolbar-orientation-value="horizontal">
<button
type="button"
class="toolbar__button"
aria-pressed="false"
tabindex="0"
data-stimeo--toolbar-target="control"
data-action="keydown->stimeo--toolbar#onKeydown">
<%= t("components.toolbar.demo.bold") %>
</button>
<button
type="button"
class="toolbar__button"
aria-pressed="false"
tabindex="-1"
data-stimeo--toolbar-target="control"
data-action="keydown->stimeo--toolbar#onKeydown">
<%= t("components.toolbar.demo.italic") %>
</button>
<button
type="button"
class="toolbar__button"
aria-pressed="false"
tabindex="-1"
data-stimeo--toolbar-target="control"
data-action="keydown->stimeo--toolbar#onKeydown">
<%= t("components.toolbar.demo.underline") %>
</button>
<span class="toolbar__separator" role="separator" aria-orientation="vertical"></span>
<button
type="button"
class="toolbar__button"
tabindex="-1"
data-stimeo--toolbar-target="control"
data-action="keydown->stimeo--toolbar#onKeydown">
<%= t("components.toolbar.demo.link") %>
</button>
</div>
/*
* Presentation-only styles for the toolbar demo.
* The library toggles the controls' tabindex (active=0 / others=-1). The pressed-state
* look is built by reacting to each button's aria-pressed.
*/
.toolbar {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.3rem;
border: 1px solid var(--border-strong);
border-radius: 0.5rem;
background: var(--surface, var(--surface-card));
}
.toolbar__button {
min-width: 2.25rem;
padding: 0.35rem 0.6rem;
border: 1px solid transparent;
border-radius: 0.375rem;
background: none;
color: var(--fg, var(--color-text));
font: inherit;
cursor: pointer;
}
.toolbar__button:hover {
background: var(--surface-subtle);
}
.toolbar__button:focus-visible {
outline: 2px solid var(--accent, var(--color-primary));
outline-offset: 1px;
}
.toolbar__button[aria-pressed="true"] {
border-color: var(--accent, var(--color-primary));
background: var(--vital-100);
color: var(--accent, var(--color-primary));
font-weight: 600;
}
.toolbar__separator {
width: 1px;
align-self: stretch;
margin: 0.15rem 0.25rem;
background: var(--surface-subtle);
}
// Demo of each toolbar control's function (consumer-side JS).
//
// The core controller (stimeo--toolbar) only handles roving tabindex and arrow-key
// focus movement; what each button does (here, toggling aria-pressed) is the consumer's
// job. This shows the toolbar's "single tab stop + arrow movement" coexisting
// independently with each button's pressed state.
document.querySelectorAll('[data-controller~="stimeo--toolbar"]').forEach((toolbar) => {
toolbar.querySelectorAll('[aria-pressed]').forEach((button) => {
button.addEventListener('click', () => {
const pressed = button.getAttribute('aria-pressed') === 'true';
button.setAttribute('aria-pressed', pressed ? 'false' : 'true');
});
});
});
これらのスタイルは共通のデザイントークン(ライト/ダーク両対応)を使います。 共通スタイルも一緒にコピーし、ルート要素の data-theme を切り替えればダークになります。
このコンポーネントを動かすために HTML へ記述する data-* 属性です。ルート要素に下の data-controller を付け、その内側に各 target / value / action を配置します。
ルート要素に付与
data-controller="stimeo--toolbar"
ターゲット
| 名前 | 説明 | 属性 |
|---|---|---|
control
必須
|
ツールバーのコントロール。矢印キーのロービングで一つの Tab ストップを形成する。 | data-stimeo--toolbar-target="control" |
値(Values)
| 名前 | 説明 | 属性 |
|---|---|---|
orientation
|
矢印キーの軸。horizontal または vertical。既定値は horizontal。 |
data-stimeo--toolbar-orientation-value |
wrap
|
矢印移動が端を越えて循環するか。既定値は true。 | data-stimeo--toolbar-wrap-value |
アクション
| 名前 | 説明 | アクション |
|---|---|---|
onKeydown
|
矢印キー(向きに応じて)と Home/End でフォーカスと単一の Tab ストップを移動する。 | stimeo--toolbar#onKeydown |
状態フック
ライブラリが操作するのはこれらの ARIA / data 属性、カスタムプロパティだけです。見た目は利用側 CSS がこれらに反応して作ります([aria-selected] / [aria-expanded] / var(--stimeo--…) などのセレクタでフックします)。
| フック | 対象 | 意味 |
|---|---|---|
tabindex |
コントロール | アクティブは 0、他は -1(単一タブストップ)。 |