2.10.1
What’s new in USWDS 2.10.1
Bugfixes and updates
Fix automatic accessible color picker: Now the accessible color picker will properly pick the correct text color from a given background color. It will also throw warnings instead of errors if accessible combinations aren't found. (#3906 and #3926)
| New or |
Default | Description |
|---|---|---|
| $theme-body-background-color | "white" |
Background for the page body |
| $theme-text-color | "ink" |
Page text color |
| $theme-text-reverse-color | "white" |
Text color with dark backgrounds |
| $theme-alert-text-color | default (uses whatever is set for $theme-text-color) |
Text color for light-background alerts |
| $theme-alert-text-reverse-color | default (uses whatever is set for $theme-text-reverse-color) |
Text color for dark-background alerts |
| $theme-alert-link-color | default (uses whatever is set for $theme-link-color) |
Link color for light-background alerts |
| $theme-alert-link-reverse-color | default (uses whatever is set for $theme-link-reverse-color) |
Link color for dark-background alerts |
default (uses whatever is set for $theme-body-background-color) |
Background color for the breadcrumb | |
| $theme-identifier-primary-link-color | default (system picks between $theme-alert-link-color and $theme-alert-link-reverse-color depending on the background color) |
Color of the links in the identifier masthead |
Allows svg4everybody polyfill to compile properly in React and Vue: Now React and Vue applications won't crash with a TypeError caused by svgforeverybody. (#3909)
Properly give an accessible name to the combobox: Now the combobox will have an accessible name as long as the label's for attribute matches the id of the input.usa-combo-box or input.usa-time-picker. (#3900)
Fix styling in collection calendars: Removes a thin white line which could appear at the top of calendars in collection items. (#3917)
Fix a radio/checkbox focus outline bug on Firefox. Removes unwanted text indent from checkbox and radio input, which was causing the focus outline to be improperly sized on Firefox. (#3916)
Utilize $theme-alert-icon-size variable for setting the alert icon size: Now the setting works as expected. Thanks @sawyerh! (#3942)
⚠️ NOTE: This changes the value of the$theme-alert-icon-sizedefault to5from4.
Adds an instagram social icon to our default footer. (#3948)
Updates all icons used by components to the new icon set. (#3992)
Fixes left padding for anchor links in the sidenav. Thanks @fsierra! (#3944)
Fixes the import path for the usa-icons package. Thanks @jennyychaa! (#3954)
Fixes a secondary nav display bug in the header in Safari: Now the search component and the secondary nav display and resize properly in Safari. Thanks @akanelson! (#3805)
p instead of an h3 for usa-footer__logo-heading since the name of the project or agency is hot a heading in this context.
Properly wrap the wrapped breadcrumb on Safari: Now the usa-breadcrumb--wrap breadcrumb variant will wrap properly on Safari, instead of overflowing. (#3997)
Update project's version of Node to the most current LTS (14.15.4).
Dependencies
- Adds
sass-true@6.0.1for Sass unit testing - Updates
snykto1.439.1 - Updates
@frctl/fractalto1.5.4 - Updates
@frctl/nunjucksto2.0.8
0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)
5 low, 2 high vulnerabilities in devDependencies (development dependencies)