13
3 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.
Tab through. One token draws the ring on every control.
Tab the input, then the button. One token. If you remove it, you owe a replacement at the token level, not a comment in the CSS.