VBC-913: outline-none-hazard

error

Category: ux-dx
Analysis: Regex (whole file)
File types: .css, .scss
Scope: source code only, ignoring anything inside strings and comments
Tags: accessibility ux

What it reports

Focus outline removed at line {line} with nothing replacing it. Keyboard users lose all sense of position. Pair it with a :focus-visible rule that draws a visible ring, which is what this rule looks for before reporting.

Flagged

a:focus { outline: none; }

input[type="range"]:focus-visible { outline: none; }

.editor:focus-visible { outline: none !important; }

Not flagged

a:focus { outline: 2px solid currentColor; }

.card { cursor: default; outline: none; overflow: hidden; }

.ProseMirror { outline: none; min-height: 100vh; }

*:focus {
  outline: none;
}
*:focus-visible {
  outline: 3px solid #0ff;
}

Pattern

outline:\s*(?:none|0)\b(?![\s\S]{0,400}?:focus-visible[\s\S]{0,140}?outline\s*:\s*(?!none|0|\s*;))