Update focus outline color to meet WCAG 2.2 contrast standards #6854

evansjohnson · 2024-06-18T14:54:53Z

Fixes no issue

Checklist

[n/a] Includes tests
Update documentation

Changes proposed in this pull request:

Update color of focus outline to meet 3:1 contrast standard for UI component focus states

https://webaim.org/resources/contrastchecker/

Reviewers should focus on:

Our default focus indicator won't meet contrast standards for arbitrary colors - but should we provide any buffer so that the default focus indicator meets standards up to a certain shade of background color, rather than just $white/$black?
- I currently went with an option that meets contrast standards against all light-gray colors in light theme, and all dark-gray colors when in dark theme
Should be good in light and dark themes
Design review checklist

WCAG Guidelines

From what I can tell, WCAG did not require minimum contrast in 2.1, but in 2.2 has a section on focus appearance which specifies the 3:1 minimum ratio

Screenshot

Current:

This PR:

changelog-app · 2024-06-18T14:54:57Z

Generate changelog in `packages/core/changelog/@unreleased`

What do the change types mean?

feature: A new feature of the service.
improvement: An incremental improvement in the functionality or operation of the service.
fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
and external consumers of the service's API (e.g. customer-written software or integrations).
deprecation: Advertises the intention to remove service functionality without any change to the
operation of the service itself.
manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
performing database surgery, ...) at the time of upgrade for it to succeed.
migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

❗The break and manual task changelog types will result in a major release!
🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
✨ All others will result in a minor version release.

Type

Description

Update focus indicator colors to meet WCAG 2.2 contrast standards

Check the box to generate changelog(s)

Generate changelog entry

evansjohnson

this feels like a borderline breaking change, since it has the potential to make UI snapshots fail. I don't think it could cause some cases to have worse contrast because the current focus color already does not have enough contrast with the extremes of the color spectrum

packages/core/src/components/forms/_common.scss

packages/core/src/components/forms/_controls.scss

packages/core/src/common/_color-aliases.scss

invliD · 2024-06-24T23:32:36Z

packages/core/src/common/_mixins.scss

+  // this should become default in bp6, providing new behavior as a class for now to avoid breaking changes
+  // to focus colors
+  /* stylelint-disable-next-line @blueprintjs/no-prefix-literal */
+  .bp5-focus-enhanced-contrast & {
+    outline: $pt-focus-indicator-color solid 2px;
+  }
+  /* stylelint-disable-next-line @blueprintjs/no-prefix-literal */
+  .#{$ns}-dark.bp5-focus-enhanced-contrast & {
+    outline-color: $pt-dark-focus-indicator-color;
+  }


I think we should just do it. I wouldn't call this a breaking change. If we do introduce this class, you should use #{$ns} instead of bp5, which is what this lint rule is trying to tell you.

Okay cool, I wasn't sure the history of how careful we've been with minor things like this that could be viewed as a break.

Ack on the prefix - I hard coded bp5 since this was only intended to work for the bp5 version and removed in bp6, but will just remove this.

packages/core/src/docs/accessibility.md

evansjohnson

TODO:

Audit intent color contrast, pt-input-intent and pt-dark-input-intent
- $pt-intent-colors
- $pt-dark-input-intent-box-shadow-colors
Audit focus outline of all components (planning to leave out of this PR) - a few more here but highlighting some main ones:
- [-] Card no focus state
- [-] FileInput no visual focus state
- [-] Tree items cannot be focused
- [-] Tag focus outline does not have offset like other components
[-] Check on history of why components that appear like text inputs have a shadow focus style while other components have offset outline style
- For now, went with an option that retains box-shadow for text inputs, but styled in a way that makes it look closer to a solid outline. I figured this reduces chances of regressions since this will just change the color/opacity used but not the method of adding a focus indicator for these components.
Consider Consider using :focus-visible instead of :focus for styling focus states #6076 along with this PR, or as a follow up in the same release
- This was already tagged a breaking change - we could consider at the next major version bump but not needed for now.

evansjohnson · 2024-06-25T00:26:17Z

packages/core/src/common/_mixins.scss

+  // this should become default in bp6, providing new behavior as a class for now to avoid breaking changes
+  // to focus colors
+  /* stylelint-disable-next-line @blueprintjs/no-prefix-literal */
+  .bp5-focus-enhanced-contrast & {
+    outline: $pt-focus-indicator-color solid 2px;
+  }
+  /* stylelint-disable-next-line @blueprintjs/no-prefix-literal */
+  .#{$ns}-dark.bp5-focus-enhanced-contrast & {
+    outline-color: $pt-dark-focus-indicator-color;
+  }


Okay cool, I wasn't sure the history of how careful we've been with minor things like this that could be viewed as a break.

Ack on the prefix - I hard coded bp5 since this was only intended to work for the bp5 version and removed in bp6, but will just remove this.

packages/core/src/docs/accessibility.md

packages/core/src/common/_color-aliases.scss

evansjohnson · 2024-06-25T17:36:18Z

packages/core/src/common/_color-aliases.scss

@@ -25,6 +25,10 @@ $pt-app-elevated-background-color: $light-gray4 !default;
 $pt-dark-app-elevated-background-color: $dark-gray3 !default;

 $pt-outline-color: rgba($blue3, 0.6) !default;


Not changing this color because of the comment at the top of this file stating that is generally considered a breaking change. Perhaps we want to make an exception here...

svc-palantir-github · 2024-06-25T17:52:30Z

comment

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

evansjohnson · 2024-06-25T18:28:55Z

packages/core/src/common/_color-aliases.scss

@@ -25,6 +25,11 @@ $pt-app-elevated-background-color: $light-gray4 !default;
 $pt-dark-app-elevated-background-color: $dark-gray3 !default;

 $pt-outline-color: rgba($blue3, 0.6) !default;
+// 0.752 opacity to meet WCCAG 2.2 minimum contrast guidelines with all light-gray backgrounds in light theme
+// and all dark-gray backgrounds in dark theme
+$pt-focus-indicator-color: rgba($blue2, 0.752) !default;


$blue2 on $white - 3.77:1 contrast
$blue2 on $light-gray1 - 3:1 contrast

evansjohnson · 2024-06-25T18:31:02Z

packages/core/src/common/_color-aliases.scss

+// and all dark-gray backgrounds in dark theme
+$pt-focus-indicator-color: rgba($blue2, 0.752) !default;
+// dark theme opacity could be less and still meet minimum contrast, but keep 0.752 to stay consistent
+$pt-dark-focus-indicator-color: rgba($blue5, 0.752) !default;


$blue5 on $black - 5.77:1 contrast
$blue5 on $dark-gray5 - 3.39:1 contrast

for comparison - $blue4 on $dark-gray5 - 2.24:1 contrast

evansjohnson · 2024-06-25T18:32:07Z

packages/core/src/components/forms/_common.scss

@@ -15,14 +15,14 @@ $input-color-disabled: $button-color-disabled !default;
 $input-placeholder-color: $pt-text-color-muted !default;
 $input-background-color: $white !default;
 $input-background-color-disabled: rgba($light-gray1, 0.5) !default;
-$input-shadow-color-focus: $pt-intent-primary !default;
+$input-shadow-color-focus: $pt-focus-indicator-color;


if this can't be relied on externally - remove and use $pt-focus-indicator-color directly in the handful of places it's used. Same for dark theme version below.

it looks like we explicitly distribute _colors.scss, _color-aliases and _variables, but not this file. could consider updating to use $pt-focus-indicator-color directly

"dist:variables": "generate-css-variables --retainDefault true ../../colors/src/_colors.scss common/_color-aliases.scss common/_variables.scss",

svc-palantir-github · 2024-07-01T12:05:18Z

input focus style

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

svc-palantir-github · 2024-07-01T12:55:23Z

Add generated changelog entries

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

evansjohnson · 2024-07-01T15:20:55Z

packages/core/src/components/forms/_common.scss

-      inset border-shadow(1, $color, 1px),
-      border-shadow(0.3, $color, 2px);
+      inset border-shadow(0.752, $color, 1px),
+      border-shadow(0.752, $color, $outer-shadow-focus-width);


border-shadow width stayed the same in the case of intent shadows (since they already start with 1px in un-focused state, the focus state is a 3px shadow outline)

for non-intent inputs, the shadow width reduced by 1px. I expect this to mean that shadows that worked in previous situations will continue to work (ex there won't be clipping introduced from something like a new outline offset or wider shadow)

evansjohnson · 2024-07-01T15:21:26Z

packages/core/src/components/forms/_controls.scss

@@ -197,7 +197,6 @@ $control-indicator-spacing: $pt-grid-size !default;

  input:focus ~ .#{$ns}-control-indicator {
    @include focus-outline();
-    outline: $blue3 solid 2px;


from what I can tell this was just to provide increased contrast, no reason to not use the consistent focus-outline style now

evansjohnson · 2024-07-01T15:21:46Z

packages/core/src/components/forms/_controls.scss

@@ -632,10 +631,6 @@ $control-indicator-spacing: $pt-grid-size !default;
      background-color: $dark-control-background-color-hover;
    }

-    input:focus ~ .#{$ns}-control-indicator {
-      outline: $blue5 solid 2px;


same comment as line 200 in this file

evansjohnson · 2024-07-01T15:22:47Z

packages/core/src/common/_color-aliases.scss

colors have changed - but not the method of how the focus indicator is applied (2px offset 2px outline) so I expect minimal chance of breaking changes

svc-palantir-github · 2024-07-01T15:29:59Z

input group not form group

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

evansjohnson · 2024-07-01T15:51:08Z

alex-dales · 2024-07-01T20:03:01Z

Design review checklist:

Light theme

Existing high contrast focus style components like Checkbox, Radio, Switch

Outline focus style on a few interactive components, like Button, Menu, Tabs

Text input styled components like InputGroup, NumericInput, EditableText

Text input styled components with intent

Dark theme

Existing high contrast focus style components like Checkbox, Radio, Switch

Outline focus style on a few interactive components, like Button, Menu, Tabs

Text input styled components like InputGroup, NumericInput, EditableText

Text input styled components with intent

Looks good! Some comments and questions below:

Comments

Unrelated to the contrast changes, but I noticed that with the segmented control when an option between two other options is selected and we focus the left-most option, the focus border is behind the selected option. When we focus the right-most option this isn't the case. Could we fix the the focus for the left-most option here to not be clipped?

Left-most option focused

Right-most option focused

For a numeric input with intent and in light mode I noticed the input field overlaps the focus border of the right buttons. Could we fix this to bring the focus border to the front?

Questions

Do submenus intentionally have a non-rounded focus border? I was expecting that they'd also be rounded to be consistent with the focus state for menu items

Was just curious what was the rationale behind moving from the two-colored stroke to the single colored stroke for input fields? I do think it looks cleaner. Just wanted to flag that we still have the previous visual treatment for the border when the control card is in the selected state. I realize it is a different state, but should we also consider updating the control card here to be consistent?

Previous

New

Control card option selected

evansjohnson · 2024-07-01T20:08:29Z

Ah great find on the ControlCard. I'll get that updated and do another second pass myself and look for others that may not be up to date.

Since this is already a delicate change to get released, I'd strongly prefer to track all of the border overlap and other issues noted separately, but am happy to continue to work on them, thanks for flagging explicit examples! For this PR I want to keep a close eye on making sure we don't have any regressions, but would expect existing bugs to remain in place for now. If any of the bugs are particularly bad in your opinion, and perhaps become even more obvious with the increased contrast, I could fix as needed as pre-requisites to this PR.

My thinking on moving to a solid border color is that we need to get much darker and 2px width to meet minimum contrast standards, and having 0.752 opacity right next to 1 opacity looks a little off in a way the previous light shadow didn't.

alex-dales · 2024-07-01T20:22:16Z

Ah great find on the ControlCard. I'll get that updated and do another second pass myself and look for others that may not be up to date.

Sounds good!

...perhaps become even more obvious with the increased contrast, I could fix as needed as pre-requisites to this PR

I don't think these bugs are particularly blocking, so I think it is ok to tackle this in a FLUP PR so you can get these changes in.

My thinking on moving to a solid border color is that we need to get much darker and 2px width to meet minimum contrast standards...

Makes sense, I think the solid border also looks cleaner!

evansjohnson · 2024-07-01T22:25:24Z

From the demo app it looks like there's some custom toast focus styles that look like they don't have high contrast

confirmed here:

current contrast bumping $white focus opacity to 0.75 from 0.5:

updating toast focus color to match text color with 0.75 opacity

evansjohnson · 2024-07-01T23:11:42Z

I'm wondering if we're conflating focus and selection styles and may be anchoring on the focus state because that's what this PR is changing. FWIW that style is not reused and is unique to ControlCard so this is just limited to the relatively new ControlCard component.

There is an argument to be made that the current selection state already follows the current focus state, so if we're updating one we should update the other. But I could also see this staying the same, since from what I've read so far this is a guideline for focus state which is more transient than a selection state and needs to grab the users attention.

svc-palantir-github · 2024-07-01T23:15:18Z

increase toast focus contrast

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

alex-dales · 2024-07-02T15:23:57Z

Toast focuses look good!

Yeah agreed, I don't want to over-index on the control card selection state since it is different. After mocking up the 2px border for the selection state on the control card, I do like visually how the solid border looks – it is almost more attention-grabbing compared to the current. I'd be curious to get some more thoughts from the design team here, but this shouldn't be blocking for this PR!

evansjohnson · 2024-07-02T21:18:46Z

Thanks for highlighting those existing issues! I opened #6890 and #6889 to track

evansjohnson · 2024-07-02T21:21:45Z

Let me know if you end up wanting to change selected styles and we can make sure there's at least a ticket open to track

svc-palantir-github · 2024-07-02T21:36:53Z

Merge branch 'develop' into evanj/focus-indicator

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

invliD · 2024-07-09T18:42:43Z

packages/core/src/components/toast/_toast.scss

@@ -47,7 +47,7 @@ $toast-intent-colors: (

    &:focus {
      // blue outline color shows poorly on colored bg
-      outline-color: rgba($white, 0.5);
+      outline-color: rgba($text-color, 0.75);


Was this intentional? Seems odd to use the text color for the outline.

I left an exploration of this here: #6854 (comment)

The text color is what allows us to easily flip to a dark outline when rendering against a light color background. Alternate option to define a separate focus color variable, but I'm not sure what we'd really choose differently - these are already against intent backgrounds so it's a bit of a weird case.

I'm not saying the color itself is weird, and choosing the same color seems fine. It's just odd to use the variable for text color for something that isn't text.

ah yes - updated to $text-and-focus-color, didn't think of anything good to combine them generically, ex $content-color doesn't sound right

alex-dales · 2024-07-09T19:42:45Z

Let me know if you end up wanting to change selected styles and we can make sure there's at least a ticket open to track

Sorry, I missed this last week! Will let you know if we want to make a change here and FLUP as needed over Slack.

Invalidated by push of f55fad6

svc-palantir-github · 2024-07-09T20:30:00Z

more descriptive var name

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

update focus outline color to meet contrast standards

296e279

This comment was marked as outdated.

Sign in to view

dark theme as well and against more background colors

504f6ac

evansjohnson commented Jun 21, 2024

View reviewed changes

packages/core/src/components/forms/_common.scss Outdated Show resolved Hide resolved

packages/core/src/components/forms/_controls.scss Outdated Show resolved Hide resolved

evansjohnson changed the title ~~[WIP] Update focus outline color to meet contrast standards~~ Update focus outline color to meet WCAG 2.2 contrast standards Jun 21, 2024

This comment was marked as outdated.

Sign in to view

lint

e1c68a9

This comment was marked as outdated.

Sign in to view

This comment was marked as duplicate.

Sign in to view

these were switched

5e0e36d

This comment was marked as outdated.

Sign in to view

ericjeney assigned invliD Jun 24, 2024

invliD reviewed Jun 24, 2024

View reviewed changes

evansjohnson added 3 commits June 25, 2024 13:09

no class - change outright

81a43f3

can keep opacity matching light theme

317b266

same number

86e5aa2

This comment was marked as outdated.

Sign in to view

evansjohnson commented Jun 25, 2024

View reviewed changes

comment

1e467c0

evansjohnson commented Jun 25, 2024

View reviewed changes

evansjohnson added 2 commits June 25, 2024 15:28

dont change input focus opacity for now

96f6834

input focus style

e991afe

evansjohnson and others added 2 commits July 1, 2024 08:35

scss lint

4236fe4

Add generated changelog entries

3350734

intent focus supports first 2 gray levels

5295e85

evansjohnson commented Jul 1, 2024

View reviewed changes

evansjohnson marked this pull request as ready for review July 1, 2024 15:22

gluxon self-assigned this Jul 1, 2024

increase toast focus contrast

79682a8

This was referenced Jul 2, 2024

Focus indicator overlap in core components #6889

Open

Focus indicator should be rounded for submenu items #6890

Open

Merge branch 'develop' into evanj/focus-indicator

a6274d1

invliD reviewed Jul 9, 2024

View reviewed changes

invliD previously approved these changes Jul 9, 2024

View reviewed changes

more descriptive var name

f55fad6

invliD approved these changes Jul 9, 2024

View reviewed changes

evansjohnson merged commit 0f5b88c into develop Jul 9, 2024
13 checks passed

evansjohnson deleted the evanj/focus-indicator branch July 9, 2024 21:09

evansjohnson added the Domain: accessibility label Jul 17, 2024

evansjohnson mentioned this pull request Aug 29, 2024

Add focus styles to FileInput #6950

Merged

		@@ -25,6 +25,10 @@ $pt-app-elevated-background-color: $light-gray4 !default;
		$pt-dark-app-elevated-background-color: $dark-gray3 !default;

		$pt-outline-color: rgba($blue3, 0.6) !default;

Update focus outline color to meet WCAG 2.2 contrast standards #6854

Update focus outline color to meet WCAG 2.2 contrast standards #6854

Conversation

evansjohnson commented Jun 18, 2024 • edited Loading

Fixes no issue

Checklist

Changes proposed in this pull request:

Reviewers should focus on:

WCAG Guidelines

Screenshot

changelog-app bot commented Jun 18, 2024 • edited by evansjohnson Loading

Generate changelog in packages/core/changelog/@unreleased

This comment was marked as outdated.

evansjohnson left a comment

Choose a reason for hiding this comment

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as duplicate.

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as outdated.

evansjohnson left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svc-palantir-github commented Jun 25, 2024

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

svc-palantir-github commented Jul 1, 2024

input focus style

svc-palantir-github commented Jul 1, 2024

Add generated changelog entries

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

svc-palantir-github commented Jul 1, 2024

input group not form group

evansjohnson commented Jul 1, 2024

alex-dales commented Jul 1, 2024

Comments

Questions

evansjohnson commented Jul 1, 2024

alex-dales commented Jul 1, 2024

evansjohnson commented Jul 1, 2024 • edited Loading

evansjohnson commented Jul 1, 2024

svc-palantir-github commented Jul 1, 2024

increase toast focus contrast

alex-dales commented Jul 2, 2024 • edited Loading

evansjohnson commented Jul 2, 2024

evansjohnson commented Jul 2, 2024

svc-palantir-github commented Jul 2, 2024

Merge branch 'develop' into evanj/focus-indicator

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

alex-dales commented Jul 9, 2024

svc-palantir-github commented Jul 9, 2024

more descriptive var name

evansjohnson commented Jun 18, 2024 •

edited

Loading

changelog-app bot commented Jun 18, 2024 •

edited by evansjohnson

Loading

Generate changelog in `packages/core/changelog/@unreleased`

evansjohnson left a comment •

edited

Loading

evansjohnson commented Jul 1, 2024 •

edited

Loading

alex-dales commented Jul 2, 2024 •

edited

Loading