(#289) Remove black outlines on focus #292
Conversation
By default, most browsers place a black outline around the currently-focused element. On mstacm.org, it looks kind of ugly, so some people want it changed. As a quick fix, this commit completely up removes the black outline around focused elements. People who use Tab to navigate webpages aren't going to be too happy though, as it's their often only indication of what their cursor is currently on. So I'm hoping we can eventually come up with something else that adds that funcionality back in the future.
|
I realize now I forgot to add |
|
To solve the accessiblity issue, you could actually remove the stuff youve changed here and merge this functionality with our current selection code. We use :selected to apply styles for button down and what not, if you change the css tags everywhere we have :selected to also change :focus, you can add an outline: none; to those css blocks and that will make it so that as long as we coded a selected behavior for the tag, it will look good for people using tab to navigate. Also don't forget to request a review from someone when you submit a pr! |
|
For accessibility purposes you cannot remove those outlines, but you can change them to make them look more appealing. |
There was a problem hiding this comment.
Instead of changing everywhere, some of these elements look worse than others. If you want to selectively change the styles that overlap with other styles that would also work.
Example:
Or you could change these guys to be a bit more appearing that just a little black border.
Pull Request Description:
By default, most browsers place a black outline around the currently-focused element. On mstacm.org, it looks kind of ugly, so some people want it changed. As a quick fix, this commit completely up removes the black outline around focused elements.
People who use Tab to navigate webpages aren't going to be too happy though, as it's their often only indication of what their cursor is currently on. So I'm hoping we can eventually come up with something else that adds that functionality back in the future.
// Side note: I'm not sure if this is the correct file to put this code in. Please let me know if it isn't.
Checklist: