overlay · @awesome-ds/react
DropdownMenu
キーボード操作に対応したアクションメニュー。
状態マトリクス
開いている
閉じている
構造
- メニュートリガー
- メニュー面
- メニュー項目
キーボード操作契約
矢印、Home、Endで移動し、Enterで実行、Escapeで閉じます。
スクリーンリーダー契約
トリガーの展開状態、menu、各menuitemの名前・無効状態を通知します。
コンテンツ規則
- 各項目を動詞で始めます。
- 破壊的操作は視覚と意味の両方で分離します。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
label | string | 必須 | 利用者と支援技術へ示す名前。 |
items | DropdownMenuItem[] | 必須 | 表示する項目とその内容。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
コピー可能な実装例
import { DropdownMenu } from "@awesome-ds/react";
<DropdownMenu label="Actions" items={[{id:'a',label:'Edit'}]} />