Modal improvements

[andresz1]

Is your iteration request related to a problem? Some improvements that I thought

Describe the solution you'd like

API:

Use compound components pattern to allow more flexibility

<Modal isOpen={isOpen} onClose={onClose}>
  <ModalHeader>Title</ModalHeader>
  
  <ModalCloseButton />

  <ModalContent>
    <Lorem count={2} />
  </ModalContent>

  <ModalFooter>
    <Button onClick={onClose}>
      Close
    </Button>
  </ModalFooter>
</Modal>

A Drawer could be created using this API since it's also a modal

Accessibility:

• ModalContent should be a section tag
• ModalContent should have role modal or alertdialog
• ModalContent should have aria-modal=true
• If we want to support older browsers sibling nodes of the modal should have aria-hidden=true
• Focus should be lock inside the modal (see react-focus-lock and its size)
• If modal role is set, first element of the modal should gain focus when is opened and the button that opened the modal should get the focus again when is closed
• If alertdialog role is set, it should be like the modal with the difference that the less destructive action should get the focus when the modal is opened
• Scroll outside should be optionally locked (see react-remove-scroll and its size)
• Header should be a header tag
• Close button should always have a aria-label (e.g. Close). I think that would be nice for it to be a AtomButton
• Usage of aria-labelledby (id of the header) and aria-describedby (id of the content)

Features (nice to have):

• scrollBehaviour could be inside or outside
• Support custom transitions

Sources:

• w3c
• MDN
• It’s a (focus) Trap! article