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.

Sign up for GitHub

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
Merged

Improve color contrast of the focus ring #2296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2fab0fd
Improve focus ring
connor-baer Nov 14, 2023
e8b05c8
Use double quotes in CSS files
connor-baer Nov 14, 2023
ba51509
Update snapshots
connor-baer Nov 14, 2023
06c031b
Fix focusOutline style mixin
connor-baer Nov 14, 2023
1a70b32
Fix inset focus ring
connor-baer Nov 14, 2023
ab2f8b7
Improve focus ring for ListItems
connor-baer Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/blue-items-own.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/design-tokens': minor
---

Updated the `--cui-border-focus` color token to meet contrast requirements.
5 changes: 5 additions & 0 deletions .changeset/chilled-yaks-watch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sumup/circuit-ui': minor
---

Changed the focus ring to have a 2px offset from the focused element.
4 changes: 2 additions & 2 deletions .storybook/decorators/withThemeProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const lightTheme = css`
/* Special colors */
--cui-bg-overlay: rgba(0, 0, 0, 0.4);
--cui-bg-elevated: #ffffff;
--cui-border-focus: #d8dde1;
--cui-border-focus: #000000;
}
`;

Expand Down Expand Up @@ -308,7 +308,7 @@ const darkTheme = css`
/* Special colors */
--cui-bg-overlay: rgba(0, 0, 0, 0.4);
--cui-bg-elevated: #ffffff;
--cui-border-focus: #ebf4ff;
--cui-border-focus: #3064e3;
}
`;

Expand Down
8 changes: 4 additions & 4 deletions packages/circuit-ui/components/Checkbox/Checkbox.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
display: block;
width: 18px;
height: 18px;
content: '';
content: "";
background-color: var(--cui-bg-normal);
border: 1px solid var(--cui-border-normal);
border-radius: 3px;
Expand Down Expand Up @@ -49,7 +49,7 @@
.base:focus + .label::before {
border-color: var(--cui-border-accent);
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus);
}

.base:focus:not(:focus-visible) + .label::before {
Expand All @@ -62,8 +62,8 @@
border-color: var(--cui-border-accent);
}

.base:checked:not(:indeterminate) + .label > svg[data-symbol='checked'],
.base:indeterminate + .label > svg[data-symbol='indeterminate'] {
.base:checked:not(:indeterminate) + .label > svg[data-symbol="checked"],
.base:indeterminate + .label > svg[data-symbol="indeterminate"] {
opacity: 1;
transform: translateY(-50%) scale(1, 1);
}
Expand Down
6 changes: 3 additions & 3 deletions packages/circuit-ui/components/ImageInput/ImageInput.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.input:focus + label > *:last-child {
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus);
}

.input:focus + label > *:last-child::-moz-focus-inner {
Expand All @@ -28,7 +28,7 @@
width: 100%;
height: 100%;
pointer-events: none;
content: '';
content: "";
background-color: var(--cui-bg-strong);
border-radius: 12px;
opacity: 0;
Expand Down Expand Up @@ -97,7 +97,7 @@

.label.dragging *:last-child {
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus);
}

.label.dragging *:last-child::-moz-focus-inner {
Expand Down
4 changes: 2 additions & 2 deletions packages/circuit-ui/components/ListItem/ListItem.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ button.base:focus {
z-index: 2;
border-color: transparent;
outline: 0;
box-shadow: inset 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 4px var(--cui-bg-normal), 0 0 0 6px var(--cui-border-focus);
}

a.base:focus::-moz-focus-inner,
Expand Down Expand Up @@ -79,7 +79,7 @@ button.base:active {
left: calc(-1 * var(--cui-border-width-mega));
z-index: 1;
pointer-events: none;
content: '';
content: "";
border: var(--cui-border-width-mega) solid var(--cui-border-accent);
border-radius: var(--cui-border-radius-mega);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Popover/Popover.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
left: 0;
display: block;
height: var(--cui-spacings-kilo);
content: '';
content: "";
background: linear-gradient(
rgb(255 255 255 / 0%),
rgb(255 255 255 / 66%),
Expand Down
16 changes: 8 additions & 8 deletions packages/circuit-ui/components/RadioButton/RadioButton.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
display: block;
width: 18px;
height: 18px;
content: '';
content: "";
background-color: var(--cui-bg-normal);
border: 1px solid var(--cui-border-normal);
border-radius: 100%;
Expand All @@ -32,7 +32,7 @@
display: block;
width: 10px;
height: 10px;
content: '';
content: "";
background-color: var(--cui-fg-accent);
border-radius: 100%;
opacity: 0;
Expand All @@ -48,7 +48,7 @@
.base:focus + label::before {
border-color: var(--cui-border-accent);
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus);
}

.base:focus:not(:focus-visible) + label::before {
Expand Down Expand Up @@ -98,20 +98,20 @@

/* Invalid */

[aria-invalid='true'] .base:not(:focus) + .label::before {
[aria-invalid="true"] .base:not(:focus) + .label::before {
background-color: var(--cui-bg-danger);
border-color: var(--cui-border-danger);
}

[aria-invalid='true'] .base:not(:focus) + .label::after {
[aria-invalid="true"] .base:not(:focus) + .label::after {
background-color: var(--cui-fg-danger);
}

[aria-invalid='true'] .base:hover + .label::before,
[aria-invalid='true'] .base:focus + .label::before {
[aria-invalid="true"] .base:hover + .label::before,
[aria-invalid="true"] .base:focus + .label::before {
border-color: var(--cui-border-danger-hovered);
}

[aria-invalid='true'] .base:checked + .label::before {
[aria-invalid="true"] .base:checked + .label::before {
border-color: var(--cui-border-danger);
}
5 changes: 2 additions & 3 deletions packages/circuit-ui/components/Selector/Selector.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.base:focus + .label::before {
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus);
}

.base:focus:not(:focus-visible) + .label::before {
Expand Down Expand Up @@ -72,7 +72,7 @@
display: block;
width: 100%;
height: 100%;
content: '';
content: "";
border: var(--cui-border-width-kilo) solid var(--cui-border-normal);
border-radius: var(--cui-border-radius-byte);
transition: border var(--cui-transitions-default);
Expand Down Expand Up @@ -101,7 +101,6 @@
text-align: start;
}


/* Sizes */

.kilo {
Expand Down
15 changes: 6 additions & 9 deletions packages/circuit-ui/components/Table/components/TableHeader/TableHeader.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,8 @@
left: 100%;
width: 6px;
height: 100%;
content: '';
background: linear-gradient(
90deg,
rgb(0 0 0 / 12%),
rgb(255 255 255 / 0%)
);
content: "";
background: linear-gradient(90deg, rgb(0 0 0 / 12%), rgb(255 255 255 / 0%));
}
}

Expand Down Expand Up @@ -89,9 +85,9 @@
display: block;
width: 100%;
height: 100%;
content: '';
content: "";
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus);
}

.base[aria-sort]:focus-within,
Expand All @@ -100,7 +96,8 @@
background-color: var(--cui-bg-normal-hovered);
}

.base[aria-sort]:focus-within > button,.base[aria-sort]:hover > button {
.base[aria-sort]:focus-within > button,
.base[aria-sort]:hover > button {
opacity: 1;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Table/components/TableRow/TableRow.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ tbody .base:last-child td {
.base[tabindex]:focus {
z-index: 1;
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal), 0 0 0 4px var(--cui-border-focus);

/* Chrome doesn't respect position: relative; on table elements so the transform property is used to create a separate stacking context which is needed to show the focus outline above the other table rows. */
transform: translate(0, 0);
Expand Down
8 changes: 4 additions & 4 deletions packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

.base:focus {
outline: 0;
box-shadow: inset 0 0 0 4px var(--cui-border-focus);
box-shadow: inset 0 0 0 2px var(--cui-border-focus);
}

.base:focus::-moz-focus-inner {
Expand All @@ -38,18 +38,18 @@
background-color: var(--cui-bg-normal-pressed);
}

.base[aria-selected='true'] {
.base[aria-selected="true"] {
position: relative;
color: var(--cui-fg-normal);
}

.base[aria-selected='true']::after {
.base[aria-selected="true"]::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: var(--cui-spacings-bit);
content: ' ';
content: " ";
background: var(--cui-border-accent);
}
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/TopNavigation/TopNavigation.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ button.hamburger {
.logo a:focus,
.logo button:focus {
outline: 0;
box-shadow: inset 0 0 0 4px var(--cui-border-focus);
box-shadow: inset 0 0 0 2px var(--cui-border-focus);
}

.logo a:focus::-moz-focus-inner,
Expand Down
22 changes: 11 additions & 11 deletions packages/circuit-ui/styles/shared.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

.list-item:focus {
outline: 0;
box-shadow: inset 0 0 0 4px var(--cui-border-focus);
box-shadow: inset 0 0 0 2px var(--cui-border-focus);
}

.list-item:focus::-moz-focus-inner {
Expand Down Expand Up @@ -78,28 +78,28 @@
background-color: var(--cui-bg-normal-disabled);
}

.navigation-item[aria-expanded='true'],
.navigation-item[aria-current='page'] {
.navigation-item[aria-expanded="true"],
.navigation-item[aria-current="page"] {
color: var(--cui-fg-accent);
background-color: var(--cui-bg-accent);
}

.navigation-item[aria-expanded='true']:hover,
.navigation-item[aria-current='page']:hover {
.navigation-item[aria-expanded="true"]:hover,
.navigation-item[aria-current="page"]:hover {
color: var(--cui-fg-accent-hovered);
background-color: var(--cui-bg-accent-hovered);
}

.navigation-item[aria-expanded='true']:active,
.navigation-item[aria-current='page']:active {
.navigation-item[aria-expanded="true"]:active,
.navigation-item[aria-current="page"]:active {
color: var(--cui-fg-accent-pressed);
background-color: var(--cui-bg-accent-pressed);
}

.navigation-item[aria-expanded='true']:disabled,
.navigation-item[aria-expanded='true'][disabled],
.navigation-item[aria-current='page']:disabled,
.navigation-item[aria-current='page'][disabled] {
.navigation-item[aria-expanded="true"]:disabled,
.navigation-item[aria-expanded="true"][disabled],
.navigation-item[aria-current="page"]:disabled,
.navigation-item[aria-current="page"][disabled] {
color: var(--cui-fg-accent-disabled);
background-color: var(--cui-bg-accent-disabled);
}
10 changes: 6 additions & 4 deletions packages/circuit-ui/styles/style-mixins.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,8 @@ describe('Style helpers', () => {
`
"
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal),
0 0 0 4px var(--cui-border-focus);

&::-moz-focus-inner {
border: 0;
Expand All @@ -244,7 +245,7 @@ describe('Style helpers', () => {
`
"
outline: 0;
box-shadow: inset 0 0 0 4px var(--cui-border-focus);
box-shadow: inset 0 0 0 2px var(--cui-border-focus);

&::-moz-focus-inner {
border: 0;
Expand All @@ -263,7 +264,8 @@ describe('Style helpers', () => {
"
&:focus {
outline: 0;
box-shadow: 0 0 0 4px var(--cui-border-focus);
box-shadow: 0 0 0 2px var(--cui-bg-normal),
0 0 0 4px var(--cui-border-focus);

&::-moz-focus-inner {
border: 0;
Expand All @@ -285,7 +287,7 @@ describe('Style helpers', () => {
"
&:focus {
outline: 0;
box-shadow: inset 0 0 0 4px var(--cui-border-focus);
box-shadow: inset 0 0 0 2px var(--cui-border-focus);

&::-moz-focus-inner {
border: 0;
Expand Down
Loading
Loading