v145 · DOM · Focus Ring Control

Focus Ring Control

Click each button to programmatically focus the target element with a different focusVisible setting. The status readout shows whether :focus-visible matches — matching means the browser paints a visible focus ring.

Chrome 145 required for focusVisible in FocusOptions. In older browsers the option is silently ignored and the browser uses its default focus-visibility heuristic.

interactive demo

Target element (click buttons below to focus it)

Focus target
Click a button to focus the target

focusVisible: true

Always shows the focus ring. :focus-visible matches. Use when focus was triggered by keyboard action or screen reader.

focusVisible: false

Never shows the focus ring. :focus-visible does not match. Use when focus was triggered by a mouse click.

no option (default)

Browser guesses based on recent input. Same as calling element.focus() without options — existing behavior.

code

const target = document.getElementById('target');

// Always show focus ring
target.focus({ focusVisible: true });

// Never show focus ring
target.focus({ focusVisible: false });

// Default heuristic (backwards compatible)
target.focus();

// Can combine with other FocusOptions
target.focus({ focusVisible: true, preventScroll: true });

// Detect if :focus-visible matches after focusing
target.addEventListener('focus', () => {
  const isFocusVisible = target.matches(':focus-visible');
  console.log('Focus ring visible:', isFocusVisible);
});

see also