[Task] Verify Links Component

[meissadia]

Verify links component to be used in the component library

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

Context

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

[meissadia]

TODO:

• Add alt text for Icons? Or should this be a separate PR
  • Decided this should be addressed as part of the Icon component verification.
• Unit tests

[meissadia]

Reopening to get final Verification

[natalia-fitzgerald]

@meissadia
The component is looking good! I made some text updates to the CFPB Design System: Links page that I'd like to incorporate into the DSR page before we move to verified.

New intro text:
Links are navigational elements that connect users to other locations, either on the current page or to a different page or site. In contrast, buttons are used to signal important actions.

Stories

• Inline links
• List link Call-to-action links
  • Change code example for the links to "List link 1" "List link 2"
• Destructive links
  • Change code example link text to "Destructive link" (remove the word "Sample"
• Link with iconStandard link with icon
• Non-wrapping link with icon icon links
• Jump link
  • Change code example for the link to "Jump link" (remove the word "Default")
• Jump link with icon on the left
• Printed links (Should we add this to the DSR?)

[meissadia]

Reopening to remove Print example