詳細ガイド
Angular Aria

アコーディオン

概要

アコーディオンは、関連するコンテンツを展開・折りたたみ可能なセクションに整理し、ページのスクロールを減らし、ユーザーが関連情報に集中するのを助けます。各セクションには、トリガーボタンとコンテンツパネルがあります。トリガーをクリックすると、関連するパネルの表示/非表示が切り替わります。

使い方

アコーディオンは、ユーザーが通常一度に1つのセクションを表示する必要がある場合に、コンテンツを論理的なグループに整理するのに適しています。

アコーディオンを使用する場合:

  • 複数の質問と回答を持つFAQを表示する
  • 長いフォームを管理しやすいセクションに整理する
  • コンテンツの多いページでのスクロールを減らす
  • 関連情報を段階的に開示する

アコーディオンを避けるべき場合:

  • ナビゲーションメニューを構築する（代わりにMenuコンポーネントを使用してください）
  • タブ付きインターフェースを作成する（代わりにTabsコンポーネントを使用してください）
  • 単一の折りたたみ可能なセクションを表示する（代わりにdisclosureパターンを使用してください）
  • ユーザーが複数のセクションを同時に見る必要がある（異なるレイアウトを検討してください）

機能

  • 展開モード - 一度に1つまたは複数のパネルを開けるかどうかを制御します
  • キーボードナビゲーション - 矢印キー、Home、Endを使用してトリガー間を移動します
  • 遅延レンダリング - コンテンツはパネルが最初に展開されたときにのみ作成され、初期読み込みのパフォーマンスを向上させます
  • 無効状態 - グループ全体または個々のトリガーを無効にします
  • フォーカス管理 - 無効化されたアイテムがキーボードフォーカスを受け取れるかどうかを制御します
  • プログラムによる制御 - コンポーネントのコードからパネルを展開、折りたたみ、または切り替えます
  • RTLサポート - 右から左へ記述する言語を自動的にサポートします

例

単一展開モード

[multiExpandable]="false"を設定すると、一度に開けるパネルが1つだけになります。新しいパネルを開くと、以前に開いていたパネルは自動的に閉じます。

このモードは、FAQや、ユーザーに一度に1つの回答に集中してもらいたい場合に適しています。

複数展開モード

[multiExpandable]="true"を設定すると、複数のパネルを同時に開くことができます。ユーザーは他のパネルを閉じることなく、必要なだけパネルを展開できます。

このモードは、フォームのセクションや、ユーザーが複数のパネルにわたるコンテンツを比較する必要がある場合に便利です。

NOTE: multiExpandable入力はデフォルトでtrueです。単一展開の動作が必要な場合は、明示的にfalseに設定してください。

無効化されたアコーディオンアイテム

disabled入力を使用して特定のトリガーを無効にします。アコーディオンのグループでsoftDisabled入力を使用し、キーボードナビゲーション中に無効化されたアイテムの動作を制御します。

[softDisabled]="true"（デフォルト）の場合、無効化されたアイテムはフォーカスを受け取れますが、アクティブにはできません。[softDisabled]="false"の場合、無効化されたアイテムはキーボードナビゲーション中に完全にスキップされます。

コンテンツの遅延レンダリング

ngAccordionContentディレクティブをng-templateで使用すると、パネルが最初に展開されるまでコンテンツのレンダリングを遅延させることができます。これにより、画像、チャート、または複雑なコンポーネントなどの重いコンテンツを持つアコーディオンのパフォーマンスが向上します。

<div ngAccordionGroup>
  <div>
    <button ngAccordionTrigger [panel]="panel1">Trigger Text</button>
    <div ngAccordionPanel #panel1="ngAccordionPanel">
      <ng-template ngAccordionContent>
        <!-- This content only renders when the panel first opens -->
        <img src="large-image.jpg" alt="Description" />
        <app-expensive-component />
      </ng-template>
    </div>
  </div>
</div>

デフォルトでは、パネルが折りたたまれた後もコンテンツはDOMに残ります。パネルが閉じたときにDOMからコンテンツを削除するには、[preserveContent]="false"を設定します。

Testing

Angular Aria provides component harnesses for testing accordion components. Here is an example of how to use the harnesses in a component test:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {AccordionGroupHarness} from '@angular/aria/accordion/testing';
import {MyAccordionComponent} from './my-accordion'; // Your component

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

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

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

  it('should allow expanding panels', async () => {
    // Load the accordion group harness
    const group = await loader.getHarness(AccordionGroupHarness);

    // Get all individual accordions (items) in the group
    const accordions = await group.getAccordions();
    expect(accordions.length).toBe(3);

    // Verify initial state (first expanded, others collapsed)
    expect(await accordions[0].isExpanded()).toBe(true);
    expect(await accordions[1].isExpanded()).toBe(false);

    // Expand the second panel
    await accordions[1].expand();

    // Verify updated state
    expect(await accordions[1].isExpanded()).toBe(true);
    // If multiExpandable is false, the first one should now be collapsed
    expect(await accordions[0].isExpanded()).toBe(false);
  });
});

API reference

詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。