• Success Criterion 2.4.7
  • Conformance level AA

Focus-Visible Polyfill Misconfigured to Show Nothing at All

2.4.7 — Focus Visible

Scenario

Setting

A fitness app's workout tracker

What’s wrong

Component libraries with:focus-visible (keyboard-focus styling) polyfill misconfigured so keyboard focus matches mouse and shows nothing.

Example 

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

Why it matters

Because of the inverted rule, keyboard focus on the Start Workout button never gets an outline, while the polyfill logic works correctly everywhere else.

How to test

Tab through components built with a:focus-visible polyfill: check whether keyboard focus and mouse click are being treated identically (showing nothing) due to misconfiguration.

How to fix

When adopting a focus-visible polyfill, verify the visible style is attached to the class it actually applies on keyboard use.

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}
.focus-visible {
  outline: 2px solid #ff6b35;
}

Outcome

A user tabs to Start Workout and sees a clear orange outline confirming it's focused.

Who is affected

Keyboard users lose focus visibility across every component using the library, even though it's designed to support it.

Learn more

Related scenarios