Menu

Menuは、アクセシビリティに関してWAI-ARIA - Menu and Menubar PatternおよびWAI-ARIA - Menu Button Patternに従います。

キーボード操作

キー	説明	状態
Space	メニューを開き、無効ではない最初の項目をフォーカスします。	MenuButton
	サブメニューを開き、無効ではない最初の項目をフォーカスします。	MenuItemButton
	フォーカスされている項目をアクティブにして、すべてのメニューを閉じます。	MenuItem
	フォーカスされている項目をチェックします。	MenuOptionItem
Enter	メニューを開き、無効ではない最初の項目をフォーカスします。	MenuButton
	サブメニューを開き、無効ではない最初の項目をフォーカスします。	MenuItemButton
	フォーカスされている項目をアクティブにして、すべてのメニューを閉じます。	MenuItem
ArrowRight	サブメニューを開き、無効ではない最初の項目をフォーカスします。	MenuItemButton
ArrowLeft	サブメニューの場合は閉じ、メインメニューをフォーカスします。	MenuList
ArrowUp	メニューを開き、無効ではない最後の項目をフォーカスします。	MenuButton
	無効ではない前の項目をフォーカスします。最初の項目の場合は無効ではない最後の項目をフォーカスします。	MenuList
ArrowDown	メニューを開き、無効ではない最初の項目をフォーカスします。	MenuButton
	無効ではない次の項目をフォーカスします。最後の項目の場合は無効ではない最初の項目をフォーカスします。	MenuList
Home	無効ではない最初の項目をフォーカスします。	MenuList
End	無効ではない最後の項目をフォーカスします。	MenuList
Escape	すべてのメニューを閉じます。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
MenuButton, MenuItemButton	role="button"	ボタンであることを示します。
	id	MenuListと関連付けるために使用するid。
	aria-haspopup	menuを設定します。
	aria-expanded	メニューが開いている場合は"true"を設定し、閉じている場合は、"false"を設定します。
	aria-controls	メニューが開いている場合は関連したMenuListのidを設定し、閉じている場合はundefinedを設定します。
MenuList	role="menu"	メニューであることを示します。
	id	MenuButtonまたはMenuItemButtonと関連付けるために使用するid。
	tabindex	"-1"を設定します。
	aria-activedescendant	フォーカスされた項目のidを設定します。
	aria-labelledby	関連したMenuButtonまたはMenuItemButtonのidを設定します。
	aria-hidden	メニューが開いている場合は"true"を設定し、閉じている場合は"false"を設定します。
MenuItem	role="menuitem"	メニュー項目であることを示します。
	id	MenuListと関連付けるために使用するid。
	tabindex	フォーカスされた場合は"0"を設定し、そうでなければ"-1"を設定します。
	aria-disabled	項目が無効な場合は、"true"を設定します。
MenuOptionGroup	role="group"	グループであることを示します。
MenuOptionItem	role	MenuOptionGroupのtypeが"radio"に設定されている場合はmenuitemradio"を設定し、"checkbox"に設定されている場合は"menuitemcheckbox"を設定します。
	tabindex	フォーカスされた場合は"0"を設定し、そうでなければ"-1"を設定します。
	aria-checked	項目がチェックされている場合は"true"を設定し、チェックされていない場合は"false"を設定します。
	aria-disabled	項目が無効な場合は"true"を設定します。

GitHubでこのページを編集する