CSS-Library: align list styles to uswds

[powellkerry]

Chromatic

https://3396-align-list-uswds--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Align list styles to USWDS.

• Add updated styles to src/elements/lists.scss
• Use @includes to import styles from USWDS
• Update imports in core.scss to reference new file
• Remove formation-overrides/elements/lists.scss file
• Remove other list styles in css-library
  Closes 3396

QA Checklist

• [ x] Component maintains 1:1 parity with design mocks
• [ x] Text is consistent with what's been provided in the mocks
• [ x] Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• [ x] Tab order and focus state work as expected
• [ x] Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• [ x] New components are covered by e2e tests; updates to existing components are covered by existing test suite
• [ x] Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Before:

After:

Acceptance criteria

• [ x] QA checklist has been completed
• [ x] Screenshots have been attached that cover desktop and mobile screens

Definition of done

• [ x] Documentation has been updated, if applicable
• [x ] A link has been provided to the originating GitHub issue

[powellkerry]

@rsmithadhoc I tested this with voiceOver and it reads the list items as bullets as expected. The only weird thing I saw was that it reads the list items as "clickable". I don't know why that would be happening or if we have any control over that seeing that we are only setting styles. I'm guessing that is a development/implementation issue.

[rsmithadhoc]

@rsmithadhoc I tested this with voiceOver and it reads the list items as bullets as expected. The only weird thing I saw was that it reads the list items as "clickable". I don't know why that would be happening or if we have any control over that seeing that we are only setting styles. I'm guessing that is a development/implementation issue.

I will take a look. I have seen NVDA on Windows do that by default whenever a parent element has a click event attached to it, which we could not fix in certain cases, but I'll look at this on VoiceOver.

[rsmithadhoc]

@powellkerry I believe it is a similar issue that I saw with NVDA, but unlike NVDA, VoiceOver does not have a toggle for this. Based on some posts I found, it may be a recent thing, and it led me to this bug report on Chromium. I'm able to reproduce in Chrome running 133.0.6943.142, but not in Brave running Chromium 132.

[jamigibbs]

So fresh and clean! 🚀

[danbrady]

@powellkerry I realize that we're limited here, but it is difficult to test with screenshots alone. Is there no way a designer can see this in a browser? Without that, it's hard to say what's right/wrong.

I laid the before/after screenshots on top of each other I can see a few differences:

• Space between list items looks smaller
• Word wrapping seems different (I know the bullet indents are different, but it's unclear why it wraps after "nurse" in the new screenshot?)

It would also be good to test wrapping and spacing in both styles of lists with different lengths of text in the items (i.e a list with single line items, multiline items, and a mix of both).

[babsdenney]

Design looks good from the screenshots.

[powellkerry]

Waiting to merge because storybook and the documentation site need to be updated to remove formation. Until that is complete it will be hard to adequately test this work.