What's new in USWDS 3.2.0

This release contains markup changes and potentially breaking changes. A ⚠️ icon indicates where we've made a change that might be a breaking change for your project.

Package updates

usa-alert

Updated the alignment of the Alert and Site alert component content to visually match alignment with banner content. (#4922)

usa-banner

We made a number of small changes to the banner to improve how screen readers read its content. None of these changes are breaking chances, but they are all improvements teams should make to their banner component. (#4925)

⚠️ Updated the aria-label in English versions of usa-banner. When read out on a screen reader, the statement "An official website of the United States government" can sound like "Unofficial website of the United States government". To minimize confusion, we updated the component's aria-label to instead read "Official website of the United States government". Thanks @AmandaD-USDS! (#4925)

- <section class="usa-banner" aria-label="Official government website">
+ <section class="usa-banner" aria-label="Official website of the United States government">

- <div class="grid-col-fill tablet:grid-col-auto">
+ <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
    <p class="usa-banner__header-text">An official website of the United States government</p>
-   <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
+   <p class="usa-banner__header-action">Here’s how you know</p>

⚠️ Added aria-hidden attribute to the flag icon in the banner component. The flag icon in the banner component is purely decorative and we can safely remove it from the screen reader readout. (#4925)

- <img class="usa-banner__header-flag" src="[your flag path]" alt="U.S. flag">
+ <img class="usa-banner__header-flag" aria-hidden="true" src="[your flag path]" alt="">

⚠️ Simplified ARIA label in the lock SVG. We simplified the way we're using aria-labelledby in the lock SVG to streamline screenreader vocalization. (#4925)

- <svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description" focusable="false">
+ <svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false">

- <desc id="banner-lock-description">A locked padlock</desc>
+ <desc id="banner-lock-description">Locked padlock</desc>

usa-character-count

Improved screen reader experience. The character counter now includes a brief pause after input before announcing how many characters remain. Announcing the input no longer prevents the character counter from reading. Thanks @davidc-gds! (#4976)

usa-icon

Fixed potential incompatibility with ARM-based Macs. We updated our SVG sprite compiler. This should resolve potential dependency incompatibilities on computers with ARM processors. (#4665)

usa-identifier

⚠️ Use valid element for identity's aria label. We updated the identity section of the Identifier to use a section instead of a div so it's aria-label will apply to a valid element. (#4964)

- <div class="usa-identifier__identity" aria-label="Agency identifier">
+ <section class="usa-identifier__identity" aria-label="Agency identifier">
    ...
- </div>
+ </section>

usa-site-alert

Updated the alignment of the Alert and Site alert component content to visually match alignment with banner content. (#4922)

usa-tooltip

Tooltip allows for dynamic initialization. Tooltip now initializes on first interaction and checks if it has been initialized before toggling. If it hasn't initialized properly then it will call a setup attributes function. (#4955)

usa-validation

Updated the validation component so that users of assistive technologies can receive status updates about the completion of each validation requirement. This was done by adding a script that generates appropriate ARIA attributes. (#4914)

Dependency updates

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)

Internal only: 26 high vulnerabilities in devDependencies (development dependencies)

Release TGZ SHA-256 hash: 2cf071fe6af1d337c0a2bfe3fd930ea9396dae1130b7e3a7bafbfafb98e2492f