Skip to content

Releases: uswds/uswds

USWDS 3.10.0

13 Nov 18:59
@thisisdano thisisdano
v3.10.0
c73e552
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.10.0 Latest
Latest

What's new in USWDS 3.10.0

Features

Package A11y Breaking Markup change Description
usa-combo-box - - - Updated the order of combo box search results. The component now displays options that start with the query at the top of the list, followed by options that contain the query. This behavior more closely aligns with user expectation. (#6122)

Bug fixes

Package A11y Breaking Markup change Description
usa-checkbox - - - Removed inline style tags from indeterminate checkbox SVGs. These style tags were unnecessary and caused a conflict with Cypress automated testing. (#6162)

✏️ Teams should update the checkbox-indeterminate.svg and checkbox-indeterminate-alt.svg files in their projects.
usa-file-input - - - Fixed a bug that caused file input image previews to break when a Content Security Policy is enabled. The component now uses event listeners in place of inline JavaScript to handle error states. Thanks @jeffpw-goog! (#5997)
usa-model - - - Fixed a bug that prevented the modal package from bundling with a custom prefix. The component no longer uses hard-coded class names in its JavaScript. Thanks @sanason! (#6026)
usa-step-indicator Yes - Yes Removed the aria-label from the wrapper of the step indicator component. This resolves an automated testing error related to having an invalid attribute on a div element. (#6146)

✏️ Teams should remove the the aria-label from the .usa-step-indicator element in their step indicator markup.
usa-time-picker Yes - Yes Updated the time picker hint text to improve clarity. This update allows the component to meet the success criteria in WCAG 3.3.2. (#6147)

✏️ Teams should replace the words "hh:mm" in the time picker hint text with "Select a time from the dropdown. Type into the input to filter options."

Markup changes

Step indicator

To remove automated testing errors, teams should update the step indicator markup to remove the aria-label on the usa-step-indicator element:

- <div class="usa-step-indicator" aria-label="progress">
+ <div class="usa-step-indicator">

Time picker

If teams are using "hh:mm" in their time picker hint text, they should update the text to "Select a time from the dropdown. Type into the input to filter options.":

- <div class="usa-hint">hh:mm</div>
+ <div class="usa-hint">Select a time from the dropdown. Type into the input to filter options.</div>

Dependencies and security

Dependency updates

Dependency name Previous version Updated version
object-assign 4.1.1 --

Dev Dependency updates

Dependency name Previous version Updated version
@babel/core 7.25.2 7.25.7
@babel/preset-env 7.25.4 7.25.7
browserify 17.0.0 17.0.1
eslint-plugin-import 2.30.0 2.31.0
eslint-plugin-no-unsanitized 4.1.0 4.1.2
postcss 8.4.45 8.4.47
sass 1.78.0 1.79.4
sass-embedded 1.78.0 1.79.4
snyk 1.1293.0 1.1293.1
twig-html-loader 0.1.9 --
webpack 5.94.0 5.95.0

Thanks @aduth and @anselmbradford for contributing to our dependency updates!

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
29 moderate, 26 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: fdd1f9fc4cbfeb0fca7feeba1c94b205ba4ee22d03f63bb916c8750982715fb7

Contributors

anselmbradford, aduth, and 2 other contributors
Assets 3
Loading
0 Join discussion

USWDS 3.9.0

04 Oct 22:31
@mahoneycm mahoneycm
v3.9.0
32da2de
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.9.0

What's new in USWDS 3.9.0

Features

Package A11y Breaking Markup change Description
usa-character-count - - - Enhanced the visual cue when maxlength is exceeded in the character count component. Now, the component uses standard USWDS error styles to visually enhance the error state. (#5908)
usa-date-picker, usa-date-range-picker Yes - - Added aria-disabled to the list of expected attributes in the date picker and date range picker components. Now, the component will disable toggle when the aria-disabled attribute is present. (#6013)
uswds-core, usa-layout-grid - - - Added new $theme-utility-breakpoints-custom setting. This setting generates responsive variants of USWDS utilities at custom breakpoints. Values must be set with px values inside a Sass map. Thanks @jamigibbs! (#6048)

Bug fixes

Package A11y Breaking Markup change Description
usa-alert, usa-site-alert - Yes - 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. (#5636)

⚠️ Considered breaking because the alignment and display of the alert may shift.
usa-button - Yes - Updated the width of unstyled buttons at narrow screen widths. Now, unstyled buttons receive a width of auto to better match USWDS link styles. Users should confirm that the variant visually displays as expected in their projects. Thanks @aduth! (#5631)

⚠️ Considered breaking because the display of unstyled buttons will change at narrow screen widths. Check your codebase for any instances of @include button-unstyled in your custom styles. These items may be affected by this change.
usa-card - Yes - Fixed a bug that caused the component to ignore the $theme-card-font-family setting. Confirm that your implementation of the card component displays with the expected font family. (#5974)

⚠️ Considered breaking because fonts in cards may change if you've set $theme-card-font-family.
usa-combo-box Yes - - Removed custom screen reader instructions in the combo box component. Combo box now relies on the default instructions provided by screen readers. (#6022)
usa-date-picker, usa-date-range-picker Yes - - Fixed a bug that caused mouseover events to prevent keyboard navigation. Now when you hover your mouse over the date picker buttons, only the hover state will be triggered. (#5774)
usa-header Yes Yes - Removed the CSS order property from the mobile view in standard variants of the header component. Now, the visual order of the component matches the tab order. If you would like to visually keep the search bar at the top of the menu, you will need to reorder your markup in the mobile view. (#6037)

⚠️ Considered breaking because the position of the search bar will change in the mobile menu.
usa-footer, templates Yes - Yes Added the autocomplete="email" attribute to the big footer variant and the "Create an account" template. This attribute allows the components to meet the standards outlined in WCAG 1.3.5. (#6002)

✏️ Teams should update their markup if they use an email field in their big footer.
usa-identifier - - Yes Updated the USA.gov link in Spanish versions of the identifier. The link text now reads "Visite USAGov en Español" and the link url is now "https://www.usa.gov/es/". (#5892)

✏️ Teams should update this text if they use the Spanish-language identifier.
usa-memorable-date Yes - Yes Removed numeric representation of months in the memorable date component. Recent usability testing indicated that having both numbers and names to represent months was confusing for screen reader users. (#6028)

✏️ Teams should update their memorable date component to remove the leading numbers.
usa-pagination Yes - - Added text underline styles to pagination links. Pagination links are now visually consistent with other USWDS text links. (#5970)

Dependencies and security

Dependency name Previous version Updated version
@18f/identity-stylelint-config 4.0.0 4.1.0
@babel/core 7.24.5 7.25.2
@babel/preset-env 7.24.5 7.25.4
@types/node 20.12.11 20.14.10
autoprefixer 10.4.19 10.4.20
axe-core 4.9.1 4.10.0
babel-loader 9.1.3 --
eslint-plugin-import 2.29.1 2.30.0
eslint-plugin-no-unsanitized 4.0.2 4.1.0
gulp-changed 4.0.3 --
gulp-clean 0.4.0 --
gulp-cli 2.3.0 --
mocha 10.4.0 10.7.3
normalize.css 8.0.1 --
path 0.12.7 --
postcss 8.4.38 8.4.45
postcss-preset-env 9.5.11 9.6.0
prettier 3.2.5 3.3.3
sass 1.77.0 1.78.0
sass-embedded 1.77.0 1.78.0
snyk 1.1291.0 1.1293.0
stylelint 16.5.0 16.9.0
typescript 5.4.5 5.6.2
webpack 5.91.0 5.94.0

Thanks @aduth for contributing to our dependency updates and @skyf0l for fixing a typo in our package.json!

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
29 moderate, 26 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: 140cb2162e6c60a6a6ecbc71d8d047819d4ec26f9dd6c7056bd4bd8a266af2ab

Contributors

jamigibbs, aduth, and skyf0l
Assets 3
Loading
0 Join discussion

USWDS 3.8.2

09 Aug 21:32
@amyleadem amyleadem
v3.8.2
0eed4b9
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.8.2

What's new in USWDS 3.8.2

Dependencies and security

Removed the classlist-polyfill dependency. This update resolves a Denial of Service (DoS) vulnerability related to the classlist-polyfill dependency that we do not consider exploitable on the front end of applications. (#6012)

Important

This release may affect some functionality in Internet Explorer 11 (IE11). This update removes the polyfill that added full classList support to IE11. USWDS no longer supports IE11, but if your project does, test if this update negatively affects your users and add additional support for classList if it does.

Dependency name Previous version New version
classlist-polyfill 1.2.0 --

Thanks @aduth for the initial work on removing this dependency.

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
5 low, 11 moderate, 44 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: 94049e150c2a67dfdb75f140fc664d2e936ef652480a2f88dfdd96922e0a940c

Contributors

aduth
Assets 3
Loading
0 Join discussion

USWDS 3.8.1

31 May 18:29
@thisisdano thisisdano
v3.8.1
967d5b4
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.8.1

What's new in USWDS 3.8.1

Bug fixes

Package A11Y Breaking Markup change Description
usa-button-group — — — Improved styles for nested button groups. Now, nested button groups should match the height of their parents. (#5885)
usa-footer — — — Restored the usa-layout-grid dependency in the footer package and removed layout grid styles from the footer stylesheet. This update prevents visual regressions in footer and other components with layout grid utility classes in their markup. (#5930)
usa-identifier — — Yes Fixed a bug that added the English word "An" to Spanish variants of the identifier component. This was accidentally added to our component preview templates because of a data error. (#5857)
usa-in-page-navigation — — — Updated an outdated reference to the data-header-selector attribute in an in-page navigation JavaScript error message. The error message now correctly references the data-heading-elements attribute. (#5856)
usa-input-mask — — — Fixed a bug that caused input mask to break when it is not a direct child of a form. Nested input masks will now initialize and work properly. Thanks @chrislarrycarl! (#5518)
usa-tooltip Yes — — Updated the behavior of the tooltip component to allow users to hover over tooltip content. This allows the component to meet the "hoverable" standard outlined in WCAG 1.4.13. (#5919)
usa-tooltip Yes — — Updated tooltip component behavior to close active tooltips when the escape key is pressed. This allows the component to meet the "dismissible" standard outlined in WCAG 1.4.13. (#5909)
usa-validation Yes — — Fixed a bug that caused non-interactive checklist items in the validation component to receive focus. Now, only the interactive input will receive focus. (#5835)
uswds-utilities — — — Updated the code comments on utility Sass partials. These comments now reflect the correct utility class names and values. Thanks @aduth! (#5859)

Dependencies and security

Dependency name Previous version New version
@18f/identity-stylelint-config 2.0.0 4.0.0
@babel/core 7.23.6 7.24.5
@babel/preset-env 7.23.6 7.24.5
@types/node 20.10.4 20.12.11
autoprefixer 10.4.16 10.4.19
axe-core 4.8.2 4.9.1
eslint 8.55.0 8.56.0
eslint-plugin-import 2.29.0 2.29.1
html-webpack-plugin 5.5.4 5.6.0
mocha 10.2.0 10.4.0
postcss 8.4.32 8.4.38
postcss-discard-comments 6.0.0 6.0.2
postcss-preset-env 9.3.0 9.5.11
prettier 2.8.8 3.2.5
sass 1.69.5 1.77.0
sass-embedded 1.69.5 1.77.0
snyk 1.1262.0 1.1291.0
stylelint 15.11.0 16.5.0
svgo 3.1.0 3.3.2
typescript 5.3.3 5.4.5
webpack 5.89.0 5.91.0

Thanks @anselmbradford for the dependency updates!

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
13 moderate, 28 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: a86fa133b842ce28d1eed2226216c478debf31bf6c16ffcd96fecf061fdf4583

Contributors

anselmbradford, aduth, and chrislarrycarl
Assets 3
Loading
0 Join discussion

USWDS 3.8.0

11 Mar 21:44
@mejiaj mejiaj
v3.8.0
71d27d1
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.8.0

Features

Package A11y Breaking Markup change Description
usa-checkbox, uswds-core - - - Added styles for indeterminate checkboxes. Checkboxes will now display as indeterminate when you set input.indeterminate = true via JavaScript or add the data-indeterminate attribute. This is only a style addition and does not affect checkbox functionality. Thanks @lpsinger! (#5713)
usa-in-page-nav - - - Added the ability to customize which headings will be pulled into the in-page navigation link list. Use the optional data-heading-selector attribute to designate the heading levels that should be included in the component. By default, the component will pull all H2 and H3 headers. (#5444)
usa-table, uswds-core - - - Added a sticky header variant to the table component. Use the new .usa-table--sticky-header class to enable sticky positioning on table headers. Use the new $theme-table-sticky-top-offset setting to set the value of the top offset for sticky table headers. (#5420) Thanks @etanb!
usa-table, uswds-core       Added the ability to customize the table background color at a theme level. Use the $theme-table-background-color setting to set your desired table background color. (#5420)
usa-validation - - - Added textarea support to the validation component. (#5233) Thanks @danbrady!
usa-layout-docs, uswds-core Yes Yes Yes Added $theme-sidenav-reorder for documentation page sidenav. Use $theme-sidenav-reorder to support old CSS order functionality. This setting can introduce usability issues, so we suggest that teams update their sidenav markup instead. (#5807)

Bug fixes

Package A11y Breaking Markup change Description
usa-button, uswds-core - - - Improved the vertical alignment of usa-icon elements inside of usa-button. Use the new $theme-button-icon-gap setting to set the width of the horizontal gap between the button's text and icon. (#5398)
usa-button, usa-checkbox, usa-combo-box, usa-file-input, usa-radio, uswds-core Yes - - Added automated color contrast checks for disabled tokens. On compilation, USWDS will test disabled element color contrast and provide a fallback color if minimum contrast is not met. If the fallback also fails to meet minimum contrast requirements, the system will provide a warning in the terminal. (#5455)
usa-button-group - - - Improved the appearance of button groups when button text wraps to multiple lines. Now, every button in the group will be the same height. (#5657) Thanks @aduth!
usa-date-picker Yes - - Added focus styles to the calendar button in high contrast mode. Now, the calendar icon changes to the highlight high contrast token on focus. (#5701)
usa-footer - - - Fixed a bug that caused some grid utility classes to be ignored when used inside usa-footer. (#5675)
usa-layout-docs, uswds-core Yes Yes Yes Updated the order of the side navigation markup on the documentation page template. Now, the HTML order of the page matches the visual order at narrow screen widths. (#5794)
usa-table Yes - Yes Simplified the structure of the scrollable table component example. This removes some accessibility errors related to incomplete table markup. (#5783)

Breaking changes

Documentation page template

We're updating the documentation template to better match the HTML order of the side navigation to the visual order at mobile widths. Before USWDS 3.8.0 we used CSS to re-order the sidenav at mobile widths, placing it below the page's main text content. Starting with USWDS 3.8.0, our default styles no longer use CSS to re-order the side navigation. Now, we suggest including a duplicate sidenav after the main text content, using utility classes to hide/show the sidenavs at the proper widths. The example below shows a before/after.

<div class="grid-container">
  <div class="grid-row grid-gap">
-   <div class="usa-layout-docs__sidenav">
+   <!-- One of two sidenav's only shown in desktop breakpoints. --> 
+   <div class="usa-layout-docs__sidenav display-none desktop:display-block desktop:grid-col-3">
      {{ SIDENAV_MARKUP }}
    </div>
-   <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
+   <main class="desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content">
      {{ MAIN_CONTENT }}
    </main>
  </div>
+ <!-- New duplicate section only shown on mobile. -->
+  <div class="usa-layout-docs__sidenav desktop:display-none">
+    {{ SIDENAV_MARKUP }}
+  </div>
</div>

Teams that wish to maintain the old CSS order functionality can temporarily add $theme-sidenav-reorder: true to their project settings. This setting reinstates the CSS re-ordering. As we mentioned, this setting can introduce usability issues, so the best long-term solution is to update the sidenav markup instead.

Dependencies and security

Dependency name Previous version New version
@babel/core 7.23.2 7.23.6
@babel/preset-env 7.23.2 7.23.6
@types/node 20.8.9 20.10.4
eslint 8.52.0 8.55.0
eslint-config-prettier 9.0.0 9.1.0
gulp-mocha 8.0.0 9.0.0
handlebars-helpers 0.10.0 --
html-webpack-plugin 5.5.3 5.5.4
postcss 8.4.31 8.4.32
postcss-import -- 15.1.0
postcss-preset-env 9.2.0 9.3.0
postcss-sass-loader 1.1.0 --
resolve-url-loader 4.0.0 5.0.0
sass -- 1.69.5
snyk 1.1237.0 1.1262.0
svgo 3.0.2 3.1.0
typescript 5.2.2 5.3.3

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
15 moderate, 25 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: 072f0f8333b1aa000183e00676616d9ff5a174e27ca8d35c130ca70ea5d4f66d

Contributors

danbrady, etanb, and 2 other contributors
Assets 3
Loading
0 Join discussion

USWDS 3.7.1

08 Dec 23:06
@mejiaj mejiaj
v3.7.1
f6a7d34
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.7.1

What's new in USWDS 3.7.1

Features

Package A11Y Breaking Markup change Description
usa-footer — — — Removed the usa-layout-grid dependency from the usa-footer package. This update reduces the footer package size. Thanks @danbrady! (#5289)

If you notice changes in your layout after making this update, your Sass might be missing the usa-layout-grid package. You can include it by adding @forward usa-layout-grid to your Sass entry point.

Bug fixes

Package A11Y Breaking Markup change Description
usa-banner — — — Removed invalid styles from the banner component. These styles had no effect and were safely removed. Thanks @aduth! (#5587)
usa-dark-background, usa-section Yes — — Fixed :visited link styling in usa-section--dark elements. Thanks @aduth! (#5567)
usa-footer — — — Fixed the right alignment of footer elements. Footer content should now align with other page elements. Thanks @danbrady! (#5234)
usa-header, usa-nav — — — Fixed the horizontal alignment of header submenu elements. Now, usa-nav__submenu elements should align with other header elements. Thanks @lpsinger! (#5649)
usa-nav — — — Fixed the vertical alignment of the expand icon on header navigation items. The icon will now maintain vertical alignment when menu button text breaks to multiple lines. Thanks @aduth! (#5654)
usa-nav — — — Fixed a bug that caused long button text to overflow into its padding. Now, button text breaks to multiple lines as expected and maintains vertical center alignment. (#5655)
usa-nav — — — Fixed a bug that prevented $theme-max-header-width from accepting a value of "none". (#5624)
uswds-core — — — Fixed a bug that prevented the CSS from generating .left-full, .right-full, and .top-full utility classes. (#5633)

Dependencies and security

Dependency name Previous version New version
jsdom 19.0.0 22.1.0

Thanks @deckar01 for contributing this dependency update!

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install @uswds/uswds)
24 moderate, 27 high vulnerabilities in devDependencies (development dependencies).

Release TGZ SHA-256 hash: 6e1d3032e1a7ac614d05fe76c87cc398725d84e5ba0656a7a17c6ca4c7579526

Contributors

danbrady, lpsinger, and 2 other contributors
Assets 3
Loading
0 Join discussion

USWDS 3.7.0

09 Nov 22:58
@thisisdano thisisdano
v3.7.0
0504cde
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.7.0

What's new in USWDS 3.7.0

Items we've identified with a Markup change have a non-breaking change in their component markup. Teams should update their implementations and templates to reflect this change.

Features

Package A11y Breaking Markup change Description
usa-banner — — — Updated the banner component so that it initializes without requiring import of the usa-accordion package. (#5551)
usa-banner — — — Optimized the us_flag_small.png icon and added a vector us_flag.svg icon. Update this asset in your project for improved image quality. Thanks @aduth! (#5542)
usa-data-picker Yes — — Improved keyboard navigation for screen readers in the date picker component. This change enables table navigation controls in the calendar, which creates more consistent and intuitive navigation across browsers and screen readers. (#5374)
usa-icon — — — Added the X social media icon. We added the X social media icon, but also preserved the legacy Twitter icon to allow teams to make the decision on when to update their social media information. (#5589)
usa-modal — — — Updated modal JavaScript to include fallbacks and error messages when initialization cannot be completed. This update also prevented errors when trying to initialize modal twice. (#5315)

Bug fixes

Package A11y Breaking Markup change Description
usa-card — — — Fixed a bug that prevented $theme-card-padding-y from accepting expected token values. (#5571)
usa-footer Yes — — Restored underlines to footer links in default states. Now, footer links meet WCAG 2.0 AA requirements. (#5588)
usa-identifier Yes — Yes Updated the screen reader readout to say "Official" instead of "An official". When read out on a screen reader, the statement "An official website of [Agency name]" can sound like "UNofficial website of [Agency name]". To minimize confusion, we hid the word "An" from screen readers with aria-hidden. To improve the screen reader experience, update your component markup. (#5491)
usa-range Yes — Yes Removed redundant ARIA attributes on the range component to improve the screen reader experience. To incorporate these changes, update your range component markup. (#5413)
usa-range Yes — Yes Added optional data-text-unit and data-text-preposition attributes to range slider. When used alongside the max attribute, the optional data-text-unit attribute adds language for the unit type. For example, adding a value of "stars" enables a readout like "3.5 stars of 5". The optional data-text-preposition creates the ability to customize the language of the preposition "of" in that string. (#5472)
usa-site-alert — — — Removed the top margin from the site alert component. Thanks @lpsinger! (#5550)
uswds-core — — — Fixed a bug that prevented $theme-site-margins-width from accepting expected token values. (#5582)

Dependencies and security

Updated the default node version from 16 to 20. (#5560)

Dependency name Previous version New version
classlist-polyfill 1.0.3 1.2.0
@babel/core 7.16.7 7.23.2
@babel/preset-env 7.16.7 7.23.2
@chanzuckerberg/axe-storybook-testing 6.3.0 6.3.1
@material-design-icons/svg 0.11.1 0.14.13
@storybook/addon-a11y 6.5.12 6.5.16
@storybook/addon-essentials 6.5.12 6.5.16
@storybook/addon-links 6.5.12 6.5.16
@storybook/builder-webpack5 6.5.12 6.5.16
@storybook/html 6.5.12 6.5.16
@storybook/manager-webpack5 6.5.12 6.5.16
@types/node 16.11.19 20.8.9
ansi-colors 4.1.1 4.1.3
autoprefixer 10.4.1 10.4.16
axe-core 4.6.3 4.8.2
babel-loader 8.2.2 9.1.3
css-loader 6.2.0 6.8.1
eslint 8.4.1 8.52.0
eslint-config-prettier 8.3.0 9.0.0
eslint-plugin-import 2.25.4 2.29.0
eslint-plugin-no-unsanitized 4.0.1 4.0.2
fancy-log 1.3.3 2.0.0
gulp-replace 1.1.3 1.1.4
handlebars-helpers 0.9.8 0.10.0
html-webpack-plugin 5.4.0 5.5.3
postcss 8.4.19 8.4.31
postcss-csso 6.0.0 6.0.1
postcss-discard-comments 5.0.1 6.0.0
postcss-loader 6.1.1 7.3.3
postcss-preset-env 7.4.2 9.2.0
prettier 2.4.1 2.8.8
sass-embedded 1.58.3 1.69.5
sass-loader 12.1.0 13.3.2
snyk 1.1064.0 1.1237.0
style-loader 3.3.0 3.3.3
stylelint 15.10.1 15.11.0
svgo 2.8.0 3.0.2
twigjs-loader 1.0.2 1.0.3
typescript 4.4.4 5.2.2
webpack 5.76.0 5.89.0
webpack-cli 4.9.1 5.1.4

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

24 moderate, 27 high vulnerabilities in devDependencies (development dependencies)

Release TGZ SHA-256 hash: 3806aed4a1affb5dd66fda8a0ecef3c56240242117d7172647c2f1e04c7f62e0

Contributors

lpsinger and aduth
Assets 3
Loading
0 Join discussion

USWDS 3.6.1

29 Sep 19:17
@thisisdano thisisdano
v3.6.1
6658fde
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.6.1

What's new in USWDS 3.6.1

Bug fixes

Package A11y Breaking Description
usa-banner No No Improved horizontal alignment in the icon-dot-gov.svg icon. (#5370)
usa-breadcrumb No No Fixed a bug that prevented text from wrapping to a new line in the .usa-breadcrumb--wrap variant. (#5497)
usa-card No No Fixed a margin bug on header-first variants that caused exdent card media to overlap headers. (#5423)
usa-checkbox, usa-radio, uswds-core Yes No Updated radio and checkbox tile styling to have lighter borders. The border colors now more closely resemble the border colors in release 3.4.0. (#5494)
usa-header No No Fixed a Safari-only bug that caused the mobile menu to unexpectedly close at a narrow range of window widths. (#5443)
usa-modal No No Updated how the modal JavaScript resets body padding and improved body padding detection. Now the component will rely on the CSS to reset body padding rather than injecting an inline style with JavaScript. (#5493)
usa-table, uswds-core Yes No Fixed a bug that prevented VoiceOver from reading stacked table content while using Safari. ( #5477)
usa-tooltip No No Restored the opacity: 0 style rule to the tooltip body's initial state. This prevents the component from flickering if its position needs to be recalculated. (#5475)

Dependencies and security

No dependency updates.

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: 01d5885a524db30d826dff9c67cd4ac66e431ffc86f01f3a9672f096da9ac7fa

Assets 3
Loading
0 Join discussion

USWDS 3.6.0

23 Aug 21:45
@amyleadem amyleadem
v3.6.0
eb8e4d4
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
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.

⚠️ The names and values of disabled settings and tokens have changed and will need to be updated if they are customized in your project. See the "Breaking changes" section below for more details. (#5402)
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

Assets 3
Loading
0 Join discussion

USWDS 3.5.0

09 Jun 21:20
@thisisdano thisisdano
v3.5.0
603df3c
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
USWDS 3.5.0

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

Assets 3
Loading
0 Join discussion