Try tabbing through this button (no focus indicator visible):
Keyboard users can't see where focus is.
Bug 69: Focus — Visible Focus Indicator Removed
WCAG 2.4.7 (Focus Visible) | CSS removes outline or default focus styling (outline: none).
Bug: outline: none Without Replacement
Bug: Universal outline Reset
/* BUG: Removes all focus indicators */
* {
outline: none;
}
/* BUG: Also seen as: */
*:focus {
outline: none;
}
This disables focus on all elements, breaking keyboard navigation visibility.
Bug: Focus Color Insufficient Contrast
Even with an outline, if it's the same color as the background or too thin, it won't be visible. HAL ensures at least 3:1 contrast ratio for focus indicators.
Bug: Focus Only Visible on Hover
/* BUG: Only hover, no focus */
button:hover {
border: 2px solid #2196F3;
}
/* Missing button:focus styling */
/* FIXED: HAL adds focus styling */
button:focus {
outline: 2px solid #2196F3;
outline-offset: 2px;
}
How HAL Fixes This: HAL detects CSS rules that remove focus indicators (outline: none, :focus { outline: none; }, etc.) and either removes those rules or adds custom focus styling that meets WCAG 2.4.7 requirements. HAL ensures focus indicators have at least 3:1 contrast ratio and are at least 2px visible on keyboard focus.