1
HTML/CSSAdvanced#css#grid
HTML/CSSIntermediate#css#accessibility
What is the difference between resetting focus outlines and providing accessible focus styles?
Simply removing outline: none breaks keyboard accessibility since users can't tell what's focused. Instead, replace it with a custom, sufficiently visible focus style (using :focus-visible) so mouse users aren't bothered while keyboard users retain clear navigation cues.
Example
button:focus { outline: none; } /* bad alone */
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}