I added the following CSS code to get rid of the outline that was appearing after click on a link HTML element.
CSS Code:
.window-leveling-btn:focus {
outline: 0;
}
Afterwards I get the following csslint error message. I don't understand why I shouldn't be doing this or how I should do it correctly.
Error Msg: WARNING: Outlines shouldn't be hidden unless other visual changes are made. Use of outline: none or outline: 0 should be limited to :focus rules. (outline-none)
According to the CSSLint page for outline-none:
The focus outline is important for accessibility because it gives a visual indication as to where the focus is on the page. For keyboard-only users, tracking the focus on a web page is impossible without the visual indication given by the focus outline.
Basically, the CSSLint team believes you shouldn't be doing that because it makes it harder for users to navigate the page.
As for suppressing the error, it would depend on the application you're coding in (command line, or a text editor). According to this CSSLint GitHub issue you can turn off the linting for a rule in a comment, which should cover most cases.