USWDS - Windows High Contrast Mode Update #4610

mahoneycm · 2022-03-28T21:06:56Z

High contrast mode component improvements. Adds high contrast mode specific styling to components to prevent information loss.

Description

High contrast on Windows is an accessibility feature designed to increase text legibility and improve readability. The feature works by enabling the user to select theme colors for a scoped number of semantic elements. This scheme can then be applied to user interfaces and app content, reducing visual complexity while guaranteeing the user’s preferred contrast level.

In September 2020, Microsoft partnered with the CSS Working Group and the Chromium project, to set new web standards for developers to use to style their content for forced color modes like Windows high contrast. ¹

While testing our USWDS components in Windows High Contrast mode, we found that there were important visual queues missing. This caused some components to be challenging to use for users who utilize this important feature. Pairing our place-icon() and add-color-icon() functions with system color defaults² we are able to ensure maximum visibility of our components in Windows High Contrast mode or any mode that utilizes forced-color properties.

This PR affects the following:

System Tokens
place-icon() and add-color-icon() mixins
Accordion
Banner
Checkbox
Combobox
Date Picker & Date Range Picker
Footer
Header
Pagination
Radio Buttons
Range Slider
Search
Time Picker

Details of the changes and results will be broken up by component and listed in the comments below

Before you hit Submit, make sure you’ve done whichever of these applies to you:

Follow the 18F Front End Coding Style Guide and Accessibility Guide.
Run npm test and make sure the tests for the files you have changed have passed.
Run your code through HTML_CodeSniffer and make sure it’s error free.
Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

…rast mode

…uttons to allow checkmark to appear properly in high contrast mode

…ntrast visibility

USWDS: Range Slider - Fixes high contrast visibility

…let sizes and close icon in mobile sizes

…nt mobile view

USWDS: Radio Button & Checkbox - Windows High Contrast Support

USWDS - Pagination: Added stylings for Windows High Contrast mode

…-contrast-a11y

…okens

mahoneycm · 2022-03-29T16:23:01Z

src/stylesheets/core/_system-tokens.scss

@@ -1697,3 +1697,23 @@ $system-color-shortcodes: (
  "white-transparent-80": $color-white-transparent-80,
  "white-transparent-90": $color-white-transparent-90,
 );
+
+$high-contrast-system-colors: (


System Tokens

While it was possible to call the standard System Colors when declaring things like color or background-color, they were not able to be used in functions that required USWDS system tokens. This helps to implement these icons via place-icon() where you need to declare an icon object which requires color to be defined.

Trying to fix without setting system colors

When setting the image map, you can only set the color to USWDS color tokens. Trying to set it to a high contrast system color (ButtonText in this example), the add-color-icon function will fail

Results in:

To get around this, you can set the color to currentColor and changing the background color of the element to ButtonText but often times the style gets overridden by another setting.

Code

DevTools

Results in:

After setting system colors

After adding the new tokens, one can simply set the color to ButtonText to get the desired effect

Code

Results in

mahoneycm · 2022-03-29T17:19:04Z

src/stylesheets/core/mixins/_icon.scss

-  $contrast-bg
+  $margin: "auto",
+  $vertical-align: middle,
+  $contrast-bg: "default"


place-icon() and add-color-icon() Defaults

Setting default values for these functions so users can simply set the icon object and direction while leaving the option to change the rest for optional specificity.

mahoneycm · 2022-03-29T17:31:48Z

src/stylesheets/components/_accordions.scss

+
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+  }


Accordion

Accordion was missing the expand and collapse icons which implied there was collapsed content hidden. By setting forced-color-adjust: none we can maintain original styling, which passes color contrast minimums.

Current High Contrast / High Contrast Fix: Dark Theme / High Contrast Fix: Light Theme

mahoneycm · 2022-03-29T18:05:38Z

src/stylesheets/components/_banner.scss

+    &::after {
+      background-color: ButtonText;
+    }
+  }


Banner

The banner was missing chevrons, which implies there is content hidden behind the link. It was also missing the close icon on mobile which allows users to close the pane.

The icons were already placed as masks using place-icon(), so the solution was simply setting the background color to an appropriate System Color

Current High Contrast / High Contrast FIx

mahoneycm · 2022-03-29T18:17:11Z

src/stylesheets/elements/form-controls/_checkbox-and-radio.scss

+        &--tile {
+          background-color: ButtonText;
+        }
+      }


Checkbox and Radio Buttons

Currently, the radio button and checkbox components are missing important visual queues for users implementing Windows High Contrast mode including the buttons/boxes themselves, when a selection has been made, and a visual queue of disabled form options.

Because most of the stylings are shared between Radio + Checkbox, it was easiest to fix together.

Radio Buttons

Currently:

Default

Tile

After Fix:

// Note: Bolder border around Radio button / checkbox indicates focus

Default:

Tile:

Checkbox

Currently

Default:

Tile:

After Fix

Default:

Tile:

The checkmark will not show in both cases due to the limitations of forced-colors mode being able to determine light or dark themes, to switch between the light and dark versions of the checkmark.

Our thinking was that the dark high contrast themes are more frequently used than the light themes, so the broader user base will get the most similar checkboxes, stylistically speaking, while the light users still maintain a functional componen

mahoneycm · 2022-03-29T18:33:40Z

src/stylesheets/elements/form-controls/_combo-box.scss

+      height: 1.5rem;
+      width: auto;
+      top: 0.5rem;
+    }


Combo-box & Time Picker

This update keeps the background svg in standard views but places the icon mask in forced-colors is set to active.

This also fixes the same issue found in the Time Picker component

Currently

Standard

High Contrast mode

After Fix

mahoneycm · 2022-03-29T18:36:51Z

src/stylesheets/elements/form-controls/_date-picker.scss

+    @include add-color-icon($calendar);
+    mask-size: units(3) !important;
+    position: relative;
+


Date Range Picker

Currently:

Default:

HC Mode:

In it's current state, the calendar icon is missing, month & date arrows are missing, date selection and range are missing. This makes the component almost completely unusable for users utilizing High Contrast Mode

After Fix

_Note: the arrow to the left of March 2022 are hidden because it is out of the selection range _

mahoneycm · 2022-03-29T18:40:01Z

src/js/components/date-picker.js

        </div>
        <div class="${CALENDAR_CELL_CLASS} ${CALENDAR_CELL_CENTER_ITEMS_CLASS}">
          <button
            type="button"
            class="${CALENDAR_PREVIOUS_MONTH_CLASS}"
            aria-label="Navigate back one month"
            ${prevButtonsDisabled ? `disabled="disabled"` : ""}
-          >&nbsp;</button>
+          ></button>


Date Picker JS

WHC changes the background color for all text. The &ngsp; causes a rectangle to appear and obstruct the icon masks:

After Fix

Wy was this   here in the first place? Does removing it cause any kind of regression in any other browser?

I've checked Chrome, Edge, and Firefox in both standard and High Contrast modes and have yet to find an error!

mahoneycm · 2022-03-29T18:50:46Z

src/stylesheets/components/_footer.scss

+        0.5,
+        "auto",
+        "default"
+      );


Footer

Currently, social media icons and expand chevrons (mobile only) disappear in dark high contrast modes, causing the user to lose context and content.

This PR also fixes the disappearing chevrons in the big footer variant in mobile views.

Social Icons

Currently:
(Alternative color shows hover)

Default

High Contrast

After Fix:

Used forced-color-adjust: none to set the background color for the social link icons to lightgrey. This is easy to see in all high contrast modes and keeps things consistent between versions

Mobile Chevrons

Currently:

After Fix:

mahoneycm · 2022-03-29T18:54:59Z

src/stylesheets/components/_navigation.scss

+
+        &::after {
+          position: absolute;
+          right: 0;


Header

In high contrast modes, the header would be missing chevrons, mobile open/close buttons, and the search button depending on theme color

(before and after)

Mobile

mahoneycm · 2022-03-29T19:05:08Z

src/stylesheets/components/_pagination.scss

+    outline: 2px solid buttonText;
+    color: buttonText;
+  }
+


Pagination

Before, the current page did not have depictive stylings so users could not easily see which page they are on, versus what is next or previous. This is mostly a problem in the unbounded variant where there are 4 page numbers grouped together.

Default:

Unbounded:

Current w/ high contrast:

Fix w/ high contrast:

mahoneycm · 2022-03-29T19:07:22Z

src/stylesheets/elements/form-controls/_range-input.scss

+
+  @media (forced-colors: active) {
+    outline: 2px solid transparent;
+  }


Range

This adds an outline to the range slider handle (or "thumb") when high contrast mode is detected

Currently:

After Fix:

mahoneycm · 2022-03-29T19:08:54Z

src/stylesheets/components/_search.scss

+
+      &::before {
+        @include at-media("mobile-lg") {
+          content: none;


Search

The search component was missing the button outline as well as the magnifying glass icon in high contrast modes.

Current High Contrast (left) / High Contrast Fix (right)

USWDS - High Contrast CSS clean up

mejiaj

Nice work!

Tested for regressions first across Chrome, Firefox, and Safari both on mobile and desktop. None found. High contrast styles look good on Edge.

There are slight issues with Firefox, but we expected that with limited support.

thisisdano · 2022-04-04T16:41:01Z

This is a masterpiece of PR documentation, thank you.

USWDS - Windows High Contrast Mode Update

uswds/uswds#4610, released in uswds 2.13.3, made some changes to the implementation of theme colors that caused the nav bar to be rendered incorrectly.

mahoneycm and others added 30 commits February 9, 2022 14:05

Added forced-color settings for users viewing components in high cont…

4ba785b

…rast mode

Changed forced-color :checked background color to only affect radio b…

280ca58

…uttons to allow checkmark to appear properly in high contrast mode

Added outline to range slider thumb in forced-colors mode for high co…

24e1bff

…ntrast visibility

Removed test media query

26cbc9a

Added space before media query for readability

4f9f5ab

Merge pull request #4510 from uswds/cm-hc-range-slider

3783ae6

USWDS: Range Slider - Fixes high contrast visibility

Fixed Checkbox checked indicators in high contrast mode

585a5ed

Adds accordion stylings for high contrast mode

639c9db

Added space before forced-color media queries for legibility

ac63ff7

Added consistency with outline-offset and outline

085c6da

Removed quotations from add-background-svg with a variable

47d0220

Removed unnecessary space in accordion.scss

5a2d1b1

Contained ButtonText background color in forced-color media query

434a501

Added forced-color stylings for high contrast mode

d956bc3

Added high contrast stylings for open and close chevrons in above tab…

4b2703c

…let sizes and close icon in mobile sizes

Added styling for high contrast mode

3b04f16

Created icon masks. Messy testing

b259010

Added high contrast styling solution for chevrons in big footer varia…

2b2d69b

…nt mobile view

Merge pull request #4509 from uswds/cm-radio-high-contrast

fe9a388

USWDS: Radio Button & Checkbox - Windows High Contrast Support

Merge pull request #4523 from uswds/cm-hc-pagination

4dbfb6a

USWDS - Pagination: Added stylings for Windows High Contrast mode

Added WHC color fix for mobile chevron

cd2dfa1

Merge branch 'develop' of https://github.com/uswds/uswds into cm-high…

b6ff3d3

…-contrast-a11y

Added High Contrast system colors to system tokens

95d6256

Added combobox high contrast styles

b73b435

Added High Contrast system colors to system tokens

6f85cd6

Removes non-breaking space from date picker button on js

97a0d8f

Set standard high contrast colors for date-picker and range picker

0ef1b82

Declares default for contrast-bg in icons.scss

bcba832

Removes unnecessary contrast-bg declarations

50a7dc2

Merge branch 'develop' of https://github.com/uswds/uswds into cm-hc-t…

0f0bbaf

…okens

mahoneycm added 2 commits March 28, 2022 16:03

Removed unnecessary default declarations from place-icon in date-picker

fd235f3

Removed unnecessary contrast-bg declaration from banner

c5f7589

mahoneycm commented Mar 29, 2022

View reviewed changes

mahoneycm marked this pull request as ready for review March 29, 2022 19:10

mahoneycm requested review from mejiaj and thisisdano March 29, 2022 19:10

mahoneycm and others added 2 commits March 30, 2022 10:09

Banner fix chevron mask placement

c8e0ff3

Merge pull request #4609 from uswds/cm-hc-tidy-up

963c02f

USWDS - High Contrast CSS clean up

mejiaj approved these changes Mar 30, 2022

View reviewed changes

thisisdano approved these changes Apr 5, 2022

View reviewed changes

thisisdano merged commit 1acc8d1 into develop Apr 5, 2022

thisisdano deleted the cm-high-contrast-a11y branch April 5, 2022 15:54

mejiaj pushed a commit that referenced this pull request Apr 8, 2022

Merge pull request #4610 from uswds/cm-high-contrast-a11y

004996d

USWDS - Windows High Contrast Mode Update

thisisdano mentioned this pull request Apr 11, 2022

Release 2.13.3 #4619

Merged

lpsinger added a commit to nasa-gcn/gcn.nasa.gov that referenced this pull request Apr 26, 2022

Pin uswds to 2.13.2

ebc2ac2

uswds/uswds#4610, released in uswds 2.13.3, made some changes to the implementation of theme colors that caused the nav bar to be rendered incorrectly.

This was referenced Apr 26, 2022

Phase 1: Windows HC Fixes #4517

Closed

Phase 2: Windows HC Fixes #4518

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

USWDS - Windows High Contrast Mode Update #4610

USWDS - Windows High Contrast Mode Update #4610

mahoneycm commented Mar 28, 2022 •

edited

Loading

mahoneycm Mar 29, 2022 •

edited

Loading

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022 •

edited

Loading

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022

thisisdano Apr 4, 2022

mahoneycm Apr 4, 2022

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022

mahoneycm Mar 29, 2022

mejiaj left a comment

thisisdano commented Apr 4, 2022

USWDS - Windows High Contrast Mode Update #4610

USWDS - Windows High Contrast Mode Update #4610

Conversation

mahoneycm commented Mar 28, 2022 • edited Loading

Description

Footnotes

mahoneycm Mar 29, 2022 • edited Loading

Choose a reason for hiding this comment

System Tokens

Trying to fix without setting system colors

After setting system colors

Choose a reason for hiding this comment

place-icon() and add-color-icon() Defaults

Choose a reason for hiding this comment

Accordion

Choose a reason for hiding this comment

Banner

Choose a reason for hiding this comment

Checkbox and Radio Buttons

Radio Buttons

Checkbox

mahoneycm Mar 29, 2022 • edited Loading

Choose a reason for hiding this comment

Combo-box & Time Picker

Currently

After Fix

Choose a reason for hiding this comment

Date Range Picker

Currently:

After Fix

Choose a reason for hiding this comment

Date Picker JS

After Fix

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Footer

Social Icons

Mobile Chevrons

Choose a reason for hiding this comment

Header

Choose a reason for hiding this comment

Pagination

Choose a reason for hiding this comment

Range

Choose a reason for hiding this comment

Search

mejiaj left a comment

Choose a reason for hiding this comment

thisisdano commented Apr 4, 2022

mahoneycm commented Mar 28, 2022 •

edited

Loading

mahoneycm Mar 29, 2022 •

edited

Loading

`place-icon()` and `add-color-icon()` Defaults

mahoneycm Mar 29, 2022 •

edited

Loading