palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.51k stars 2.15k forks source link

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

Open evansjohnson opened 1 week ago

evansjohnson commented 1 week ago

Fixes no issue

Checklist

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:

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:

Screenshot 2024-06-21 at 8 28 04 AM Screenshot 2024-06-21 at 8 27 54 AM

This PR:

Screenshot 2024-06-21 at 8 28 04 AM Screenshot 2024-06-21 at 8 27 54 AM
changelog-app[bot] commented 1 week ago

Generate changelog in changelog-dir>`packages/core/changelog/@unreleased`</changelog-dir

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

- [ ] Feature - [x] Improvement - [ ] Fix - [ ] Break - [ ] Deprecation - [ ] Manual task - [ ] Migration

Description

Update focus indicator colors to meet WCAG 2.2 contrast standards **Check the box to generate changelog(s)** - [x] Generate changelog entry
svc-palantir-github commented 1 week ago

update focus outline color to meet contrast standards

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

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

svc-palantir-github commented 1 week ago

dark theme as well and against more background colors

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

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

svc-palantir-github commented 1 week ago

lint

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

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

evansjohnson commented 1 week ago
Screenshot 2024-06-21 at 5 28 53 PM

trying to figure out intent inputs before marking this ready to review

svc-palantir-github commented 1 week ago

these were switched

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

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

svc-palantir-github commented 5 days ago

same number

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

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

svc-palantir-github commented 5 days ago

comment

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

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

svc-palantir-github commented 4 hours ago

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 commented 4 hours ago

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.

svc-palantir-github commented 2 hours ago

intent focus supports first 2 gray levels

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

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

svc-palantir-github commented 2 hours ago

dark theme supports first 4 gray levels

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

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

evansjohnson commented 2 hours ago

Intent contrast ratios against different background colors: Screenshot 2024-07-01 at 10 33 28 AM

Color Hex BP color Contrast with $white/$black at 0.752 opacity Contrast with $light-gray-1/$dark-gray-5 at 0.752 opacity Contrast with $white/$black at 1 opacity Contrast with $light-gray-1/$dark-gray-5 at 1 opacity Contrast with $light-gray-2/$dark-gray-4 at 1 opacity Contrast with $light-gray-4
Light primary #2d72d2 $blue3 3.06 2.42 4.72 3.29 3.55  
Light success #238551 $green3 3.01 2.36 4.62 3.22 3.48  
Light warning #c87619 $orange3 2.47 1.95 3.46 2.41 2.61 3
Light danger #cd4246 $red3 3.19 2.53 4.7 3.28 3.54  
Dark primary #4c90f0 $blue4 3.76 2.24 5.76 2.88 3.36  
Dark success #32a467 $green4 3.79 2.26 5.84 2.92 3.4  
Dark warning #ec9a3c $orange4 5.07 2.98 8.13 4.07 4.75  
Dark danger #e76a6e $red4 3.81 2.25 5.87 2.94 3.43  
svc-palantir-github commented 2 hours ago

document focus contrast support with background colors

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

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

svc-palantir-github commented 1 hour ago

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 commented 1 hour ago

Compare public docs vs latest "documentation" link from latest @svc-palantir-github comment

Design review checklist: