Focus ring

Install

One package and one stylesheet. The stylesheet holds the tokens every component uses.

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 wide with a 2px offset, in the measured focus colour. The offset leaves a gap between the ring and the control.
• It only shows on keyboard focus, so you never need to remove it to hide it on mouse clicks.
• The offset keeps the ring visible on bold backgrounds, where a ring on the border would disappear.
• The colour is a token, so it has a measured value in both themes instead of an inverted one.