詳細ガイド
Angular Aria

セレクト

概要

読み取り専用コンボボックスとリストボックスを組み合わせて、キーボードナビゲーションとスクリーンリーダーをサポートする単一選択ドロップダウンを作成するパターンです。

使い方

selectパターンは、ユーザーがよく知られた選択肢のセットから単一の値を選択する必要がある場合に最適です。

次のような場合にこのパターンの使用を検討してください：

  • 選択肢のリストが固定されている場合（20項目未満）- ユーザーはフィルタリングなしで一覧して選択できます
  • 選択肢がよく知られている場合 - ユーザーは検索しなくても選択肢を認識できます
  • フォームに標準的なフィールドが必要な場合 - 国、州、カテゴリー、またはステータスの選択
  • 設定と構成 - 設定やオプションのためのドロップダウンメニュー
  • 選択肢のラベルが明確な場合 - 各選択肢に、識別しやすく一覧できる名前が付いている

次のような場合はこのパターンを避けてください：

  • リストに20項目以上ある場合 - より良いフィルタリングのためにAutocompleteパターンを使用してください
  • ユーザーが選択肢を検索する必要がある場合 - Autocompleteはテキスト入力とフィルタリングを提供します
  • 複数選択が必要な場合 - 代わりにMultiselectパターンを使用してください
  • 選択肢が非常に少ない場合（2〜3個） - ラジオボタンはすべての選択肢の可視性を高めます

機能

selectパターンは、ComboboxとListboxディレクティブを組み合わせて、以下の機能を備えた完全にアクセシブルなドロップダウンを提供します:

  • キーボードナビゲーション - 矢印キーでオプションを移動し、Enterで選択、Escapeで閉じます
  • スクリーンリーダーのサポート - 支援技術のための組み込みARIA属性
  • カスタム表示 - 選択された値をアイコン、フォーマット、またはリッチコンテンツで表示します
  • シグナルベースのリアクティビティ - Angularシグナルを使用したリアクティブな状態管理
  • スマートな配置 - CDK Overlayがビューポートの端やスクロールを処理します
  • 双方向テキストのサポート - 右から左へ記述する言語 (RTL) を自動的に処理します

例

基本的なセレクト

ユーザーは、値のリストから選択するために標準的なドロップダウンを必要とします。読み取り専用のコンボボックスとリストボックスを組み合わせることで、完全なアクセシビリティサポートを備えた、使い慣れたセレクト体験を提供します。

ngComboboxディレクティブを<input>ではなく、divやbuttonのような非インタラクティブなホスト要素に直接適用することで、テキスト入力を防ぎます。ユーザーは、ネイティブのselect要素と同じように、矢印キーとEnterキーを使用してドロップダウンを操作します。

カスタム表示のセレクト

オプションには、ユーザーが選択肢をすばやく識別できるように、アイコンやバッジなどの視覚的なインジケーターが必要になることがよくあります。オプション内のカスタムテンプレートを使用すると、アクセシビリティを維持しながらリッチなフォーマットが可能になります。

各オプションには、ラベルの横にアイコンが表示されます。選択された値は、選択されたオプションのアイコンとテキストを表示するように更新され、明確な視覚的フィードバックを提供します。

無効化されたセレクト

特定のフォーム条件が満たされていない場合にユーザーの操作を防ぐために、セレクトを無効にできます。無効状態は、視覚的なフィードバックを提供し、キーボード操作を防ぎます。

無効にすると、セレクトは無効の視覚的状態を示し、すべてのユーザー操作をブロックします。スクリーンリーダーは、支援技術のユーザーに無効状態をアナウンスします。

Testing

The select pattern can be tested using a combination of ComboboxHarness and ListboxHarness from @angular/aria/combobox/testing and @angular/aria/listbox/testing. Here is an example of how to use the harnesses to test a select component:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {ComboboxHarness} from '@angular/aria/combobox/testing';
import {ListboxHarness} from '@angular/aria/listbox/testing';
import {MySelectComponent} from './my-select'; // Your component

describe('MySelectComponent', () => {
  let fixture: ComponentFixture<MySelectComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [MySelectComponent],
    });

    fixture = TestBed.createComponent(MySelectComponent);
    await fixture.whenStable();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should allow selecting an option', async () => {
    // Load the combobox harness (which acts as the select trigger)
    const select = await loader.getHarness(ComboboxHarness);

    // Verify it is closed initially
    expect(await select.isOpen()).toBe(false);

    // Open the dropdown
    await select.open();
    expect(await select.isOpen()).toBe(true);

    // Get the listbox harness from the popup
    const listbox = await select.getPopupWidget(ListboxHarness);
    const options = await listbox.getOptions();
    expect(options.length).toBe(3);

    // Click the second option
    await options[1].click();

    // Verify the dropdown closed and the value updated
    expect(await select.isOpen()).toBe(false);
    expect(await (await select.host()).text()).toContain('Option 2');
  });
});

API

selectパターンは、AngularのAriaライブラリから以下のディレクティブを使用します。詳細なAPIドキュメントについては、リンク先のガイドを参照してください。

コンボボックスディレクティブ

selectパターンは、キーボードナビゲーションを維持しつつテキスト入力を防ぐために、ngComboboxをdivやbuttonのような非インタラクティブなホスト要素に直接適用します。

入力

プロパティ 型 デフォルト 説明
disabled boolean false select全体を無効にします
expanded ModelSignal<boolean> false selectの展開状態

利用可能なすべての入力とシグナルの詳細については、コンボボックスAPIドキュメントを参照してください。

The structural ngComboboxPopup directive marks the overlay template and requires a reference to the parent combobox:

Property Type Description
combobox Combobox Required reference to the parent Combobox

ComboboxWidget Directive

The ngComboboxWidget directive bridges the listbox with the combobox trigger to support active-descendant focus tracking.

Property Type Description
activeDescendant string | undefined The ID of the currently active option (bound to listbox.activeDescendant()) to update the aria-activedescendant attribute on the trigger

リストボックスディレクティブ

selectパターンは、ドロップダウンリストにngListboxを、選択可能な各項目にngOptionを使用します。

Inputs

Property Type Default Description
selectionMode 'follow' | 'explicit' 'explicit' Set to 'explicit' so options are toggled explicitly via click/Enter instead of following active focus
focusMode 'roving' | 'activedescendant' 'roving' The focus strategy used by the listbox. Set to 'activedescendant' so browser focus remains on the combobox trigger.
tabIndex number 0 The tabindex of the listbox. Set to -1 to prevent keyboard focus from entering the popup container in active-descendant mode.

モデル

プロパティ 型 説明
value ModelSignal<any[]> 選択された値の双方向バインディング可能な配列（selectの場合は単一の値を含む）

ポジショニング

selectパターンは、スマートなポジショニングのためにCDK Overlayと統合されています。ビューポートの端やスクロールを自動的に処理するにはcdkConnectedOverlayを使用してください。