I'm having some issues trying to style the :focus state for text links in my SCSS design system, to ensure accessibility on keyboard navigation but also to make it look a bit nicer than the stock box outline.
I've managed to get it working cross-browser for text fields and buttons by using outline:none; and replacing it visually with box-shadow: 0 0 0 2px $color. I have to do this because Safari's focus outline doesn't follow border-radius.
Here's how it looks for form fields: three text fields, the first of which has a custom focus state border
But for text, it still has the blue outline: snippet of text with visited links, one has focus but still has a blue outline
html {
box-sizing: border-box;
font-size: 16px;
}
a {
color: #0000ff;
text-decoration: underline;
}
p {
color: #3b3b3b;
font-family: system-ui;
line-height: 1.5;
padding-left: 1rem;
padding-right: 1rem;
}
a:visited {
color: purple;
}
a:focus-visible {
text-decoration: none;
background-color: #0000ff;
color: white;
outline: 0;
box-shadow: 0 0 0 2px #0000ff;
border-radius: 2px;
}
a:visited:focus-visible {
text-decoration: none;
background-color: purple;
color: white;
outline: 0;
box-shadow: 0 0 0 2px purple;
border-radius: 2px;
}
<p>Here is some text. <a href="#">Here's one link.</a> And here is some other text in between. And here is another link. <a href="#">Another link.</a></p>
As you can see, when you use tabs or keyboard navigation, when a visited link has :focus, it gets the correct background and text color, but still has a blue focus border, and I can't seem to get rid of it.
Using the Inspector, I can't see any other styles that are overriding it. It does follow the border-radius, so I'm just kind of confused as to where it's coming from.
CSS is supposed to let you stack basic selectors like :visited and :focus-visible, right?
For reference, this isn't exclusive to Safari, it happens in Chrome and Firefox as well, so it does seem to be CSS-related.