Modal

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

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

モーダルが開くと、自動的にモーダル内の最初の無効ではない要素またはinitialFocusRefで設定された要素にフォーカスされます。
モーダルが閉じると、モーダルが開く前にフォーカスされていた要素またはfinalFocusRefで設定された要素にフォーカスされます。
モーダルのオーバーレイをクリックすると、モーダルを閉じます。
モーダルの背後にある要素はスクロールがブロックされます。

モーダルを開くトリガーとなる要素にaria-haspopup="dialog"を設定すると、スクリーンリーダーがダイアログを開くことをユーザーに伝えることができます。

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button aria-haspopup="dialog" onClick={onOpen}>
      Open Modal
    </Button>

    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalHeader>ドラゴンボール</ModalHeader>

      <ModalBody>
        『ドラゴンボール』（DRAGON
        BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
      </ModalBody>

      <ModalFooter>
        <Button variant="ghost" onClick={onClose}>
          とじる
        </Button>
        <Button colorScheme="primary">Wikipedia</Button>
      </ModalFooter>
    </Modal>
  </>
)

Copied!

キーボード操作

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

キー	説明	状態
`Tab`	モーダル内の無効ではない次の要素にフォーカスします。最後の要素の場合は最初の無効ではない要素をフォーカスします。	`isOpen={true}`
`Shift` + `Tab`	モーダル内の前の無効ではない要素をフォーカスします。最初の要素の場合は最後の無効ではない要素をフォーカスします。	`isOpen={true}`
`Escape`	モーダルを閉じます。	`isOpen={true}` + `closeOnEsc={true}`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Modal`	`role="dialog"`	ダイアログであることを示します。
	`aria-modal="true"`	表示されているウィジェットがモーダルであることを示します。
	`aria-labelledby`	関連した`ModalHeader`の`id`を設定します。
	`aria-describedby`	関連した`ModalBody`の`id`を設定します。
`ModalOverlay`	`aria-hidden="true"`	要素をアクセシビリティツリーから除外します。
`ModalCloseButton`	`aria-label="Close modal"`	`"Close modal"`を設定します。
`ModalHeader`	`id`	`Modal`と関連付けるために使用する`id`。
`ModalBody`	`id`	`Modal`と関連付けるために使用する`id`。

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

前オーバーレイ次Dialog