Popover

Popoverは、アクセシビリティに関してWAI-ARIA Dialog (Modal) Patternに従います。

キーボード操作

ポップオーバーが開くと、フォーカスはポップオーバー内にロックされます。つまり、ポップオーバーを閉じない限り、ポップオーバー外の要素をフォーカスすることはできません。

キー	説明	状態
Tab	ポップオーバー内の無効ではない次の要素にフォーカスします。 最後の要素の場合はポップオーバーを閉じます。	isOpen={true}
Shift + Tab	ポップオーバー内の無効ではない次の要素にフォーカスします。最後の要素の場合はポップオーバーを閉じます。	isOpen={true}
Escape	ポップオーバーを閉じます。	isOpen={true} + closeOnEsc={true}

ARIAロールと属性

コンポーネント	ロールと属性	使い方
PopoverContent	role="dialog"	ダイアログであることを示します。
	aria-labelledby	関連したPopoverHeaderのidを設定します。
	aria-describedby	関連したPopoverBodyのidを設定します。
	aria-hidden	ポップオーバーが開いている場合は"true"を設定し、閉じている場合は"false"を設定します。
PopoverTrigger	role="button"	ボタンであることを示します。
	aria-expanded	ポップオーバーが開いている場合は"true"を設定し、閉じている場合は"false"を設定します。
	aria-controls	ポップオーバーが開いている場合は関連したPopoverContentのidを設定し、閉じている場合はundefinedを設定します。
PopoverCloseButton	aria-label="Close popover"	"Close popover"を設定します。
	aria-controls	PopoverContentのidを設定します。
PopoverHeader	id	PopoverContentと関連付けるために使用するid。
PopoverBody	id	PopoverContentと関連付けるために使用するid。

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