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
[n/a] 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 all background colors - but should we provide any buffer so that the default focus indicator meets standards up to a certain shade of background color? 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

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:
TODO

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

[WIP] Update focus outline color to meet 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, used in input-transition-shadow
Audit focus outline of all components (may leave for follow up PRs) - 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
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.

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

evansjohnson commented Jun 18, 2024 •

edited

Loading

changelog-app bot commented Jun 18, 2024

This comment was marked as outdated.

evansjohnson left a 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.

invliD Jun 24, 2024

evansjohnson Jun 25, 2024

This comment was marked as outdated.

evansjohnson left a comment •

edited

Loading

evansjohnson Jun 25, 2024

evansjohnson Jun 25, 2024

svc-palantir-github commented Jun 25, 2024

evansjohnson Jun 25, 2024

evansjohnson Jun 25, 2024

evansjohnson Jun 25, 2024

		@@ -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

Are you sure you want to change the base?

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

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.

invliD Jun 24, 2024

Choose a reason for hiding this comment

evansjohnson Jun 25, 2024

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

evansjohnson Jun 25, 2024

Choose a reason for hiding this comment

evansjohnson Jun 25, 2024

Choose a reason for hiding this comment

svc-palantir-github commented Jun 25, 2024

comment

evansjohnson Jun 25, 2024

Choose a reason for hiding this comment

evansjohnson Jun 25, 2024

Choose a reason for hiding this comment

evansjohnson Jun 25, 2024

Choose a reason for hiding this comment

evansjohnson commented Jun 18, 2024 •

edited

Loading

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

evansjohnson left a comment •

edited

Loading