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
echappen
commented
4 months ago
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-modalto 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.