13
1 min read
Icons, focus & a11y tokens
Icons drift. 16 here, 18 there, 22 in the nav. Then someone removes the focus ring because it looked busy. Keyboard users disappear.
Usability is tokenized the same way color is. One focus-ring token. A small icon-size set. You do not invent a ring per component, and you do not delete the only way to see focus.
Contrast math lives in Grade. This lesson is the structure that keeps focus visible.
No ring and three leftover sizes on the left. One focus.ring and icon.sm/md/lg on the right.
focusnone
nav icon22px
button icon18px
focusfocus.ring
icon.sm16px
icon.md20px
The ring is already painted. The sizes already agree. You do not invent either per component.
:root {
--color-ring: #111111;
--focus-ring: 2px solid var(--color-ring);
--icon-size-sm: 16px;
--icon-size-md: 20px;
--icon-size-lg: 24px;
}
:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
.icon {
width: var(--icon-size-md);
height: var(--icon-size-md);
}:root {
--color-ring: #111111;
--focus-ring: 2px solid var(--color-ring);
--icon-size-sm: 16px;
--icon-size-md: 20px;
--icon-size-lg: 24px;
}
:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
}
.icon {
width: var(--icon-size-md);
height: var(--icon-size-md);
}