コンポーネント / navigation

状態マトリクス

構造

• 開閉リスト
• 見出しボタン
• 内容領域

キーボード操作契約

見出しへフォーカスし、EnterまたはSpaceで開閉します。

スクリーンリーダー契約

各見出しの展開状態と、直後に続く内容領域を通知します。

コンテンツ規則

• 見出しだけで展開後の内容が予測できるようにします。
• 主要ナビゲーションを不必要に入れ子にしません。

公開API

環境適応契約

RTL

論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。

ハイコントラスト

背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。

動きを減らす設定

状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。

検証ID

Accordion/native-details

ライブ表示

コピー可能な実装例

import { Accordion } from "@awesome-ds/react";

<Accordion items={[{id:'1',title:'Q',content:'A'}]} />