ContextMenu

ContextMenuは、右クリックでトリガーされ、ポインターの位置にメニューを表示します。

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

キーボード操作

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

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`ContextMenuTrigger`	`id`	`MenuList`と関連付けるために使用する`id`。
	`aria-haspopup`	`"menu"`を設定します。
	`aria-expanded`	メニューが開いている場合は`"true"`を設定し、閉じている場合は、`"false"`を設定します。
	`aria-controls`	メニューが開いている場合は関連した`MenuList`の`id`を設定し、閉じている場合は`undefined`を設定します。
`MenuItemButton`	`role="button"`	ボタンであることを示します。
	`id`	`MenuList`と関連付けるために使用する`id`。
	`aria-haspopup`	`"menu"`を設定します。
	`aria-expanded`	メニューが開いている場合は`"true"`を設定し、閉じている場合は、`"false"`を設定します。
	`aria-controls`	メニューが開いている場合は関連した`MenuList`の`id`を設定し、閉じている場合は`undefined`を設定します。
`MenuList`	`role="menu"`	メニューであることを示します。
	`id`	`ContextMenuTrigger`または`MenuItemButton`と関連付けるために使用する`id`。
	`tabindex`	`"-1"`を設定します。
	`aria-activedescendant`	フォーカスされた項目の`id`を設定します。
	`aria-labelledby`	関連した`ContextMenuTrigger`または`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でこのページを編集する

前Menu 次ActionBar