USWDS 3.6.0
What's new in USWDS 3.6.0
Features
| Package | A11y | Breaking | Description |
|---|---|---|---|
usa-in-page-navigation |
No | No | Updated JavaScript to exclude hidden headers from the in-page navigation link list. Any header with a style of display:none or visibility:hidden will now be excluded from the list of links in the component. (#5393) |
usa-in-page-navigation |
No | No | Added the optional data-main-content-selector attribute to the in-page navigation component. This attribute allows users to designate which element they want the component to pull headers from. If the attribute is not defined, the component will pull headers from the <main> element. (#5387) |
usa-select |
No | No | Added ellipses to overflow text in the multiple variant of the select component. This provides a clear indication to users that there is text that extends beyond the select width. (#5268) |
Bug fixes
| Package | A11y | Breaking | Description |
|---|---|---|---|
usa-button, usa-checkbox, usa-combo-box, usa-file-input, usa-input, uswds-core |
Yes | Yes | Updated default disabled color settings values. This change also fixed configuration errors with disabled color settings, added $theme-color-disabled-lighter and $theme-color-disabled-darker settings, and added disabled-lighter and disabled-darker tokens. |
usa-pagination |
Yes | Potentially | Updated the ellipsis color to meet color contrast requirements. Additionally, this change updated styles to respect the value added to $theme-pagination-background-color. Users should confirm that project pagination colors display as expected. (#5358) |
usa-card, uswds-core |
No | No | Fixed a bug that prevented $theme-card-border-width from accepting 0 or string tokens. (#5325) |
usa-combo-box, usa-input, usa-input-prefix-suffix, usa-range, usa-select, usa-textarea, uswds-core |
Yes | No | Fixed a bug that caused standard text input variants to show disabled styles in forced colors mode. Now the disabled border color only shows when the element is disabled. (#5397) |
usa-icon-list |
No | No | Updated icon list styles to allow $theme-body-font-size to accept 2xs and 3xs size tokens. (#5363) |
usa-input-mask |
Yes | No | Fixed a bug in input mask that caused the hover state to show disabled styling. This change also improved the legibility of the component in forced colors mode. (#5378) |
usa-memorable-date |
Yes | No | Updated memorable date styles to allow elements to wrap to multiple lines at narrow browser widths. (#5372) |
uswds-utilities |
No | No | Fixed a bug that caused font-[family]-[size] utility classes to not generate font-family rules. (#5388) |
Breaking changes
Warning
Disabled theme settings. This release updates USWDS disabled color settings and tokens to conform to our standard naming convention. If your project configures disabled color settings or uses disabled color tokens, you probably need to update your code. Here is a table showing how we reassigned disabled color values:
| Default value | Previously assigned to: | Now assigned to: |
|---|---|---|
| "gray-20" | $theme-color-disabled | $theme-color-disabled-lighter |
| "gray-40" | $theme-color-disabled-text-reverse | $theme-color-disabled-light |
| "gray-50" | $theme-color-disabled-text | $theme-color-disabled |
| "gray-70" | $theme-color-text-on-disabled | $theme-color-disabled-dark |
All references to the previous settings have been replaced with references to their corresponding new settings. This means that if you previously customized $theme-color-disabled, you should now instead assign that custom value to $theme-color-disabled-lighter. Additionally, all references to the “disabled” color token in your Sass should now be replaced with “disabled-lighter”.
Please note that all disabled states are now expected to meet minimum color contrast requirements for text (4.5:1). If you have customized any of the disabled color values, please confirm that your disabled elements meet these contrast standards.
Dependencies and security
| Dependency name | Previous version | New version |
|---|---|---|
| @18f/identity-stylelint-config | 1.0.0 | 2.0.0 |
| postcss | 8.4.0 | 8.4.19 |
| stylelint | 14.13.0 | 15.10.1 |
0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
4 moderate, 29 high vulnerabilities in devDependencies (development dependencies)
Release TGZ SHA-256 hash: a6c303c350063a1f42baa0de8f1c860d91b06fd85f330b947209a8886f0e290a