11

When clicking to upvote a comment, the icon seems to retain focus resulting in a border around the icon (the bottom comment in the image below). This remains until I click elsewhere on the page or switch windows (at which point it looks like the top comment in the image below). This happens on multiple SE sites, and I'm not sure when it started. Previously, clicking the upvote icon would switch it from gray to blue, and no border would be present (or it would go away on it's own immediately).

System is Windows 10 with Chrome browser Version 68.0.3440.106 (Official Build) (64-bit)

Comments

8
  • Ever seen dashed borders around things when you click on them or press the Tab key? That's all that is. Aug 29, 2018 at 21:26
  • @SonictheInclusiveHedgehog: No, it isn't, since tabbing to the comment upvote doesn't actually show this. Instead, it shows … a faint dashed border. Aug 29, 2018 at 23:13
  • 2
    @NathanTuggy Oh...but the SE team has dismissed this as by design, so no use talking about it now. Aug 29, 2018 at 23:18
  • 12
    @Aaron can you please explain why you chose to apply such design, as it's by design? Many people find it bad/ugly and it was much better before. Thanks. Aug 30, 2018 at 6:38
  • @ShadowtheWelcomingWizard The square box quickly disappears. is this a problem? Aug 30, 2018 at 18:57
  • 2
    @Mari-LouA it doesn't disappear, that's the problem. Aug 30, 2018 at 19:56
  • @ShadowtheWelcomingWizard it does for me. I tested, I upvoted your comment and the square box disappeared. The arrow is highlighted and in bright light blue, but there's no box. Aug 30, 2018 at 19:57
  • I hadn't read "This remains until I click elsewhere on the page or switch windows" oops! Aug 31, 2018 at 6:11

1 Answer 1

3

I'm guessing it's the browser's default :focused style. Each browser may show it differently (if at all). For desktop users with a mouse the effect may feel a bit silly, but for someone relying on keyboard navigation, it's an accessibility feature.


Update 2020-05-05:

:focus-visible pseudo-class is in Working Draft status. Definition below, this is moving towards a more nuanced approach to focus styles that supports accessibility.

MDN

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a “focus ring” by default in this case.)

Currently browser support is limited, there's a focus-visible polyfill module.

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .