@make-use-of/focus-visible

@make-use-of/focus-visible

Lightweight, dependency-free focus-visible polyfill for accessible focus indicators.

Install

npm install @make-use-of/focus-visible

Quick start

import '@make-use-of/focus-visible';

// Auto-initializes on import. Add CSS:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.focus-visible {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

API

• applyFocusVisible(scope?, options?): void — manually apply polyfill to a document or shadow root.
  • scope (optional): Document, DocumentFragment, or ShadowRoot. Defaults to document.
  • options.className (optional): Custom class name instead of 'focus-visible'.

import { applyFocusVisible } from '@make-use-of/focus-visible';

// Apply to shadow root
const shadowRoot = element.attachShadow({ mode: 'open' });
applyFocusVisible(shadowRoot);

// Use custom class name
applyFocusVisible(document, { className: 'keyboard-focus' });

Notes:

• Shows focus ring for keyboard navigation, hides for mouse/touch clicks.
• Always shows focus for text inputs (input, textarea, contentEditable).
• Adds .js-focus-visible class to document root for CSS targeting.
• Works with shadow DOM.