USWDS 2.13.0

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! (#4314) And avoid instances of unquoted string interpolation. (#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. (#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. (#4411)

⚠️ Improve screenreader experience of Date Picker. Now screen readers can better describe the label and description of a date picker input. Thanks @mahoneycm! (#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