Final component verification review for Expandables component

[natalia-fitzgerald]

Verify Expandable component to be used in the component library

Context

https://cfpb.github.io/design-system/components/expandables

Verification checklist

1. Verify the CFPB Design System (React) component against the CFPB Design System

For existing components

• Component intro text has been copied from the DS page Update Expandable.stories.tsx #443
• Source link to component's DS page (Source: https://cfpb.github.io/design-system/components/expandables)
• Each DS variant is implemented as a separate story Update Expandable.stories.tsx #443
  • Story name is sentence case (ex. List Link => List link)Update Expandable.stories.tsx #443
  • Naming is consistent with the DS
    • Note: Naming is slightly adjusted on the DSR page because we do not repeat the base name of the component for the stories.
  • Same component names, same placeholder text, etc.
• Order of stories matches between DS/DSR
• Component is built correctly
  • Visually compare DSR implementation to DS
    • Fixes to accordion and group: Add Summary component and fixing Accordion #450
  • Verify that React renders the HTML markup the same as in the DS (if at all possible)
  • Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR

Design System	Design System in React

• Check to see if the applied CSS styles match the specs in the DS if applicable (message @natalia-fitzgerald if it does not)*
• Manual visual review has been conducted and component has passed this review

2. Run accessibility checks

• Component is keyboard-friendly (navigable with tab, space, enter, arrow keys, etc.)
• Component does not introduce new errors or warnings in WAVE
• Component is screen reader friendly (screen reader testing demo)
  • Is all the meaningful visual information and text of the component conveyed by the screen reader? (text, non-decorative image descriptions, etc.)
  • When interacting with the component using a screen reader, do you have all the information you need to use it? (selected vs unselected, button vs link, expanded vs collapsed, etc.)
  • Does the component have similar screen reader behavior as the sample components in WCAG, the CFPB design system, WebAIM, or similar accessibility examples?
• For reference: CFPB manual web accessibility audit

3. Verify component unit tests

• Verify component unit tests are implemented and passing - 85% or greater (ex: yarn vitest Button)

Unit tests

4. Prepare a PR for Code Review

• Create a PR with the name: Final component verification review for XXXX component
• Copy this verification checklist that's almost complete into the PR description

5. Conduct Code PR review

• Submit PR with any necessary changes for code review by frontend devs
  Update Expandable.stories.tsx #447
  fix: [Expandable] Correct icon color #391
  Add Summary component and fixing Accordion #450

6. Conduct Component Verification PR review

• Apply GitHub label "component-verification"
• Change the component's status from Draft to Verified in Storybook
• Add a DSR contributor as a reviewer (A designer and a developer must review)
• Ping DSR contributors in Slack in the Design System in React channel when ready

7. Verify component

• Merge when design and dev review completed to finish component verification 🎉

Screenshot

Tagging
@flacoman91 @virginiacc @billhimmelsbach

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-02-05 23:02 UTC

[billhimmelsbach]

Looks really great! 🎉

I did notice that the aria-labels on the icons are a little off for the + and - buttons.

Here's the DS with a descriptive label (show/hide) and the role and aria-label are on the span not the svg (the svg is set to aria-hidden=true so the screen reader doesn't pick it up twice):

Here's the implementation in this PR with the name of the icon as the label and it's on the SVG not the span. So if I'm using a screen reader, I'd just hear the name of the icon instead of it's purpose (DS: show/hide)

[flacoman91]

The sorting of the Expandables is appearing at the bottom for some reason.

I had to CMD+F to find it

[flacoman91]

Looks really great! 🎉

I did notice that the aria-labels on the icons are a little off for the + and - buttons.

Here's the DS with a descriptive label (show/hide) and the role and aria-label are on the span not the svg (the svg is set to aria-hidden=true so the screen reader doesn't pick it up twice):

Thanks @billhimmelsbach good catch with the icons and aria-labels!

[natalia-fitzgerald]

@flacoman91
It looks like you fixed the ordering. Nice work!

[flacoman91]

looks good. I can approve, but it won't do anything since I last made changes to the code.

[billhimmelsbach]

Looks good to me! Thanks for the fix.