USWDS: Button - Forced colors outline #5147

mahoneycm · 2023-02-13T16:58:18Z

Summary

This PR adds an outline to buttons in forced color mode for added clarity and consistency with default styles. It also replaces repetitive CSS with a new $border-high-contrast variable

Breaking change

This is not a breaking change

Related issue

Closes #5099

Preview link

Buttons Preview →

Problem statement

Currently, buttons in forced-colors modes do not have an outline or any styling to appear like buttons. Instead, it just looks like regular text unless focused.

Solution

Define an outline within forced colors mode. Other components utilize similar styling in forced colors mode, so I've created a mixin and included in on usa-button

Previously we set high-contrast outlines via outline: 2px solid transparent because it would not affect the border outside of high-contrast modes. Since we are using the forced-colors media query for all high contrast styles, we can adjust the border without affecting components in normal circustances. Thus, high contrast borders have been turned into a sass variable and made uniform across our components

Testing and review

View the Button story preview
In developer tools, click the 3-dot menu button and select "Rendering" under more tools
Scroll down to Emulate css media feature forced-colors and select `Forced-colors: active"
Verify that buttons have an outline making them appear as buttons
Compare Checkbox, Radio, Search, Range, and Date Picker components to the develop build in high contrast mode to ensure no style change as a result of switching to outline mixin.

Before opening this PR, make sure you’ve done whichever of these applies to you:

Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
Run npm run prettier:scss to format any Sass updates.

… outline with input

amyleadem

Hi @mahoneycm, thanks for taking this on. I like that you created a shared value for this. I had some concerns primarily about how this fix affects the focus state outline, so I added some questions in the comments.

Additionally, this might be out of scope, but I do not see a focus outline on usa-date-picker__button in the forced colors mode. Just wanted to flag that for now.

Let me know if you have any questions.

packages/uswds-core/src/styles/mixins/utilities/_forced-color-outline.scss

packages/usa-button/src/styles/_usa-button.scss

packages/usa-search/src/styles/_usa-search.scss

packages/usa-button/src/styles/_usa-button.scss

packages/usa-search/src/styles/_usa-search.scss

- The original focus will add a thicker more defined focus outline

…d-colors-outline

amyleadem

Looking good! I found a couple visual changes and flagged them in comments. I also think we should move the $border-high-contrast variable into another file. Let me know if you have questions!

packages/uswds-core/src/styles/settings/_settings-utilities.scss

packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss

packages/usa-range/src/styles/_usa-range.scss

packages/usa-date-picker/src/styles/_usa-date-picker.scss

- Moves and renames -high-contrast to -high-contrast-border - Switches HC range slider border to outline to resolve visual discrepency - Switches radio & checkbox border to outline to resolve visual discrepency - Removes extra line

mahoneycm · 2023-03-22T14:33:10Z

@amyleadem Great catches! Changes have been implemented in 98005ed

I believe range slider, radio, and checkbox were originally switched to borders when I was attempting to use a mixin for the high contrast border. Now that it's just a variable, we can have allow these to remain outline while still using the same variable as the other components.

amyleadem

Very close! I am happy this issue is getting fixed. I had just a couple notes about date picker and the settings page. Let me know if you have questions.

amyleadem · 2023-03-23T21:44:36Z

packages/uswds-core/src/styles/settings/_settings-general.scss

+
+/*
+----------------------------------------
+High Contrast


Wondering if it would be helpful to specify that this is for High contrast mode, possibly with a short description explaining HC mode/CSS forced-color mode is and how to activate it.

Suggested change

High Contrast

High contrast mode

Resolved in b2f35e6

amyleadem

Approved. Thanks for all your work on this!

- We did this to prevent users from breaking contrast compliance - We may be able to move this back after providing high contrast documentation to users

amyleadem

Smart fix to move this into /variables. I like it. I really appreciate that you included the reasoning in the commit as well.

One small thing I did notice when I opened the preview is that the border on the disabled buttons disappears on hover when forced-colors are active. Would you be able to fix that here or open a fast-follow issue?

mejiaj

Don't forget to run prettier. Added suggestion in comments, otherwise looks good.

packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss

mahoneycm · 2023-03-30T20:33:06Z

@amyleadem It came from the border: 0 in button-disabled various state styles.

uswds/packages/uswds-core/src/styles/mixins/general/button-disabled.scss

Lines 10 to 19 in 9099ffe

    
           &:hover, 
        
           &.usa-button--hover, 
        
           &:active, 
        
           &.usa-button--active, 
        
           &:focus, 
        
           &.usa-focus { 
        
             background-color: color("disabled"); 
        
             border: 0; 
        
             box-shadow: none; 
        
           }

I removed it and it doesn't seem to change any styles outside of forced-colors. Hover/focus/active states for disabled and aria-disabled buttons appear the same as before removing.

amyleadem

Confirmed that removing border: 0 fixed the forced-colors issue and did not have a negative effect in the default presentation.

Confirmed in Chrome, Safari, Edge, Firefox.

thisisdano · 2023-05-08T21:31:32Z

I'll draw up a changelog PR for this change.
Changelog PR: uswds/uswds-site#2096

mahoneycm added 5 commits February 13, 2023 11:41

Create forced-color-outline mixin

6c2da72

Switch forced color outline declarations to new mixin

b66a9b1

Add forced color outline mixin to buttons

3d4b18e

Override forced color button outline on search to maintain consistent…

9514256

… outline with input

Run prettier

600ba38

mahoneycm requested review from mejiaj and amyleadem February 13, 2023 16:58

amyleadem assigned amyleadem and unassigned amyleadem Feb 24, 2023

amyleadem suggested changes Feb 24, 2023

View reviewed changes

mahoneycm added 9 commits February 28, 2023 14:20

Ignore focus state on forced color outline

71ace11

- The original focus will add a thicker more defined focus outline

Create variable for forced color outline width

c292390

Search: Refactor forced color button outline to fix focus

249357d

Revert forced color outline to border

60af03d

Adjust styles for components with forced color border

60537b8

Create high contrast border variable

8acc85c

Replace forced color borders & outlines with new variable

1a0dd2c

Remove forced color border mixin

ff2ac9f

Remove unused utilities import

65acbe8

mahoneycm requested a review from amyleadem February 28, 2023 21:41

Merge branch 'develop' of github.com:uswds/uswds into cm-button-force…

490232e

…d-colors-outline

amyleadem suggested changes Mar 21, 2023

View reviewed changes

Implement review notes:

98005ed

- Moves and renames -high-contrast to -high-contrast-border - Switches HC range slider border to outline to resolve visual discrepency - Switches radio & checkbox border to outline to resolve visual discrepency - Removes extra line

mahoneycm requested a review from amyleadem March 22, 2023 14:29

amyleadem suggested changes Mar 23, 2023

View reviewed changes

mahoneycm added 3 commits March 24, 2023 10:01

Add note about high contrast mode

b2f35e6

Date Picker: Change background color for calendar arrows on hover

d27c0e3

Date Picker: Adjust month/year arrow hover states

bd7de74

amyleadem approved these changes Mar 24, 2023

View reviewed changes

Move high contrast border setting to system variables

adb75b1

- We did this to prevent users from breaking contrast compliance - We may be able to move this back after providing high contrast documentation to users

mahoneycm requested a review from amyleadem March 30, 2023 15:52

amyleadem reviewed Mar 30, 2023

View reviewed changes

mejiaj suggested changes Mar 30, 2023

View reviewed changes

packages/uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors.scss Outdated Show resolved Hide resolved

mahoneycm added 5 commits March 30, 2023 16:09

Create variable for high contrast disabled border

eb3b422

Remove variable for high contrast disabled border

282adb4

Remove border: 0 from button-disabled

cb9dab5

Specify border-high-contrast variable call in checkbox and radio colors

264008a

Run prettier:scss

05ef153

mahoneycm requested review from mejiaj and amyleadem March 30, 2023 20:33

mejiaj approved these changes Mar 31, 2023

View reviewed changes

amyleadem approved these changes Mar 31, 2023

View reviewed changes

amyleadem requested a review from thisisdano March 31, 2023 16:16

mahoneycm mentioned this pull request Apr 7, 2023

USWDS - Disabled styles: High Contrast Components #5198

Closed

thisisdano approved these changes May 8, 2023

View reviewed changes

thisisdano mentioned this pull request May 8, 2023

Add changelog items for USWDS 3.5.0 uswds/uswds-site#2096

Merged

24 tasks

thisisdano merged commit f39d0af into develop May 10, 2023

thisisdano deleted the cm-button-forced-colors-outline branch May 10, 2023 21:19

thisisdano mentioned this pull request Jun 6, 2023

USWDS 3.5.0 #5323

Merged

USWDS: Button - Forced colors outline #5147

USWDS: Button - Forced colors outline #5147

Uh oh!

Conversation

mahoneycm commented Feb 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Breaking change

Related issue

Preview link

Problem statement

Solution

Testing and review

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mahoneycm commented Mar 22, 2023

Uh oh!

amyleadem left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amyleadem Mar 23, 2023

Choose a reason for hiding this comment

Uh oh!

mahoneycm Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

amyleadem left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mahoneycm commented Mar 30, 2023

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

thisisdano commented May 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mahoneycm commented Feb 13, 2023 •

edited

Loading

amyleadem left a comment •

edited

Loading

amyleadem left a comment •

edited

Loading

thisisdano commented May 8, 2023 •

edited

Loading