fix(aria-controls): adding aria-controls to expandable elements

[LinKCoding]

NOTE:

Making this PR with this branch to preserve the work for aria-controls. Original ticket was GM-1006 but in finding out certain components were failing Axe tests (disclosure), it seemed safer to split out the aria-expanded and aria-controls work into separate PRs.

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:

1. Disclosure*
2. InfoTip
3. ExpandControl
4. ListRow
5. TableRow
   —
6. 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

• Related to JIRA ticket: GM-1006
• I have run this code to verify it works
• 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

1. Check out Drawer
2. Click the toggle button in the playground
3. Inspect the components, see that the button has an aria-expanded and an aria-controls
4. the value for aria-controls matches the id of the expanded component flyout/drawer.
5. turn on Voiceover, when expanded VO should announce that it's "expanded". When not expanded, VO should announce that it's "collapsed".
6. repeat 2-5 for Flyout
7. Check out Disclosure
8. Inspect the component, see that the button now has an aria-expanded and an aria-controls
9. click the button, see that the value for aria-controls matches the id of the expanded component. (N/A for Disclosure).
10. turn on Voiceover, when expanded VO should announce that it's "expanded". When not expanded, VO should announce that it's "collapsed".
11. Repeat steps 8 - 10 for InfoTip
12. Check out List Expandable button
13. Repeat steps 8-10
14. Check out List Expandable row
15. Repeat steps 8-10
16. Check out DataList
17. Scroll to the right to find the expand button, repeat 8-10
18. ... take a deep breath ...
19. 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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit b719c11.

Command	Status	Duration	Result
nx run-many --target=verify --parallel=3 --all	✅ Succeeded	2s	View ↗
nx run-many --target=build --all	✅ Succeeded	1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-04-22 14:10:01 UTC