remove focus ring around clicked icons

Created by: sqs

Low priority

When an icon is focused, such as when it's in a button, it acquires the standard OS focus ring (in my case, a blue border). This is undesirable.

For example, if you click-and-hold on the lock icon on a code discussion comment header and then move your mouse away, the focus ring displays on the icon, even though it is not a button and should not have a focus ring.

Created by: sqs

Ah, thanks for prodding me to look into this more. It actually (also?) occurs when there is a data-tooltip, likely because that adds a focusin listener. But it only adds those listeners to the document, not to each element. Will look into this.

Created by: sqs

@felixfbecker I can't repro the Sentry issue you saw. Which SVG are you seeing that occur on? Or did you add a dummy SVG to some random page?

Created by: felixfbecker

Maybe it is like you say and the focusin listener of data-tooltip is the culprit. See in my screenshot how there is also a focusin listener, and it happened after I clicked/hovered it, so the Sentry listeners could be a correlation without causation.

I looked at the icon in your PR description.

Created by: sqs

It is coming from Popper.js, which sets a focusin listener, which causes Chrome to show the outline. I narrowed the CSS rule. I can't think of a better fix.

Created by: felixfbecker

Hmm, I think Chrome is right though. For a11y, elements with tooltips must be focusable. If a focusable element is focused, it should have a focus ring (our custom/Bootstrap one though). Instead of disabling, I think we should add a global rule for [data-tooltip]:focus that applies our custom/Bootstrap outline (the same that buttons have).

Created by: codecov[bot]

Codecov Report

Merging #4454 into master will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #4454   +/-   ##
=======================================
  Coverage   47.06%   47.06%           
=======================================
  Files         717      717           
  Lines       43439    43439           
  Branches     1741     1741           
=======================================
  Hits        20445    20445           
  Misses      21066    21066           
  Partials     1928     1928

Impacted Files	Coverage Δ
web/src/search/input/QueryBuilder.tsx	96.15% <0%> (ø)
web/src/nav/NavLinks.tsx	92.5% <0%> (ø)

Created by: sqs

        @include box-shadow($btn-focus-box-shadow);

is not working. Not worth the effort. Abandoning.