Regression: blue shadows around clicked objects


(probus) #1

After update, I’m getting weird blue shadows around objects after clicking them.
In firefox:


In chrome:


(Robin Ward) #2

I believe this was done intentionally by @awesomerobot but I’m not sure why. It looks a bit odd.


(Kris) #3

bah, I was adding accessibility back in for keyboard nav… it shouldn’t activate on click. Fix coming shortly.


(Kris) #4

…had to remove it completely for now until I have more time to figure out a better fix. Might need to style it on a more granular level… Didn’t realize that Firefox applies a :focus state to elements like the logo and buttons when you click on them. Webkit handles that stuff way better.

https://github.com/discourse/discourse/pull/1898


(Kris) #5

I think the best solution is going to be going through every clickable element (links, buttons, logos, etc) and make sure it has some sort of :hover state and then just make sure :focus matches that.


(Sam Saffron) #6

How is it done at http://stackoverflow.com/ ?


(Kris) #7

I suspect the trickiest part is all the javascript Discourse relies on. When :focus is set on an element, it remains until something else gains :focus - traditionally when you’re navigating with a keyboard you :focus on a link, click it, and go to another page. So now :focus is reset. That’s largely how stackoverflow works, so most of the :focus definition is the default from the browser…

With Discourse that’s not neccessarily the case - if you click on the Discourse logo (in Firefox), that header is generally remaining static (just swapping out content below) and :focus isn’t being redefined, so the default outline remains on the logo until you click something else… obviously not ideal. I’m still looking into the best way to approach that.

I believe webkit is a bit more intelligent about it and removes :focus after click… which is why it isn’t an issue there. Not 100% sure on that - but that’s my hypothesis.


(Sam Saffron) #8

I think we could change it so our router always clears this stuff, perhaps a mixed solution here is best? cc @eviltrout


(Kris) #9

Yeah, I think you may be right.


(Robin Ward) #10

Okay, there’s now a scheduled blur when a route is entered:

https://github.com/discourse/discourse/commit/0b6bd5c187e707e3087c560ffa49e6934826e05f


(Sam Saffron) #11

Closing this, I am pretty sure it is fixed


(Sam Saffron) #12