fix: add aria-modal

[cliu02]

Pull Request Template

This PR is for Issue #142.

Description

This PR adds aria-modal="true" to the Modal component to let screen reader users know that they are viewing a modal dialog and that the content underneath the dialog is not interactive.

How Can This Be Tested/Reviewed?

Confirm that aria-modal="true" is added to the same container level as the dialog role.

Checklist:

• [ ] My code follows the style guidelines of this project
• [ ] I have added QA notes to the issue
• [ ] I have performed a self-review of my own code
• [ ] I have reviewed the changes in a desktop view
• [ ] I have reviewed the changes in a mobile view
• [ ] I have made any corresponding changes to the documentation
• [ ] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] I have added or updated stories if new changes are not captured in Storybook
• [ ] New and existing unit tests pass locally with my changes
• [ ] I have exported any new pieces added to ui-components
• [ ] I have documented this change in the changelog, and any breaking changes are well described

Reviewer Notes:

Steps to review a PR:

• Read and understand the issue, and ensure the author has added QA notes
• Review the code itself from a style point of view
• Either review the Storybook preview or pull the changes down locally and test that the acceptance criteria is met
• Either explicitly ask a clarifying question, request changes, or approve the PR if there are small remaining changes but the PR is otherwise good to go

On merge, squash commits.

[netlify[bot]]

✅ Deploy Preview for storybook-bloom-dev ready!

Name	Link
🔨 Latest commit	20b7d6e865cbcdcd3a3141b232b04dd7bce3cf73
🔍 Latest deploy log	https://app.netlify.com/sites/storybook-bloom-dev/deploys/6595d4e61352080008a42b3b
😎 Deploy Preview	https://deploy-preview-143--storybook-bloom-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cliu02]

Thank you for reviewing @ColinBuyck! My understanding is that aria-modal just needs to be applied to the same container level as the role attribute in Overlay. The resulting divs will be within that container. Could you clarify what the requested change is? For following the pattern, should aria-modal be passed as a prop?

[ColinBuyck]

Ooo sorry I was vague! Yes, I think something like "ariaModal"should be added as a prop to Overlay and then around line 38 in Overlay.tsx, that prop would be utilized like aria-modal={props.arialModal}. In retrospect, I can see how the role prop (Modal.tsx line 76) could be misleading since its the same name as the attribute but it would not actually be implemented if not for line 36 in Overlay.tsx. Let me know if that helps!

[github-actions[bot]]

:tada: This PR is included in version 12.1.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: