Modal

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

Modal follows the WAI-ARIA - Dialog (Modal) Pattern for accessibility.

When the modal opens, focus is automatically set to the first enabled element, or the element from initialFocusRef.
When the modal closes, focus returns to the element that was focused before the modal activated, or the element from finalFocusRef.
Clicking on the overlay closes the modal.
Scrolling is blocked on the elements behind the modal.

Set aria-haspopup="dialog" on the element that triggers the modal to inform the user that the dialog will open.

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!

When the Modal opens, focus is trapped within it. That is, you cannot focus on elements outside the modal unless the modal is closed.

Key	Description	State
`Tab`	Focuses the next element within the modal that is not disabled. If it's the last element, focuses the first element within the modal that is not disabled.	`isOpen={true}`
`Shift` + `Tab`	Focuses the previous element within the modal that is not disabled. If it's the first element, focuses the last element within the modal that is not disabled.	`isOpen={true}`
`Escape`	Closes the modal.	`isOpen={true}` + `closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`Modal`	`role="dialog"`	Indicates that it is a dialog.
	`aria-modal="true"`	Indicates that the displayed widget is a modal.
	`aria-labelledby`	Sets the `id` of the associated `ModalHeader`.
	`aria-describedby`	Sets the `id` of the associated `ModalBody`.
`ModalOverlay`	`aria-hidden="true"`	Excludes the element from the accessibility tree.
`ModalCloseButton`	`aria-label="Close modal"`	Sets `"Close modal"` as the label.
`ModalHeader`	`id`	Used to associate with `Modal`.
`ModalBody`	`id`	Used to associate with `Modal`.

Edit this page on GitHub

PreviousOverlay NextDialog