Update to USWDS v3.9.0

[jamigibbs]

Chromatic

https://3401-uswds-390--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

What's new in USWDS 3.9.0: uswds/uswds#6098

va-alert before

va-alert after

va-pagination before

va-pagination after

This version updates the number links with an underline:

Closes department-of-veterans-affairs/vets-design-system-documentation#3401

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• 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)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Acceptance criteria

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

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[jamigibbs]

I have added a wrapping div around the slot content because the USWDS alert module styles the alert content with the following CSS:

.usa-alert--info .usa-alert__body > * {
    margin-left: 2.5rem;
}

The selector > * will not work on a placeholder element like <slot> when it's the direct descendent.

The alert content is displaying like this without that div:

[jamigibbs]

This is happening now because this update was made:

Fixed a bug that caused $theme-site-margins-width to unexpectedly adjust the alignment inside the alert and site alert components. Alignment on the alert and site alert components will likely shift from this change. Confirm that your implementation of the component aligns as expected.

[jamigibbs]

Will revert before merging.

[jamigibbs]

We already have a ticket created for the lock icon alignment:

• va-alert lock icon not aligned in the same way as the other icons vets-design-system-documentation#3440

[powellkerry]

That is quite the difference of padding on the alert. Design may need to update figma.
Looks good to me!