Responsive

focus-visible-style

Block outline-none unless a replacement focus indicator is present.

Detects elements that strip the default focus outline (outline-none, outline-0) without providing a focus-visible: replacement. Removing focus indicators silently breaks keyboard navigation for every assistive-tech user; the rule keeps the UX intact.

Behavior

• Fixable: No.
• Suggestions: Yes — proposes focus-visible:ring-2.
• Maps to: WCAG 2.4.7 (Focus Visible).

Examples

Bad:

<button className="outline-none">Click</button>

Good:

<button className="outline-none focus-visible:ring-2 focus-visible:ring-offset-2">Click</button>

Related rules

• focus-trap-patternsDetect modals and drawers that don't establish a focus trap.
• icon-accessibilityRequire icons to carry an accessible name or be marked decorative.
• aria-validationForbid invalid ARIA roles and unknown aria-* attributes.

Use it

Enable focus-visible-style in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/focus-visible-style': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules