[Task] Verify Expandable Component

[natalia-fitzgerald]

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

• Component intro text has been copied from the DS page Update Expandable.stories.tsx #443
• Source link to component's DS page (Source: https://cfpb.github.io/design-system/components/expandables)
• Each DS variant is implemented as a separate story Update Expandable.stories.tsx #443
  • Story name is sentence case (ex. List Link => List link)Update Expandable.stories.tsx #443
  • 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.
  • Same component names, same placeholder text, etc.
• Order of stories matches between DS/DSR
• Component is built correctly
  • Visually compare DSR implementation to DS
    • Fixes to accordion and group: Add Summary component and fixing Accordion #450
  • Verify that React renders the HTML markup the same as in the DS (if at all possible)
  • Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR

Design System	Design System in React

• Check to see if the applied CSS styles match the specs in the DS if applicable (message @natalia-fitzgerald if it does not)*
• Manual visual review has been conducted and component has passed this review

2. 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

3. Verify component unit tests

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

Unit tests

4. Prepare a PR for Code Review

• Create a PR with the name: Final component verification review for XXXX component
• Copy this verification checklist that's almost complete into the PR description

5. Conduct Code PR review

• Submit PR with any necessary changes for code review by frontend devs
  Update Expandable.stories.tsx #447
  fix: [Expandable] Correct icon color #391
  Add Summary component and fixing Accordion #450

6. Conduct Component Verification PR review

• Apply GitHub label "component-verification"
• Change the component's status from Draft to Verified in Storybook
• Add a DSR contributor as a reviewer (A designer and a developer must review)
• 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

Tagging for awareness

@gogogabby007 @flacoman91

[natalia-fitzgerald]

In progress....

List of changes required

Page content and structure

• Consolidate component into one story with a single overview (like we do for buttons).
• For overview page change the name to "Expandables," Add the intro text from the CFPB Design System page, add stories for each of the types included in the CFPB Design System.

Here's a mock-up:

[natalia-fitzgerald]

Component code updates

The following changes will require a developer

Expandable group (default and accordion)

• To match the CFPB Design System, remove the background fill and border from the individual expandables. Fix: Add Summary component and fixing Accordion #450

Design System	Design System in React

• Update the accordion code. Currently the accordion functionality is not working. Fix: Add Summary component and fixing Accordion #450
• Update the storybook page to show the correct space between the icon and expandable label. Remove storybook overrides #445

Design System	Design System in React

• Remove Expandable group tab/page since we have now consolidated expandables into one page Remove storybook overrides #445

[natalia-fitzgerald]

Hey @billhimmelsbach
I am going through the verification checklist and have some questions related to the process.

• How do I "Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR".
• I can't access this link for the screen reader testing demo --- https://drive.google.com/file/d/189A9Wx_T1C49TES5ZtYXlIFbJbLP472p/vi. Do you have a new link or should I follow a different tutorial?
• I navigated the page with my keyboard and the one thing that didn't work was the link to the DS expandables component page. I checked other components in the DSR and those links did work. https://cfpb.github.io/design-system-react/?path=/docs/components-draft-expandables--overview
• I assume that "Verify component unit tests are implemented and passing - 85% or greater (ex: yarn vitest Button)" will be a dev task?

[billhimmelsbach]

- How do I "Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR".

Make sure the CSS classes used in the DSR match what's in the DS, instead of using ones that are custom only to the DSR. For instance:

Does this class on the close expandable button here on the DS... (o-expandable__cue-close)

...match what's in the DSR? (yes!) (o-expandable__cue-close)

I can't access this link for the screen reader testing demo --- https://drive.google.com/file/d/189A9Wx_T1C49TES5ZtYXlIFbJbLP472p/vi. Do you have a new link or should I follow a different tutorial?

Try opening the link in an incognito window? Seems to be working still for me:
https://drive.google.com/file/d/189A9Wx_T1C49TES5ZtYXlIFbJbLP472p/view

I navigated the page with my keyboard and the one thing that didn't work was the link to the DS expandables component page. I checked other components in the DSR and those links did work. https://cfpb.github.io/design-system-react/?path=/docs/components-draft-expandables--overview

Keyboard navigation checks were only for the component itself, not the storybook documentation, so you're probably good.

I assume that "Verify component unit tests are implemented and passing - 85% or greater (ex: yarn vitest Button)" will be a dev task?

Checking for code coverage would be a dev task, yeah.

[natalia-fitzgerald]

@billhimmelsbach
I have completed my verification check of this component. The verification checklist seems to assume that a dev is doing this work and that a designer's review will now be needed. Should I move forward with the creation of the PR for dev review or should I get a dev review before I move to that stage?

Tagging for awareness
@flacoman91

[natalia-fitzgerald]

The component verification has been completed with this PR. #471