Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Task] Verify Alert component & Unlink from Notifications #240

Open
21 tasks
shindigira opened this issue Nov 9, 2023 · 1 comment · Fixed by #263
Open
21 tasks

[Task] Verify Alert component & Unlink from Notifications #240

shindigira opened this issue Nov 9, 2023 · 1 comment · Fixed by #263
Assignees
Labels
design needs design review for verification

Comments

@shindigira
Copy link
Contributor

shindigira commented Nov 9, 2023

Verify Notifications component to be used in the component library

Context

See https://cfpb.github.io/design-system/components/alerts

Verification checklist

For existing components

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

  • Has component intro text copied from the DS page
  • Has source link to component's DS page (ex - Source: https://cfpb.github.io/design-system/components/banner-notification)
  • Each DS variant is implemented as a separate story
    • Story name should be sentence case (ex. List Link => List link)
    • Naming is consistent with the DS
    • Same component names, same placeholder text, etc.
  • Order of stories matches between DS/DSR
  • Component is built correctly
    • Visually compare DSR implementation to DS
    • Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR
  • Manual visual review has been conducted and component has passed this review

#### For new components
- [ ] All steps for existing components plus the following steps
- [ ] The new component has been added to the CFPB Design System OR
- [ ] The CFPB Design System maintainers have been alerted that there is a new component that must be added to the system
- [ ] Documentation has been written for the new component (this is not a blocker for moving a component to verified)

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

Verify component unit tests

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

Conduct PR review

  • The component has been reviewed and approved by UI, UX, and FEWD

Verify component

  • Move component to verified in Storybook
@shindigira shindigira added the design needs design review for verification label Nov 9, 2023
@shindigira shindigira self-assigned this Nov 9, 2023
@natalia-fitzgerald natalia-fitzgerald changed the title [Task] Verify Notifications component [Task] Verify Alert component Nov 21, 2023
@shindigira shindigira changed the title [Task] Verify Alert component [Task] Verify Alert component & Unlink from Notifications Nov 28, 2023
@billhimmelsbach
Copy link
Contributor

@shindigira I think this needed a little more work to get this verified, going to re-open and make it available for this sprint. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design needs design review for verification
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants