issue (non-blocking): I noticed that the modal window does not have a focus trap, so users can unintentionally move focus outside of the modal. It looks like the USWDS examples have a technique we may be able to borrow https://designsystem.digital.gov/components/modal/
[x] Tab focus is only in modal when modal is opened
[x] Pressing the Escape button closes an open modal
[x] Label the modal with its heading using aria-labelledby=”[id]” on .usa-modal. The [id] should match the value of the id attribute on the usa-modal__heading element.
[x] Provide an option to use aria-describedby=”[id]” on .usa-modal to associate descriptive text to the modal window so that it’s read when opening the modal. The id should belong to a paragraph or a brief piece of content within the modal.
[ ] On remove user from org success, close modal and show success message at the top of the page
Make our Modal component have a11y parity with USWDS modal guidelines.
Originally posted by @hursey013 in https://github.com/cloud-gov/cg-ui/issues/294#issuecomment-2181560206
Acceptance criteria
aria-labelledby=”[id]”
on.usa-modal
. The[id]
should match the value of the id attribute on the usa-modal__heading element.aria-describedby=”[id]”
on.usa-modal
to associate descriptive text to the modal window so that it’s read when opening the modal. The id should belong to a paragraph or a brief piece of content within the modal.