Accessibility

Aims to provide the same user experience for all.

Overlays

1. Modal & Alert

Be sure to add aria-labelledby="id...", referencing the modal title, to the Modal.

Additionally, you may give a description of your modal with the aria-describedby="id..." prop on the Modal.

The modal does not need aria-describedby if there is no static text that describes it.

<Modal
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc"
  isOpen={showModalExtraSmall}
  onClose={() => setShowModalExtraSmall(false)}
  size="xs"
>
  <Modal.Header>
    <Typography style="h2" id="dialog1Title">
      They're creepy & they're kooky
    </Typography>
  </Modal.Header>
  <Modal.Body>
    <Typography style="body2" lineHeight="normal" id="dialog1Desc">
      Somewhere out in space live The Herculoids! Zok, the laser-ray dragon!
      Igoo, the giant rock ape! Tundro, the tremendous!
    </Typography>
  </Modal.Body>
  <Modal.Footer className="space-x-2">
    <Button
      icon={Check}
      size="large"
      label="Continue"
      onClick={() => setShowModalExtraSmall(false)}
    />
    <Button
      style="text"
      size="large"
      label="Cancel"
      onClick={() => setShowModalExtraSmall(false)}
    />
  </Modal.Footer>
</Modal>

The WAI-ARIA authoring practices can help you set the initial focus on the most relevant element, based on your modal content.

Keep in mind that a "modal window" overlays on either the primary window or another modal window. Windows under a modal are inert. That is, users cannot interact with content outside an active modal window. This might create conflicting behaviours.

Read More

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#dialog_modal)

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role