Codecademy
fix(expandable components): Add/update aria attributes to expandable components
Overview
Components that expand other components should have both aria-expands and aria-controls attributes.
Components that are being expanded/controlled by another component should have an id that matches the value of the aria-controls attribute.
The aria-expanded attribute denotes if the expandable component is expanded or not.
When using Voiceover, an element with an aria-expanded attribute, should announce if the element is "expanded" or "collapsed".
expanded example:
collapsed example:
Voiceover does NOT announce the aria-controls value though, see this reference.
This PR adds these attributes to:
- Disclosure*
- InfoTip
- ExpandControl
- ListRow
- TableRow —
- Drawer + Flyout**
* Disclosure only has an aria-expanded addition b.c. the inability to check aria-controls and the questionable interaction it might have with conditionally setting the aria-controls value.
** Since Drawer + Flyout are the expanded components, they're being provided an id prop.
New guidance around adding the correct aria attributes to the controlling element is included in both Drawer and Flyout stories.
For example, here's how InfoTag looks like.
Where the button has aria-controls=":rg:" and the expanded span has an id=":rg:".
And the button also has aria-expanded="true", because the component is expanded.
PR Checklist
- [x] Related to JIRA ticket: GM-1006
- [x] I have run this code to verify it works
- [x] This PR includes testing instructions tests for the code change
- [x] The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories
Testing Instructions
- Check out Drawer
- Click the toggle button in the playground
- Inspect the components, see that the button has an
aria-expandedand anaria-controls - the value for
aria-controlsmatches theidof the expanded component flyout/drawer. - turn on Voiceover, when expanded VO should announce that it's "expanded". When not expanded, VO should announce that it's "collapsed".
- repeat 2-5 for Flyout
- Check out Disclosure
- Inspect the component, see that the button now has an
aria-expandedand anaria-controls - click the button, see that the value for
aria-controlsmatches theidof the expanded component. (N/A for Disclosure). - turn on Voiceover, when expanded VO should announce that it's "expanded". When not expanded, VO should announce that it's "collapsed".
- Repeat steps 8 - 10 for InfoTip
- Check out List Expandable button
- Repeat steps 8-10
- Check out List Expandable row
- Repeat steps 8-10
- Check out DataList
- Scroll to the right to find the expand button, repeat 8-10
- ... take a deep breath ...
- Profit!
PR Links and Envs
| Repository | PR Link | PR Env |
|---|---|---|
| Monolith | Monolith PR | Monolith Env |
| Portal | Mono PR | Portal Env |
| LE | Mono PR | LE Env |
| Brand | Mono PR | Brand Env |
View your CI Pipeline Execution ↗ for commit 8a23092cfff87932b230fbe06c60fb3c24981c93.
☁️ Nx Cloud last updated this comment at 2025-04-24 16:06:32 UTC
![nx-cloud[bot] avatar](https://avatars.githubusercontent.com/in/80458?v=4 "Published by a pub.dev verified publisher"){kind=small}
View your CI Pipeline Execution ↗ for commit c1991ca9d38c4c751dc9c9c3972a89902dca2927.
| Command | Status | Duration | Result |
|---|---|---|---|
nx run-many --target=build --all |
✅ Succeeded | 2s | View ↗ |
☁️ Nx Cloud last updated this comment at 2025-03-21 19:35:25 UTC
📬Published Alpha Packages:
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
