Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve color contrast of the focus ring #2296

Merged
merged 6 commits into from
Nov 14, 2023

Conversation

connor-baer
Copy link
Member

@connor-baer connor-baer commented Nov 14, 2023

Addresses DSYS-443.

Purpose

Circuit UI's focus ring doesn't meet contrast requirements (1:1.11).

Before

Screenshot 2023-11-14 at 13 02 01

After

Screenshot 2023-11-14 at 13 02 30

Approach and changes

  • Darken the --cui-border-focus and colors.border.focus design tokens
  • Reduce the thickness of the focus ring and offset it from the focused element

Definition of done

  • Development completed
  • Reviewers assigned
  • Unit and integration tests
  • Meets minimum browser support
  • Meets accessibility requirements

Copy link

changeset-bot bot commented Nov 14, 2023

🦋 Changeset detected

Latest commit: ab2f8b7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@sumup/design-tokens Minor
@sumup/circuit-ui Major
@sumup/eslint-plugin-circuit-ui Major
@sumup/stylelint-plugin-circuit-ui Major
@sumup/astro-template-circuit-ui Patch
@sumup/remix-template-circuit-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Nov 14, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
oss-circuit-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 14, 2023 3:58pm

Copy link

codecov bot commented Nov 14, 2023

Codecov Report

Merging #2296 (ab2f8b7) into main (c776399) will increase coverage by 0.00%.
The diff coverage is 100.00%.

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2296   +/-   ##
=======================================
  Coverage   97.15%   97.15%           
=======================================
  Files         251      251           
  Lines       19862    19864    +2     
  Branches     1224     1224           
=======================================
+ Hits        19297    19299    +2     
  Misses        551      551           
  Partials       14       14           
Files Coverage Δ
packages/circuit-ui/styles/style-mixins.ts 98.26% <100.00%> (+0.01%) ⬆️
packages/design-tokens/themes/light.ts 100.00% <100.00%> (ø)

@connor-baer connor-baer changed the title Improve focus ring Improve color contrast of the focus ring Nov 14, 2023
@connor-baer connor-baer marked this pull request as ready for review November 14, 2023 15:10
@connor-baer connor-baer requested a review from a team as a code owner November 14, 2023 15:10
@connor-baer connor-baer requested review from tareqlol and removed request for a team November 14, 2023 15:10
@connor-baer connor-baer added the ♿ accessibility Improves usability label Nov 14, 2023
@connor-baer connor-baer merged commit bd4e7ec into main Nov 14, 2023
10 checks passed
@connor-baer connor-baer deleted the feature/focus-outline-contrast branch November 14, 2023 16:03
@connor-baer connor-baer mentioned this pull request Nov 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant