Drawer

Drawer is a component for a panel that appears from the edge of the screen.

Drawer 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 Drawer
    </Button>

    <Drawer isOpen={isOpen} onClose={onClose}>
      <DrawerHeader>ドラゴンボール</DrawerHeader>

      <DrawerBody>
        『ドラゴンボール』は、鳥山明による日本の漫画作品です。...
      </DrawerBody>

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

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
`Drawer`	`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 `DrawerHeader`.
	`aria-describedby`	Sets the `id` of the associated `DrawerBody`.
`DrawerOverlay`	`aria-hidden="true"`	Excludes the element from the accessibility tree.
`DrawerCloseButton`	`aria-label="Close modal"`	Sets `"Close modal"` as the label.
`DrawerHeader`	`id`	Used to associate with `Drawer`.
`DrawerBody`	`id`	Used to associate with `Drawer`.

Edit this page on GitHub

PreviousDialog NextMenu