fix(modal + dialog): updating aria attributes per a11y team feedback

[LinKCoding]

Overview

Applying changes to the Modal and Dialog components per feedback from a11y team.
Also adding a zIndex

PR Checklist

• Related to designs: https://www.figma.com/design/g6pOoIOxRI6tGyAptTPMey/Cycle-F---Teams-improvements?node-id=563-2480&p=f&t=jn6CEetQkDRJLHQB-0
• Related to JIRA ticket: GM-1055
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

The feedback from the a11y team:

1. Go to the preview
2. Navigate to Modal
3. Turn on VO, and click the button to open the modal - it should announce the title of the modal, that it's a dialog (yes, that's not a typo), and how many items are inside the modal (this is the same behavior as prod)
4. Navigate to Dialog (skip the TESTING section for now)
5. With VO on, click on the button to open the dialog — it should announce the title of the dialog, that it's a dialog , and how many items are inside the dialog (this also is the same behavior as prod)
6. Go back to the TESTING ... section
7. Follow the instructions in the story itself
8. ...
9. Profit!

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 9dd0588.

---

☁️ Nx Cloud last updated this comment at 2025-04-21 15:04:44 UTC

[dreamwasp]

tested locally and works great ✨

[aresnik11]

There isnt a testing section anymore but Modal/Dialog existing examples sound great!

[codecademydev]

📬Published Alpha Packages:

@codecademy/gamut@62.0.1-alpha.9dd058.0
@codecademy/gamut-kit@0.6.498-alpha.9dd058.0
@codecademy/styleguide@73.0.1-alpha.9dd058.0

[codecademydev]

🚀 Styleguide deploy preview ready!

https://68065ea0100a190e375313e4--gamut-preview.netlify.app

Deploy Logs