[Task] Verify Banner Component

[billhimmelsbach]

Verify banner component to be used in the component library

Context

Depends on verification of the Tagline component: cfpb/design-system-react#205

Verification checklist

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

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, 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

[meissadia]

Closing in favor of cfpb/design-system-react#213