Skip to content

2.7.1

Compare
Choose a tag to compare
@thisisdano thisisdano released this 17 Jun 18:58
1b6984f

What's new in USWDS 2.7.1

Improvements to combo box

We listened to your feedback and made a number of improvements and upgrades to our new combo box.

Show proper focus in combo box. Hover and keyboard events transfer focus to individual options, and now the styling reflects that. (#3493)

Disabled combo boxes remain disabled after enhancement. The disabled attribute now correctly results in a disabled combo box. (#3484)

Use data attributes to set combo box placeholder and default. We now use data attributes to set the default value (data-default-value) and placeholder (data-placeholder). (#3486)

Improved combo box interactions. Allows list toggling with the toggle button, and adds a "clear input" button to start a subsequent combo box interaction. Makes a number of additional improvement to how the combo box handles changes and new selections. (#3505)

Combo box now triggers a change event on input and select change. Now we fire proper change events on the <select>. Thanks @ConnorDY! (#3487)

We fixed the punctuation on the default combo box. Now there's no more colon, consistent with other input guidance. (#3473)

The combo box scrollbar works. Now you can scroll a combo box with the scrollbar! (#3483)

Other improvements and bug fixes

Improved the reliability and cross-browser compatibility of our flexbox usage. We rebuilt how the design system outputs its flex utilities and mixins so any flex-based rules display properly and as expected in browsers from IE11 up. (#3480)

Improve display of media block. This element now uses flexbox instead of floats, so text in a media block is no longer cut occasionally cut off at the end of a line in IE11. Thanks @maya! (#3453)

Mobile menus can now be closed with the esc key in IE11. Now, the escape key will properly close mobile menus in IE11. Thanks @joncasey! (#3468)

Improved our Autoprefixer and Browserslist settings. We added not dead to our Autoprefixer settings and now use a .browserslistrc file for these options. This gets us more in line with Autoprefixer and Browserslist best practices. Thanks @ai! (#3458)

Fixed IE11 display issue in mobile nav. Now nav elements display as expected at mobile width on IE11. (#3470)

Fixed a potential Unhandled rejection Parsing error in the codebase. Thanks @hursey013! (#3497)

Added role="img" to SVG images. Thanks @sslawrence521! (#3501)

Fixed spacing in nested lists. Now nested lists will have proper formatting and spacing regardless of the value of $theme-global-content-styles. Thanks @jonraedeke! (#3495)

Fixed a color contrast issue in our accent-cool button. Now all our buttons have the proper AA contrast between the button background and the button text. And we've built our code to be smart enough to adjust the text color to adapt to any project's theme color definitions. (#3492)

To better provide resilience in our color contrast, we're introducing two new mixins to help provide a more resilient codebase:

@include set-text-from-bg( 
  background-color, 
  preferred-text-color, 
  fallback-text-color, 
  WCAG-level
)

@include set-text-and-bg( 
  background-color, 
  preferred-text-color, 
  fallback-text-color, 
  WCAG-level
)

preferred-text-color default: "white"
fallback-text-color default: "ink"
WCAG-level default: "AA"

WCAG-levels:
  "AA"
  "AA-large"
  "AAA"

For a given background-color token, each mixin checks contrast against the preferred-text-color and uses that as the text color unless it doesn't pass the contrast requirements of the WCAG-level. Then it checks fallback-text-color and uses that color unless it doesn't meet contrast requirements, in which case it returns an error.

set-text-from-bg(): Sets only the text color.
set-text-and-bg(): Sets both the background color and the text color.

Dependencies and security

package old new
@types/node 13.9.1 13.13.12
@babel/preset-env 7.8.7 7.10.2
@frctl/fractal 1.2.1 1.3.0
@frctl/nunjucks 2.0.1 2.0.2
autoprefixer 9.7.4 9.8.0
axe-core 3.5.2 3.5.4
browserify 16.5.0 16.5.1
chrome-launcher 0.13.2 0.13.3
chrome-remote-interface 0.28.1 0.28.2
cross-spawn 7.0.1 7.0.3
eslint-config-prettier 6.10.0 6.11.0
eslint-plugin-import 2.20.1 2.21.2
gulp-cli 2.2.0 2.3.0
gulp-sass 4.0.2 4.1.0
jsdom 16.2.1 16.2.2
mocha 7.1.12 7.2.0
nyc 15.0.0 15.1.0
sass 1.26.3 1.26.8
stylelint 13.2.1 13.6.0
stylelint-scss 3.15.0 3.17.2

  • 0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)
  • 4 low, 3 high vulnerabilities in devDependencies (development dependencies)