fix(expandable components): Add/update aria attributes to expandable components #3054

LinKCoding · 2025-03-21T19:34:51Z

Overview

Components that expand other components should have an aria-expands attribute that denotes if an 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:

This PR adds the aria-expanded attribute to Disclosure and InfoTip
It also updates guidance for Drawer + Flyout
Also updates ListRow to use ExpandControl.

Note: previously this PR also included aria-controls implementation, but that has moved to: #3069 and tabled for the time being

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

Check out Disclosure
Inspect the component, see that the button now has an aria-expanded attribute
turn on VO, toggle between expanding and collapsing and hear the correct state annouced
Go to InfoTip
repeat 2-3
. Go to Drawer
check that the guidance for aria-expanded is now updated
Go to Flyout
repeat step 7
Check out List Expandable button
Test that the expand/collapse feature works
repeat steps above for Expandable Row
... 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

nx-cloud · 2025-03-21T19:35:26Z

View your CI Pipeline Execution ↗ for commit 8a23092.

☁️ Nx Cloud last updated this comment at 2025-04-24 16:06:32 UTC

nx-cloud · 2025-03-21T19:35:26Z

View your CI Pipeline Execution ↗ for commit c1991ca.

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

dreamwasp

code here looks great - could you add the screenreader behavior we should expect when testing?

dreamwasp · 2025-04-07T13:30:59Z

packages/gamut/src/Disclosure/DisclosureButton/index.tsx

@@ -36,6 +37,7 @@ export const DisclosureButton: React.FC<DisclosureButtonProps> = ({
    <FlexBox>
      <DisclosureButtonWrapper
        aria-expanded={isExpanded}
+        aria-controls={isExpanded ? ariaControlsId : undefined}


should the id be on the button regardless of the expanded state?

Woops, will update the testing instructions with the SR info, thanks!

—
re: id

tl;dr: an axe test was failing when, I think, aria-controls was trying to reference an id on an element that wasn't rendered yet. Adding this ternary solved the issue, but wondering if all these aria-controls should follow the pattern.

mini-story version: I didn't realize that Disclosure didn't have aria-expanded or aria-controls :\ so this is a new addition.

After I finished up with fixing some other failing mono tests, I saw that there was a failure on a Disclosure because of an "invalid value for aria-controls" https://github.com/codecademy-engineering/mono/actions/runs/14248719474/job/39936761982

Which I thought maybe that's cause I was using useId() and that values weren't readable to a person. So I swapped ALL of the useId instances with something more readable. And it was still failing lol (and I also had to fix a typo in the new id too x.x) So I read a bit more into it and saw this post: https://github.com/codecademy-engineering/mono/actions/runs/14248719474/job/39936761982 that mentioned that the element with the id should be on the page.

Then I updated Disclosure's aria-controls to this ternary and it fixed the issue. But I was hesitant about adding this logic to all the elements.

word, makes sense to me!

aresnik11

A couples questions and things I'm not seeing in storybook but mostly looking good!

not seeing aria-controls on drawer/flyout when the component is collapsed
should Disclosure have aria-controls? the PR desc says no but testing instructions says yes
I don't see the id on the info tip, but possible i'm missing it or it needs to be added to the story

packages/gamut/src/DataList/Controls/ExpandControl.tsx

packages/gamut/src/List/ListRow.tsx

packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx

packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx

packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx

packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx

Adds bi-directional option for multiview modals, refactors the CTAs in multiview modals, and adds danger variant. Adds unit tests and additional stories.

- @Codecademy/gamut@62.0.0 - @codecademy/[email protected] - @codecademy/[email protected]

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

- @Codecademy/gamut@62.0.1 - @codecademy/[email protected] - @codecademy/[email protected]

aresnik11

One small note but otherwise LGTM!

aresnik11 · 2025-04-24T14:20:32Z

packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx

+        <ExpandControl
+          expanded={isExpanded}
+          onExpand={() => setExpanded(!isExpanded)}
+          disabled={false}
+        />


this button used to have yellow text and now its grey. probably fine since this is just the storybook example but wanted to note

ya, thanks Amy — I should've left a comment.
That seems intentional based on what the original component, I'll ask Stacey just in case :)

Gonna update to secondary to match the textButton styling :) thanks again~

codecademydev · 2025-04-24T16:06:08Z

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

codecademydev · 2025-04-24T16:07:13Z

🚀 Styleguide deploy preview ready!

https://680a61aa84ab4600ba344771--gamut-preview.netlify.app

Deploy Logs

LinKCoding added 2 commits March 21, 2025 13:11

added aria-expanded and aria-controls to Disclosure

ea3238b

update infotip aria attributes

c1991ca

LinKCoding added 26 commits March 24, 2025 16:49

added controls to listrow and expandcontrol

b488938

formatted

e7ba3ba

Merge branch 'main' into kl-gm-1006

eb4bfc4

fix list story

375c843

remove minichevron icon from list stores

c5c7894

updated drawer and flyout

af644bd

formatted

e3a6542

updated drawer and flyout stories

09dafab

updated guidance on listrow

7b8a1b0

Merge branch 'main' into kl-gm-1006

b8d36af

formatted

d4851a7

omit id from DisclosureProps

b9d903e

Merge branch 'main' into kl-gm-1006

93c7be2

updated disclosure types

970247f

formatted

416098d

updated disclosure to correct props and types

f6dc0bc

fix typo

2fe31e1

Merge branch 'main' into kl-gm-1006

750cb72

clean up of useId

bba3aaf

formatted

c1799a7

updated disclosure body id

dd23d8f

fixed typo in id

978394f

Merge branch 'main' into kl-gm-1006

bdaef81

pushing for build

f37c7d5

updated disclosure to conditionally set aria-controls

b64c25f

Merge branch 'main' into kl-gm-1006

ab014d2

LinKCoding requested a review from dreamwasp April 4, 2025 14:52

removed old comment and updated another

0499920

dreamwasp reviewed Apr 7, 2025

View reviewed changes

LinKCoding added 3 commits April 7, 2025 15:33

Merge branch 'main' into kl-gm-1006

89b1cd3

removed aria-controls from disclosure

870787e

leftover code cleanup

269659e

LinKCoding requested a review from dreamwasp April 8, 2025 20:19

Merge branch 'main' into kl-gm-1006

46bd453

aresnik11 reviewed Apr 18, 2025

View reviewed changes

aresnik11 and others added 10 commits April 22, 2025 09:44

feat(Modal)!: add multiview options for back and danger variant

93828de

Adds bi-directional option for multiview modals, refactors the CTAs in multiview modals, and adds danger variant. Adds unit tests and additional stories.

chore(release): publish

75cd2ae

- @Codecademy/gamut@62.0.0 - @codecademy/[email protected] - @codecademy/[email protected]

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

97e6c09

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

chore(release): publish

588ac4b

- @Codecademy/gamut@62.0.1 - @codecademy/[email protected] - @codecademy/[email protected]

cleaned up aria-controls

6f2f7a0

more cleanup

bb01462

formatted

118ffff

clean up list stories

5f8463d

Merge branch 'main' into kl-gm-1006

ccb6094

more clean up

6faca24

LinKCoding requested a review from aresnik11 April 23, 2025 20:42

aresnik11 approved these changes Apr 24, 2025

View reviewed changes

LinKCoding added 3 commits April 24, 2025 11:48

update chevron color

d2239d2

Merge branch 'main' into kl-gm-1006

cdf1572

formatted

8a23092

LinKCoding added the Ship It Automerge this PR when possible label Apr 24, 2025

codecademydev merged commit 71fd235 into main Apr 24, 2025
20 of 21 checks passed

codecademydev removed the Ship It Automerge this PR when possible label Apr 24, 2025

codecademydev deleted the kl-gm-1006 branch April 24, 2025 16:52

fix(expandable components): Add/update aria attributes to expandable components #3054

fix(expandable components): Add/update aria attributes to expandable components #3054

Uh oh!

Conversation

LinKCoding commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud bot commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Mar 21, 2025

Uh oh!

dreamwasp left a comment

Choose a reason for hiding this comment

Uh oh!

dreamwasp Apr 7, 2025

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 7, 2025

Choose a reason for hiding this comment

Uh oh!

dreamwasp Apr 7, 2025

Choose a reason for hiding this comment

Uh oh!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

aresnik11 Apr 24, 2025

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 24, 2025

Choose a reason for hiding this comment

Uh oh!

LinKCoding Apr 24, 2025

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Apr 24, 2025

📬Published Alpha Packages:

Uh oh!

codecademydev commented Apr 24, 2025

Uh oh!

Uh oh!

Uh oh!

LinKCoding commented Mar 21, 2025 •

edited

Loading

nx-cloud bot commented Mar 21, 2025 •

edited

Loading