Merged
Conversation
Change ordering to match the CFPB Design System ordering.
|
flacoman91
requested review from
billhimmelsbach,
contolini and
flacoman91
as code owners
flacoman91
approved these changes
Jan 20, 2026
This was referenced Feb 5, 2026
flacoman91
added a commit
that referenced
this pull request
Feb 5, 2026
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 - [x] Component intro text has been copied from the DS page #443 - [x] Source link to component's DS page (Source: https://cfpb.github.io/design-system/components/expandables) - [x] Each DS variant is implemented as a separate story #443 - [x] Story name is sentence case (ex. List Link => List link)#443 - [x] 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. - [x] Same component names, same placeholder text, etc. - [x] Order of stories matches between DS/DSR - [x] Component is built correctly - [x] Visually compare DSR implementation to DS - [x] Fixes to accordion and group: #450 - [x] Verify that React renders the HTML markup the same as in the DS (if at all possible) - [x] Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR | Design System | Design System in React | |------------|------------| |<img width="992" height="312" alt="Image" src="https://github.com/user-attachments/assets/fec57ee7-84b4-4c3f-8829-28290f0eb6a7" />|<img width="1066" height="205" alt="Image" src="https://github.com/user-attachments/assets/79d142eb-1abf-4fd4-aa20-696341e8d703" />| - [x] Check to see if the applied CSS styles match the specs in the DS if applicable (message @natalia-fitzgerald if it does not)* - [x] Manual visual review has been conducted and component has passed this review ### 2. Run accessibility checks - [x] Component is keyboard-friendly (navigable with tab, space, enter, arrow keys, etc.) - [x] Component does not introduce new errors or warnings in [WAVE](https://wave.webaim.org/extension/) - [x] Component is screen reader friendly ([screen reader testing demo](https://drive.google.com/file/d/189A9Wx_T1C49TES5ZtYXlIFbJbLP472p/view)) - [x] Is all the meaningful visual information and text of the component conveyed by the screen reader? (text, non-decorative image descriptions, etc.) - [x] 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.) - [x] 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](https://cfpb.github.io/design-system/guidelines/accessibility-audit-tools#cfpb-manual-web-accessibility-audit-1) ### 3. Verify component unit tests - [x] Verify component unit tests are implemented and passing - 85% or greater (ex: `yarn vitest Button`) | Unit tests | |------------| |<img width="722" height="52" alt="Image" src="https://github.com/user-attachments/assets/49736cfd-f4d2-4697-b955-1357509fb9b1" />| ### 4. Prepare a PR for Code Review - [x] [Create a PR](#218) with the name: `Final component verification review for XXXX component` - [x] Copy this verification checklist that's almost complete into the PR description ### 5. Conduct Code PR review - [x] [Submit PR](#207) with any necessary changes for code review by frontend devs #447 #391 #450 ### 6. Conduct Component Verification PR review - [x] Apply GitHub label "[component-verification](https://github.com/cfpb/design-system-react/labels/component-verification)" - [x] Change [the component's](f745c3c) status from `Draft` to `Verified` in Storybook - [x] Add a DSR contributor as a reviewer (A designer and a developer must review) - [x] 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 <img width="1366" height="996" alt="Screenshot 2026-02-05 at 2 01 33 PM" src="https://github.com/user-attachments/assets/cb628df3-dd7c-41ff-afb7-983317c1afc8" /> <img width="1343" height="1269" alt="Screenshot 2026-02-05 at 2 01 42 PM" src="https://github.com/user-attachments/assets/8ced56e6-a179-41a3-9a16-177a9598956b" /> Tagging @flacoman91 @virginiacc @billhimmelsbach --------- Co-authored-by: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR changes the ordering of the types to match what is currently shown on the CFPB Design System expandables component page. Ultimately, we do plan to make changes to the ordering and expandable types at the CFPB Design System level but I've decided to wait on DSR changes until those DS changes are made.
Changes
How to test this PR
Screenshots
Notes