[Snyk] Upgrade @uswds/uswds from 3.6.1 to 3.9.0 #284

decause-gov · 2024-11-16T00:31:20Z

Snyk has created this PR to upgrade @uswds/uswds from 3.6.1 to 3.9.0.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

The recommended version is 6 versions ahead of your current version.
The recommended version was released on a month ago.

Release notes

Package name: @uswds/uswds

3.9.0 - 2024-10-04

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

3.8.2 - 2024-08-09
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

3.8.1 - 2024-05-31

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

3.8.0 - 2024-03-11

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

3.7.1 - 2023-12-08

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

3.7.0 - 2023-11-09

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

Snyk has created this PR to upgrade @uswds/uswds from 3.6.1 to 3.9.0. See this package in npm: @uswds/uswds See this project in Snyk: https://app.snyk.io/org/ospo/project/a3301fcd-4451-4596-810d-f3d49a964c23?utm_source=github&utm_medium=referral&page=upgrade-pr

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Snyk] Upgrade @uswds/uswds from 3.6.1 to 3.9.0 #284

[Snyk] Upgrade @uswds/uswds from 3.6.1 to 3.9.0 #284

Uh oh!

decause-gov commented Nov 16, 2024

What's new in USWDS 3.9.0

Features

Bug fixes

Dependencies and security

What's new in USWDS 3.8.2

Dependencies and security

What's new in USWDS 3.8.1

Bug fixes

Dependencies and security

Features

Bug fixes

Breaking changes

Documentation page template

Dependencies and security

What's new in USWDS 3.7.1

Features

Bug fixes

Dependencies and security

What's new in USWDS 3.7.0

Features

Bug fixes

Dependencies and security

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[Snyk] Upgrade @uswds/uswds from 3.6.1 to 3.9.0 #284

Are you sure you want to change the base?

[Snyk] Upgrade @uswds/uswds from 3.6.1 to 3.9.0 #284

Uh oh!

Conversation

decause-gov commented Nov 16, 2024

Snyk has created this PR to upgrade @uswds/uswds from 3.6.1 to 3.9.0.

What's new in USWDS 3.9.0

Features

Bug fixes

Dependencies and security

What's new in USWDS 3.8.2

Dependencies and security

What's new in USWDS 3.8.1

Bug fixes

Dependencies and security

Features

Bug fixes

Breaking changes

Documentation page template

Dependencies and security

What's new in USWDS 3.7.1

Features

Bug fixes

Dependencies and security

What's new in USWDS 3.7.0

Features

Bug fixes

Dependencies and security

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants