Final component verification review for Tagline component#218
Merged
billhimmelsbach merged 3 commits intomainfrom Nov 7, 2023
Merged
Final component verification review for Tagline component#218billhimmelsbach merged 3 commits intomainfrom
billhimmelsbach merged 3 commits intomainfrom
Conversation
✅ Deploy Preview for cfpb-design-system-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
billhimmelsbach
requested review from
meissadia and
shindigira
as code owners
natalia-fitzgerald
approved these changes
Nov 2, 2023
Collaborator
natalia-fitzgerald
left a comment
natalia-fitzgerald
left a comment
There was a problem hiding this comment.
@billhimmelsbach
This looks great. I have 2 content changes and then we can move this to verified.
Change intro copy to:
Taglines are short paragraphs of text with the USA flag to their left that are used in the header and footer across consumerfinance.gov.
Change source link to: https://cfpb.github.io/design-system/components/taglines
- We don't have to do this as part of this PR but can we change the source links (globally) to List links (instead of inline links)? I'd like them to have more prominence.
natalia-fitzgerald
requested changes
Nov 2, 2023
Collaborator
natalia-fitzgerald
left a comment
natalia-fitzgerald
left a comment
There was a problem hiding this comment.
Thanks for making me aware.
33 tasks
Collaborator
Author
|
I changed the text @natalia-fitzgerald! 🥳
I'd be down to change all of them at once for a future PR, maybe we can make a ticket for it? Otherwise, excited to get this verified! ✅ |
27 tasks
natalia-fitzgerald
approved these changes
Nov 7, 2023
29 tasks
This was referenced Feb 5, 2026
natalia-fitzgerald
changed the title
29 tasks
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.
Resolves #205
Final Design Review of Tagline Component
Link to Tagline Component in this PR
Previous work on component: #207
Verification checklist
Verify the CFPB Design System (React) component against the CFPB Design System
Run accessibility checks
Verify component unit tests
yarn vitest Button)Conduct PR review
Verify component