Skip to content

Update dependency uswds to v2.13.0 - autoclosed

igswsihw-wmadepbot requested to merge renovate/uswds-2.x into main

This MR contains the following updates:

Package Change Age Adoption Passing Confidence
uswds 2.12.1 -> 2.13.0 age adoption passing confidence

Release Notes

uswds/uswds

v2.13.0

Compare Source

What's new in USWDS 2.13.0

Breaking changes

⚠️ Note: This release contains a couple accessibility-related updates that require a manual markup change.

⚠️ Improved resilience of icon-only functionality. We updated a couple components that use icon-only buttons so that they provide a text equivalent if the image path is broken and does not load. Specifically, this applies to two specific components:

  • The small variant of the Search button: The button that includes an image of a magnifying glass
  • The social icons in the Footer: This includes the Facebook, Twitter, YouTube, Instagram, and RSS buttons.

If you use these components, they will require a markup change.

Small search button
Old markup
<button class="usa-button" type="submit">
  <span class="usa-sr-only">Search</span>
</button>
New markup as of 2.13.0
<button class="usa-button" type="submit">    
  <img src="{{ your uswds image path }}/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search">
</button>
Footer social buttons
Old markup
<a class="usa-social-link usa-social-link--facebook" href="{{ link }}">
  <span>Facebook</span>
</a>
<a class="usa-social-link usa-social-link--twitter" href="{{ link }}">
  <span>Twitter</span>
</a>
<a class="usa-social-link usa-social-link--youtube" href="{{ link }}">
  <span>YouTube</span>
</a>
<a class="usa-social-link usa-social-link--instagram" href="{{ link }}">
  <span>Instagram</span>
</a>
<a class="usa-social-link usa-social-link--rss" href="{{ link }}">
  <span>RSS</span>
</a>
New markup as of 2.13.0
<a class="usa-social-link" href="{{ link }}">
  <img class="usa-social-link__icon" src="{{ your uswds image path }}/usa-icons/facebook.svg" alt="Facebook">
</a>
<a class="usa-social-link" href="{{ link }}">
  <img class="usa-social-link__icon" src="{{ your uswds image path }}/usa-icons/twitter.svg" alt="Twitter">
</a>
<a class="usa-social-link" href="{{ link }}">
  <img class="usa-social-link__icon" src="{{ your uswds image path }}/usa-icons/youtube.svg" alt="YouTube">
</a>
<a class="usa-social-link" href="{{ link }}">
  <img class="usa-social-link__icon" src="{{ your uswds image path }}/usa-icons/instagram.svg" alt="Instagram">
</a>
<a class="usa-social-link" href="{{ link }}">
  <img class="usa-social-link__icon" src="{{ your uswds image path }}/usa-icons/rss_feed.svg" alt="RSS">
</a>

Other improvements and bug fixes

Fixed deprecation workings in our Sass compilation. Refactored our code to avoid division! (https://github.com/uswds/uswds/pull/4314) And avoid instances of unquoted string interpolation. (https://github.com/uswds/uswds/pull/4380) Thanks @​aduth!

File upload confirms files to screenreaders. Now File Input will tell screenreaders the total number of files and the names of files added to the component. (https://github.com/uswds/uswds/pull/4415)

Mobile navigation now makes background content inert. When the mobile navigation is active, all other non-nav content is hidden. This prevents accidentally leaving the focus of the active mobile menu. (https://github.com/uswds/uswds/pull/4411)

⚠️ Improve screenreader experience of Date Picker. Now screen readers can better describe the label and description of a date picker input. Thanks @​mahoneycm! (https://github.com/uswds/uswds/pull/4414)

This one needs a manual markup change:

Old Date Picker: Two IDs in aria-describedby

<label class="usa-label" id="{{ label ID }}" for="{{ input ID }}">{{ label text }}</label>
<div class="usa-hint" id="{{ hint ID }}">{{ hint text }}</div>
<div class="usa-date-picker">
    <input
        class="usa-input"
        id="{{ input ID }}"
        name="{{ input ID }}"
        type="text"
        aria-describedby="{{ label ID }} {{ hint ID }}"
        >
</div>

New Date Picker: Label ID in aria-labelledby and hint ID in aria-describedby

<label class="usa-label" id="{{ label ID }}" for="{{ input ID }}">{{ label text }}</label>
<div class="usa-hint" id="{{ hint ID }}">{{ hint text }}</div>
<div class="usa-date-picker">
    <input
        class="usa-input"
        id="{{ input ID }}"
        name="{{ input ID }}"
        type="text"
        aria-labelledby="{{ label ID }}"
        aria-describedby="{{ hint ID }}"
        >
</div>

Dependencies

Package Old New
@​18f/identity-stylelint-config — 1.0.0
chrome-launcher 0.14.1 0.15
eslint 7.32.0 8.4.1
eslint-config-airbnb-base 14.2.1 15.0.0
eslint-plugin-no-unsanitized 3.2.0 4.0.1
gulp-eslint 6.0.0 removed
gulp-stylelint 13.0.0 removed
jsdom 17.0.0 19.0.0
mocha 9.1.3 6.2.0
sinon 11.1.2 12.0.1
stylelint 13.13.0 14.1.0
stylelint-config-prettier 8.0.2 removed
stylelint-config-recommended-scss 4.3.0 removed
stylelint-prettier 1.2.0 removed
stylelint-scss 3.21.0 removed

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

Internal only: 8 low, 17 moderate, 12 high, 1 critical vulnerabilities in devDependencies (development dependencies)

Release ZIP SHA-256 hash: 34a951034e07288c6a23c2db3b9e54d6b5f11bec13b1484ca8a8ca8f3b013fbf

v2.12.2

Compare Source

What's new in USWDS 2.12.2

Improvements and bug fixes

Security and dependencies

  • Added automatic sanitizing. The design system now automatically sanitizes content in elements we compose with JavaScript. This means that components like Combobox, Tooltip, File Input, and Date Picker will sanitize any content passed to them. This helps protect any design system implementation against malicious XSS attacks through these components. (https://github.com/uswds/uswds/pull/4329)

Dependencies

Package Old New
@​babel/preset-env 7.15.0 7.15.8
@​types/node 16.6.1 16.11.6
autoprefixer 10.3.1 10.3.7
axe-core 4.3.2 4.3.4
chrome-launcher 0.14.0 0.14.1
eslint-plugin-import 2.24.0 2.25.2
eslint-plugin-no-unsanitized 3.1.5 3.2.0
gulp-postcss 9.0.0 9.0.1
mocha 9.0.3 9.1.3
postcss 8.3.6 8.3.11
prettier 2.3.2 2.4.1
sass 1.38.0 1.43.4
snyk 1.683.0 1.746.0
stylelint-scss 3.20.1 3.21.0
typescript 4.3.5 4.4.4
yargs 17.1.1 17.2.1

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

Internal only: 2 low, 12 moderate, 14 high, 1 critical vulnerabilities in devDependencies (development dependencies)

Release ZIP SHA-256 hash: 2c4a794c11dca65db04d6552312241ae6c397b7fd4ea5c8094698461d8d3f687

Configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this MR and you won't be reminded about this update again.

  • If you want to rebase/retry this MR, click this checkbox.

This MR has been generated by Renovate Bot.

Edited by igswsihw-wmadepbot

Merge request reports