詳細ガイド
Angular Aria

ツールバー

概要

キーボードナビゲーションで関連するコントロールとアクションをグループ化するためのコンテナで、一般的にテキストフォーマット、ツールバー、コマンドパネルに使用されます。

使い方

Toolbarは、ユーザーが頻繁にアクセスする関連コントロールをグループ化するのに最適です。次のような場合にToolbarの使用を検討してください:

  • 複数の関連アクション - 関連する機能を持つコントロールが複数ある場合（テキストフォーマットボタンなど）
  • キーボードの効率が重要 - ユーザーが矢印キーによる素早いキーボードナビゲーションの恩恵を受ける場合
  • グループ化されたコントロール - コントロールをセパレーターで論理的なセクションに整理する必要がある場合
  • 頻繁なアクセス - ワークフロー内でコントロールが繰り返し使用される場合

次のような場合はToolbarの使用を避けてください:

  • 単純なボタングループで十分な場合 - 関連性のない2〜3個のアクションには、個別のボタンの方が適しています
  • コントロールが関連していない場合 - Toolbarは論理的なグループ化を意味するため、関連性のないコントロールはユーザーを混乱させます
  • 複雑なネストされたナビゲーション - 深い階層には、メニューやナビゲーションコンポーネントの方が適しています

機能

Angularのツールバーは、以下の機能を備えた完全にアクセシブルなツールバーの実装を提供します：

  • キーボードナビゲーション - 矢印キーでウィジェットを移動し、EnterキーまたはSpaceキーでアクティブ化します
  • スクリーンリーダーのサポート - 支援技術のための組み込みARIA属性
  • ウィジェットグループ - ラジオボタングループやトグルボタングループのような関連ウィジェットを整理します
  • 柔軟な向き - 自動キーボードナビゲーションを備えた水平または垂直レイアウト
  • シグナルベースのリアクティビティ - Angularシグナルを使用したリアクティブな状態管理
  • 双方向テキストのサポート - 右から左へ記述する言語（RTL）を自動的に処理します
  • 設定可能なフォーカス - ラップアラウンドナビゲーションまたは端でのハードストップを選択できます

例

基本的な水平ツールバー

水平ツールバーは、テキストエディターやデザインツールで一般的なパターンに合わせて、コントロールを左から右に整理します。矢印キーでウィジェット間を移動し、ユーザーがTabキーを押して次のページ要素に移動するまで、ツールバー内にフォーカスを維持します。

垂直ツールバー

垂直ツールバーは、コントロールを上から下に積み重ねるため、サイドパネルや垂直コマンドパレットに便利です。上下の矢印キーでウィジェット間を移動します。

ウィジェットグループ

ウィジェットグループには、テキストの配置オプションやリストの書式設定の選択肢など、連携して動作する関連コントロールが含まれています。グループは、ツールバーのナビゲーションに参加しながら、独自の内部状態を維持します。

上記の例では、配置ボタンはngToolbarWidgetGroupでラップされ、role="radiogroup"が設定されており、相互に排他的な選択グループを作成しています。

multi入力は、グループ内の複数のウィジェットを同時に選択できるかどうかを制御します:

<!-- Single selection (radio group) -->
<div ngToolbarWidgetGroup role="radiogroup" aria-label="Alignment">
  <button ngToolbarWidget value="left">Left</button>
  <button ngToolbarWidget value="center">Center</button>
  <button ngToolbarWidget value="right">Right</button>
</div>

<!-- Multiple selection (toggle group) -->
<div ngToolbarWidgetGroup [multi]="true" aria-label="Formatting">
  <button ngToolbarWidget value="bold">Bold</button>
  <button ngToolbarWidget value="italic">Italic</button>
  <button ngToolbarWidget value="underline">Underline</button>
</div>

無効化されたウィジェット

ツールバーは2つの無効化モードをサポートしています:

  1. ソフト無効化されたウィジェットはフォーカス可能ですが、視覚的には利用不可であることを示します
  2. ハード無効化されたウィジェットは、キーボードナビゲーションから完全に削除されます。

デフォルトでは、softDisabledはtrueであり、無効化されたウィジェットがフォーカスを受け取ることができます。ハード無効化モードを有効にしたい場合は、ツールバーで[softDisabled]="false"を設定します。

右から左 (RTL) のサポート

ツールバーは、右から左に記述する言語を自動的にサポートします。ツールバーをdir="rtl"を持つコンテナでラップすると、レイアウトとキーボードナビゲーションの方向が逆になります。矢印キーのナビゲーションは自動的に調整され、左矢印キーは次のウィジェットに、右矢印キーは前のウィジェットに移動します。

API

Toolbarディレクティブ

ngToolbarディレクティブは、ツールバー機能のコンテナを提供します。

入力

プロパティ 型 デフォルト 説明
orientation 'vertical' | 'horizontal' 'horizontal' ツールバーが垂直方向か水平方向か
disabled boolean false ツールバー全体を無効にします
softDisabled boolean true 無効化された項目がフォーカスを受け取れるかどうか
wrap boolean true フォーカスが端で折り返すかどうか

ToolbarWidgetディレクティブ

ngToolbarWidgetディレクティブは、要素をツールバー内のナビゲート可能なウィジェットとしてマークします。

入力

プロパティ 型 デフォルト 説明
id string auto ウィジェットの一意の識別子
disabled boolean false ウィジェットを無効にします
value V - ウィジェットに関連付けられた値（必須）

シグナル

プロパティ 型 説明
active Signal<boolean> ウィジェットが現在フォーカスされているかどうか
selected Signal<boolean> ウィジェットが（グループ内で）選択されているかどうか

ToolbarWidgetGroupディレクティブ

ngToolbarWidgetGroupディレクティブは、関連するウィジェットをグループ化します。

入力

プロパティ 型 デフォルト 説明
disabled boolean false グループ内のすべてのウィジェットを無効にします
multi boolean false 複数のウィジェットを選択できるかどうか

ツールバーには、ボタン、ツリー、コンボボックスなど、さまざまなウィジェットタイプを含めることができます。特定のウィジェットの実装については、個々のコンポーネントのドキュメントを参照してください。