useIndicatorFocusRing
Draws the standard focus ring on the indicator of a control whose real input is visually hidden; a checkbox or radio focuses an opacity-0 input, so the ring has to appear on the picture beside it. The ring is painted imperatively on the indicator's own element, which is the only element whose border-radius can shape it, and only on :focus-visible, so pointer clicks stay quiet. Owning it here means a theme-supplied indicator cannot ship a control with no visible focus (WCAG 2.4.7) by ignoring a prop.
Signature
useIndicatorFocusRing(containerRef: RefObject<HTMLElement | null>, isDisabled = false): UseIndicatorFocusRingReturn| Name | Type and behavior |
|---|---|
containerRef | RefObject<HTMLElement | null> · requiredRef to an element wrapping only the indicator, so its single element child is unambiguously the thing to ring. |
isDisabled | boolean · optional · default falseSkip the ring; a disabled control is not focusable. |
| Name | Type and behavior |
|---|---|
focusProps | {onFocus: (event: FocusEvent<HTMLElement>) => void; onBlur: () => void}Spread onto the element that owns the focusable input. |
Usage
Draws the standard focus ring on the indicator of a control whose real input is visually hidden; a checkbox or radio focuses an opacity-0 input, so the ring has to appear on the picture beside it. The ring is painted imperatively on the indicator's own element, which is the only element whose border-radius can shape it, and only on :focus-visible, so pointer clicks stay quiet. Owning it here means a theme-supplied indicator cannot ship a control with no visible focus (WCAG 2.4.7) by ignoring a prop.
- Wrap only the indicator in the ref'd element; a wrapper holding label text would ring the whole row.
- Spread focusProps on the element that contains the hidden input, not on the input itself.
- Ask a themeable indicator to draw its own focus ring; a replacement that ignores the prop leaves the control with no visible focus.