Focus ring

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react

import '@wolf-rayet/react/css/wolf-rayet.css';
import {  } from '@wolf-rayet/react';

Accessibility

What the component does for you, and what it needs from you.

• The ring is 2px at a 2px offset in the measured focus colour, so it sits clear of the control rather than on its edge.
• It is drawn on keyboard focus only, which is why removing it to tidy up mouse clicks is never necessary.
• The offset is what keeps the ring visible against a bold ground, where a ring drawn on the border would disappear.
• The colour is a token, so it has a measured value in both themes rather than being inverted.