Display outline on control buttons when focused

[ryanhamley]

Launch Checklist

Fixes #8246

• briefly describe the changes in this PR
  • this creates an outline on the control buttons when they are tab focused, which helps with accessibility issues
  • this avoids using the CSS outline property because outlines do not follow rounded borders. box-shadow does follow rounded borders, leading to a cleaner looking UI while simulating the outline effect (not sure why the GIF is so slow but you get the idea)

[andrewharvey]

This looks and works great!

[life777]

@ryanhamley I agree, your solution looks better. Thanks

[mourner]

Looks good to me, me pending lint fixes. One thing to note is that the outline will now appear when you click on the buttons with a mouse, but that's probably OK.

[ryanhamley]

I fixed the lint issue and added a couple new rules that will only display the outline when the buttons are focused by keyboard input using the :focus-visible selector. This is currently only supported out of the box in Firefox. It's also supported in Chrome behind the enable-experimental-web-platform-features flag. Normally I wouldn't use an experimental feature, but this is part of the W3C spec and seems very likely to be implemented widely in the not-too-distant future; it's harmless for browsers that don't implement it and makes the UI a touch nicer for browsers that do. That being said, I'm not real attached to it so we can remove those two rules if anyone has an objection.

[mourner]

🍏 I didn't know about focus-visible but it totally makes sense to use it, because it adheres to the principles of progressive enhancement — browsers that support it will get enhanced experience while browsers that don't are still fully functional.

[mourner]

Nit: you can group these two selectors.

[ryanhamley]

I actually can't because I just realized Firefox uses the -moz-focusring selector instead of focus-visible so combining them makes the entire rule invalid in Firefox which breaks all focusing on the buttons. It turns out that Firefox and Safari don't appear to register clicks as focusing the button so they just work without this rule. I'll still leave it though because it's a progressive enhancement in Chrome and presumably newer versions of Edge.