Description

The VADS has list styles that don't align with USWDS. We want to align our simple unordered and ordered list with the USWDS.

Details

Currently the list style is in CSS-Library as a port from Formation which is referencing USWD v1 styles. We would like to move this out of the formation-overrides folder in CSS-Library and inherit those styles from USWDS v3 package instead.

This might be accomplished doing something like this:

@import 'uswds-core/src/styles/mixins/typography/usa-list-item';


li {
  @include usa-list;

  li {
    @include usa-list-item;
  }
}

The _usa-list.scss package is a good reference.

Other references

USWDS List
VADS List
Codepen example of both together
#1362

Estimating

Provide your estimate of 1, 2, 3, 5, 8 or 13
@Andrew565 - 3
@ataker - 3
@harshil1793 -
@it-harrison - 3
@jamigibbs - 5
@micahchiang - 3
@powellkerry - 3
@rmessina1010 -
@rsmithadhoc - 5

Tasks

• Update the existing ul and li styles in CSS-Library so that it inherits from USWDS v3
• Move the updated list styles outside of the /formation-overrides/ folder (discuss with the team about CSS-Library organization if necessary)
• a11y: Verify the list items are read to screen readers as "bullet" instead of "black-square" (original issue)
• Review changes with a Designer
• Test CSS-Library list styles in vets-website

Acceptance Criteria

• The VA list above have the same styling as USWDS list