USWDS 3.10.0

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