Focus outline isn't fully styled

[xt0rted]

trafficstars

I'm not sure if this is a chrome issue or a generic styling issue, but the default outline is being applied along with our custom color. If you also set outline-style: solid the issue goes away and the outline border uses just the primary color. The rule in question is:

a:focus, button:focus, [tabindex] {
  outline-color: #2e8fff !important;
}

This focus outline is used on all popups, the project board header, and a number of other spots. It happens with the ui preview enabled and disabled. I've been seeing it for awhile now and just figured out how to "fix" it. Not sure what the long term fix should be though.

• Browser: chrome 83
• Operating System: win10
• Link to page with the issue: https://github.com/StylishThemes/GitHub-Dark/issues/1123#issuecomment-646031243 (view one of the edits)
• Screenshot:

Before

After

[xt0rted]

Looks like adding outline-style: solid fixes the popups, but breaks the markdown editor controls 😔

This might be a fix though.

[tabindex]:focus {
  outline-style: solid;
}

[silverwind]

I don't see any outlines in Firefox, even if I manually add :focus. Is there a user agent rule that Chrome applies (not sure if it's possible in Chrome Devtools to show) to set outline?

[xt0rted]

GitHub doesn't seem to be custom styling these, but it's odd that our custom style isn't applying as expected. Probably a bug in chrome.

[silverwind]

I see. Checked Firefox UA styles, it does not apply anything to :focus.

[silverwind]

What color is -webkit-focus-ring-color? If it's something that works on dark themes, I'd suggest we remove our (opinionated) rule.

[the-j0k3r]

a:focus, button:focus, [tabindex] {
  outline-color: #2e8fff !important;
}

try removing the !important

[the-j0k3r]

Also with chrome Version 83.0.4103.106 (Official Build) (64-bit) Windows 10 1903 this is what I see with https://github.com/StylishThemes/GitHub-Dark/issues/1123#issuecomment-646031243

I havent touched GitHub Dark CSS.

[xt0rted]

@the-j0k3r the timeline focus is a different style. The rule I'm talking about is applied to popups and other focusable elements with the [tabindex] selector. The easiest way to see it is by clicking the transfer issue link in the right column. The popup for that has the tabindex attribute set and will use this rule.

[xt0rted]

What color is -webkit-focus-ring-color? If it's something that works on dark themes, I'd suggest we remove our (opinionated) rule.

By default it's a 2 pixel border that's both black and white.

It looks ok with GHD enabled I think.

Usually the outline color on desktop is blue, odd it's black & white for this. On mobile and in responsive view in dev tools it's usually orange but here it's orange & white.

[the-j0k3r]

Seems its the radius is the issue with that border, they set all radius with the design updates to 6px and thats still 3px.

TBH seems like upstream bug with the design updates feature preview.

Why are we even trying to fix green beta features idk.

[silverwind]

I like the base-color outline more than black/white. What is the acutal issue here? The border radius?

[xt0rted]

When you set the outline color it leaves the white border and changes the black border so the color looks off. Setting the outline style fixes that so it's just the primary color. If you set the outline style/width you also need to change the selector to [tabindex]:focus otherwise additional things on the site show the outline by default. It also seems a little better at 2px instead of 1px but that might be due to my resolution.

[silverwind]

Ah I see. I'll be tricky because you'd want to specifically target Chrome only with a overrule to the :focus rule but it's not possible using conventional CSS. Also I read that this styling is actually platform-specific as well (e.g. macOS will use a system-defined outline color, default light blue).

[xt0rted]

@the-j0k3r this has nothing to do with the ui preview. This has been visible on the site for months and is due to the default outline style in chrome and how it behaves when setting it to a custom color (which github is NOT doing, we are). It's strictly the black/white border that shows up on elements that receive focus when tabbing through them. You can see more of this by tabbing through the avatar and additional links on issue comments.

@silverwind this used to be blue on windows as well, it porbably changed a few versions back. On desktop it was blue and devtools it was orange.

[silverwind]

What I don't quite get is how can they replicate that 2px border with different color using only a single color variable. outline-color seems to only accept a single color. Is there more UA styling we didn't see yet?

[silverwind]

Ah, I see its outline-style: auto which "Permits the user agent to render a custom outline style", partially ignoring CSS properties it seems.