Skip to content

USWDS 3.5.0

Compare
Choose a tag to compare
@thisisdano thisisdano released this 09 Jun 21:20
· 1476 commits to main since this release
603df3c

What's new in USWDS 3.5.0

Features

Package A11y Breaking Description
usa-button, usa-dark-background, uswds-core —  Stopped using font smoothing. No longer use font smoothing for dark backgrounds and disabled buttons. (#5250)
usa-button, usa-checkbox, usa-date-picker, usa-pagination, usa-radio, usa-range, usa-search, uswds-core Yes  Improved legibility of buttons in forced colors mode. Added a consistent border in forced colors mode. (#5147)
usa-button, usa-checkbox, usa-combo-box, usa-date-picker, usa-date-range-picker, usa-file-input, usa-input, usa-input-mask, usa-input-prefix-suffix, usa-radio, usa-range, usa-select, usa-textarea, uswds-core Yes  Improved consistency of disabled styles in forced colors mode. (#5295)
usa-button, usa-checkbox, usa-combo-box, usa-date-picker, usa-date-range-picker, usa-file-input, usa-input, usa-input-prefix-suffix, usa-radio, usa-range, usa-select, usa-textarea, usa-time-picker, uswds-core Yes  Improved consistency and visibility of disabled styles. Disabled form inputs now use a consistent gray background. (#5063)

⚠️ We don't consider this a breaking change, but teams should check disabled form elements to assure that the new styles are working in their layouts.
usa-link, uswds-core Yes  Labeled external links for screen readers. Added a label for screen readers that identifies external links and if they open in a new tab. (#5166)
uswds-core Yes  Added settings for announcing external links. Added $theme-external-link-sr-label-tab-same and $theme-external-link-sr-label-tab-new to control how screen readers announce external links. (#5166)
usa-content, usa-paragraph, usa-prose, uswds-core —  Yes Removed usa-prose- mixins and placeholders from Sass. Users should instead use typeset- mixins in their place. This is a breaking change only if your project Sass uses usa-prose- mixins and placeholders. It does not affect the look of any usa-prose–styled element.(#5158)
uswds-core —  Added $theme-heading-margin-top and $theme-paragraph-margin-top system variables. (#5158)
uswds-core —  Yes Updated individual Sass map settings without affecting defaults. Now adjusting a single Sass map setting will no longer set all other values in the map to false. Users can now update only the map values they wish to change. This is a breaking change only if your project deactivated mapped settings by not declaring them. (#5216)
usa-accordion, usa-banner, usa-nav, uswds-core —  Added two new settings to customize accordion background colors. You can now customize accordion button and content background colors with $theme-accordion-button-background-color and $theme-accordion-background-color. (#5269)

Bug fixes

Package A11y Breaking Description
usa-header —  Removed the id attribute from the usa-logo element. (#5319)
usa-header —  Fixed a bug that caused inaccurate megamenu template markup. The markup in megamenu code examples now accurately includes the usa-megamenu class. (#5311)
usa-table Yes  Fixed a typo in the sortable table JavaScript that caused the aria-label in table headers to have an unnecessary single quote. (#5280)
uswds-core, uswds-utilities —  Removed unused utility builder comments from compiled CSS. This update significantly reduces the compiled file size. (#5209)
usa-tooltip —  Fixed a bug that removed default positioning. If the data-position attribute is not specified, the tooltip position will now default to "top". (#5228)
usa-in-page-navigation —  Fixed a bug that prevented links that start with a number from scrolling when clicked. (#5200)
usa-alert —  Removed redundant and invalid height declaration. (#5187)
usa-button Yes  Fixed a bug that caused button type attribute to render empty. (#5247)
usa-button Yes  Added spacebar trigger to links styled as buttons. Now any item that looks like a button will trigger with the spacebar, even if the element is a link. (#4385)
usa-card Yes  Yes Replaced button elements with links styled as buttons.

⚠️ This is marked as a breaking change because it changes the recommended card component markup to include <a href="#" class="usa-button"></a> for the call to action instead of a button element. (#4385)
usa-pagination Yes Yes Improved accessible markup of overflow ellipses. We replaced the role="presentation" with aria-label="ellipsis indicating non-visible pages" for usa-pagination__overflow items to better conform to WCAG 2.0 and 2.1.

⚠️ This is marked as a breaking change because it changes the recommended component markup. In the usa-pagination__overflow element, use aria-label="ellipsis indicating non-visible pages" instead of role="presentation". (#5197)
usa-file-input —  Fixed an issue with large file previews. Now adding large files no longer results in an infinite spinner. Adding large files should now result in an accurate preview. (#5114)
usa-file-input Yes  Improved the file input experience for voice command and screen reader users. Voice command users can now interact with the component by speaking the visible instructions text. Additionally, screen reader users now have access to both the instructions text and the file selection status. (#5213)
usa-combo-box Yes  Improved consistency of keyboard actions. Users can now to use Tab to escape the Combo box selection without making a choice, and Space to select the current highlighted option when within the dropdown menu. (#5160)
usa-accordion, usa-banner, usa-nav Yes  Adjusted forced colors mode styles to ensure visibility and increase consistency. Forced colors mode styles will now override the background color and display the button outline. The open/close icons now dynamically adjust to ButtonText colors. (#5286)
usa-identifier —  Yes Updated Accessibility statement link text. Updated the identifier to use the text "Accessibility statement" (EN) / "Declaración de accesibilidad" (ES) for the required link to an accessibility statement.

⚠️ This is a breaking change because it changes the content of the identifier. Earlier versions of the identifier will continue to work as expected. (#5278)
Guidance Yes  Updated guidance to suggest identifying required and optional fields. We added a new section on identifying required fields and now suggest labeling required fields with a red asterisk and optional fields with the word optional. (uswds/uswds-site#1834)

Dependencies and security

Dependency name Previous version New version
@chanzuckerberg/axe-storybook-testing 5.0.1 6.3.0
axe-core 4.3.4 4.6.3
extract-loader 5.1.0
webpack 5.58.1 5.76.0

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

1 moderate 29 high vulnerabilities in devDependencies (development dependencies)


Release TGZ SHA-256 hash: e0dbab25bffaaf02b3b7317690939d9e0e63bc5c824046e778de8f4c15227a9c