Update focus styles #822

bkjohnson · 2022-05-18T19:00:30Z

Description

Part of department-of-veterans-affairs/vets-design-system-documentation#654

Companion PR: department-of-veterans-affairs/component-library#433

I left review comments, but links that aren't in the header/footer aren't getting the box-shadow styles because they could wrap, and box-shadow focus styling would look bad. Keeping the outline like we currently have (but with a different color) and setting the color to be dark and the background to be light should ensure that a focused link will have good contrast no matter where it appears.

Testing done

yarn link and tested builds in vets-website and content-build

Screenshots

Example of focus styling for buttons, links, and wrapped links where the ends are far apart

Example where wrapped links are stacked underneath

Acceptance criteria

[ ]

Definition of done

Changes have been tested in vets-website
Changes have been tested in IE11, if applicable
Documentation has been updated, if applicable
A link has been provided to the originating GitHub issue (or connected to it via ZenHub)
No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs

This doesn't seem like a class that's used anymore

Not sure if this is a change that we will keep

packages/formation/sass/base/_b-mixins.scss

bkjohnson · 2022-05-18T19:11:04Z

packages/formation/sass/base/_b-variables.scss

@@ -83,11 +83,12 @@ $color-green-light:          #4aa564;
 $color-gold-lightest:        #fff1d2;
 $color-gold-lighter:         #fad980;
 $color-gold-light:           #f9c642;
+$color-gold-50v:             #936F38; // This is something that's not in USWDS 1.6


This is copied from the USWDS token based on an issue discussion.

packages/formation/sass/base/_va.scss

This should be done before merge. Work is being done here to make it possible: - department-of-veterans-affairs/veteran-facing-services-tools#822

We're sticking with the double box-shadow for links in the header & footer, but going with the outline approach for links in the main content area due to the possibility of wrapping

bkjohnson · 2022-05-18T21:45:04Z

packages/formation/sass/base/_b-mixins.scss

-@mixin focus-gold-lighter-highlight {
-  background: $color-gold-lighter;
-  outline: 2px solid $color-gold-lighter;
-  outline-offset: 0;


I removed this because it was related and it didn't seem used. I saw it was added in 1b95985, but I couldn't find a PR for it. I also did two different git bisects in vets-website so I could try to pin down:

Where the formation version changed to 3.0.0

I don't think this was useful because we don't have any release notes tied to versions - I was just going off of the tag on the commit

Where focus-gold-lighter-highlight was used in vets-website.

I didn't find it anywhere but I may have taken a wrong direction in a bisect and missed it, especially if it was around for a short amount of time.

bkjohnson · 2022-05-18T21:48:10Z

packages/formation/sass/base/_b-mixins.scss

+@mixin focus-gold-vivid-outline {
+  box-shadow: 0 0 0 3px $color-white, 0 0 4px 6px $color-gold-50v;
+  outline: none;


Changing the mixin name means that we'll have to make a few changes in vets-website (and might make this a "breaking change" technically):

m-schemaform.scss

facility-locator.scss

edu-benefits.scss

10203_stem.scss

I did it since we aren't using the gold-light color anymore and I thought it would be good for the mixin name to not reference the old color.

bkjohnson · 2022-05-18T21:49:25Z

packages/formation/sass/modules/_m-nav-sidebar.scss

@@ -206,8 +206,7 @@ $level-3-hover-padding: 8px 12px 8px 30px;
      }

      &:focus {
-        outline: 2px solid $color-gold;
-        outline-offset: 3px;
+        @include focus-gold-vivid-outline;


I don't think this is actually used anywhere, but I felt like removing it was out of scope for the PR. I updated it just to keep things consistent.

veteran-facing-services-tools/packages/formation/sass/modules/_m-nav-sidebar.scss

Lines 198 to 212 in ce8e5ff

& .menu-item-container {

& > a {

font-weight: bold;

}

&:hover {

background-color: $color-gray-lightest;

color: $color-blue;

}

&:focus {

outline: 2px solid $color-gold;

outline-offset: 3px;

}

}

It's even unused in the sidenav.js file:

bkjohnson · 2022-05-18T21:50:24Z

packages/formation/sass/base/_va.scss

@@ -35,7 +35,7 @@ body {
  &:focus {
    position: inherit;
    top: auto;
-    outline: 2px solid $color-gold;
+    @include focus-gold-vivid-outline;


This is for the "Skip to content" link at the top of the page.

bkjohnson · 2022-05-18T21:55:28Z

packages/formation/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@department-of-veterans-affairs/formation",
-  "version": "7.0.1",
+  "version": "8.0.0",


The major version change is because the mixin rename means that sass will throw an error when it tries to compile files that are using the old focus-gold-light-outline. Let me know if you think this should be something lower.

This is from a yarn build in vets-website after I linked the local packages:

Major version seems appropriate here 👍

bkjohnson · 2022-05-19T22:29:50Z

packages/formation/sass/base/_va.scss

+  &:focus {
+    outline: $focus-outline;
+    background: $color-white;
+    color: $color-link-default;
+    box-shadow: unset;


The gold outline gives us color contrast on light backgrounds, and setting the focused element's background to white and giving it a darker text ensures that we'll have good contrast for links on dark backgrounds.

This reverts commit 3a6a902.

bkjohnson added 5 commits May 18, 2022 11:13

Add new gold color & use it in base focus-outline

0ac61e7

Update mixin name

e7961d5

Remove apparently unused mixin

08cc2f0

Update focus outline of .menu-item-container

177d65a

This doesn't seem like a class that's used anymore

Update outline focus color of "Skip to Content"

7081609

Not sure if this is a change that we will keep

bkjohnson commented May 18, 2022

View reviewed changes

bkjohnson added a commit to department-of-veterans-affairs/component-library that referenced this pull request May 18, 2022

Leave TODO note

117df73

This should be done before merge. Work is being done here to make it possible: - department-of-veterans-affairs/veteran-facing-services-tools#822

bkjohnson added 4 commits May 18, 2022 14:01

Switch to box-shadow approach

7074aae

Remove offset argument

71509bb

Bump major version

66df3d9

Tweak link focus styles

2788cde

We're sticking with the double box-shadow for links in the header & footer, but going with the outline approach for links in the main content area due to the possibility of wrapping

bkjohnson commented May 19, 2022

View reviewed changes

bkjohnson marked this pull request as ready for review May 19, 2022 22:42

bkjohnson requested a review from a team as a code owner May 19, 2022 22:42

bkjohnson changed the title ~~Focus color fix~~ Update focus styles May 19, 2022

k80bowman approved these changes May 20, 2022

View reviewed changes

Merge branch 'master' into focus-color-fix

3bf5e51

bkjohnson merged commit 3a6a902 into master May 20, 2022

bkjohnson deleted the focus-color-fix branch May 20, 2022 14:55

bkjohnson added a commit that referenced this pull request Jun 21, 2022

Revert "Update focus styles (#822)"

012b8df

This reverts commit 3a6a902.

bkjohnson mentioned this pull request Jun 21, 2022

Revert "Update focus styles" #839

Merged

bkjohnson added a commit that referenced this pull request Jun 21, 2022

Revert "Update focus styles (#822)" (#839)

e1351f7

This reverts commit 3a6a902.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update focus styles #822

Update focus styles #822

bkjohnson commented May 18, 2022 •

edited

bkjohnson May 18, 2022

bkjohnson May 18, 2022

bkjohnson May 18, 2022

bkjohnson May 18, 2022

bkjohnson May 18, 2022

bkjohnson May 18, 2022

k80bowman May 20, 2022

bkjohnson May 19, 2022

	& .menu-item-container {
	& > a {
	font-weight: bold;
	}

	&:hover {
	background-color: $color-gray-lightest;
	color: $color-blue;
	}

	&:focus {
	outline: 2px solid $color-gold;
	outline-offset: 3px;
	}
	}

Update focus styles #822

Update focus styles #822

Conversation

bkjohnson commented May 18, 2022 • edited

Description

Testing done

Screenshots

Acceptance criteria

Definition of done

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bkjohnson commented May 18, 2022 •

edited