Update dependency uswds to v2.13.0 - autoclosed

This MR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
uswds	2.12.1 -> 2.13.0

---

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

• Fixed a duplicate-file bug in File Input. If a file with the same name was uploaded in two separate file input fields, the preview spinner would spin indefinitely. We now assign each upload an individual ID, and the image preview loads properly. (https://github.com/uswds/uswds/pull/4313) Thanks @​mahoneycm!
• Added ability to add a custom error message for wrong file type error in File Upload. Add the data attribute data-errorMessage to usa-file-input to include a custom error message. (https://github.com/uswds/uswds/pull/3890) Thanks @​hilvitzs!
• Fixed external link icon color. We resolved an issue with visited links where the icon color may not match the color of the link. (https://github.com/uswds/uswds/pull/4297) Thanks @​aduth!
• Removed extraneous href from Collection calendar. The usa-collection__calendar-date should not include an href, so we removed it. (https://github.com/uswds/uswds/pull/4308) Thanks @​mahoneycm!

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.