CSS style: Don't hide focus indicators #2475
Conversation
Hiding focus indicators is unhelpful for people navigating by keyboard. Show them instead.
| a:hover, | ||
| a:active, | ||
| a:focus { | ||
| outline: none; | ||
| text-decoration: none; | ||
| color: #23527c; | ||
| } |
There was a problem hiding this comment.
What for?
BTW, do not modify this css file directly as it is from third party library. Anything you modified would be lost when AdminLTE upgraded.
There was a problem hiding this comment.
What for?
Sorry, you clarified here
Hiding focus indicators is unhelpful for people navigating by keyboard.
Show them instead.
There was a problem hiding this comment.
Hmm, why did you remove color: #23527c;? Screenshots before and after would help.
There was a problem hiding this comment.
How else do I modify this CSS? It seems that the way AdminLTE indicates focus is by slightly darkening links. I can't even see the difference. So this commit replaces it with classic browser focus stuff. You can compare it by tabbing through the GitBucket demo and https://git.xogium.me/
|
Should font color change during hovering or focus? I'll add it back and
check it later today.
…On Sat, Jul 04, 2020 at 04:25:07AM -0700, SIkebe wrote:
@SIkebe commented on this pull request.
> -a:hover,
-a:active,
-a:focus {
- outline: none;
- text-decoration: none;
- color: #23527c;
-}
Hmm, why did you remove `color: #23527c;`? Screenshots before and after would help.
--
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub:
#2475 (comment)
|
|
Ah I see, this color change is not from AdminLTE but Bootstrap. So your deletion does not have any effect. |
|
Ah, that's good. My intention is purely to make it so the focus box shows around things when using keyboard navigation, so you can see where you're at in the page. |
|
If your link has underline in it, this PR makes it harder to read correctly. Could you also tweak padding?
|
|
Sure, how? Edit: For what it's worth I can't get your padding behavior on my browser. |
|
Ok I managed to reproduce it on my machine. I can't change that without changing the font used in Gitbucket. Maybe I should add the underline back? |
That's strange... which browser are you using? As I said before screenshots would help. |
How did you verify that? You can override any third party css behavior if you can define your style in gitbucket.css.
|
|
On Sat, Jul 04, 2020 at 10:12:02PM -0700, SIkebe wrote:
>I can't change that without changing the font used in Gitbucket.
How did you verify that? You can override any third party css behavior if you can define your style in gitbucket.css.
**Note: Do not use below style definition as it is. It affects all `<a>` tag.**
I disabled the link's font CSS in the Firefox inspector and it showed a
better font with better spacing for the underscores.
|
Hiding focus indicators is unhelpful for people navigating by keyboard.
Show them instead.
Before submitting a pull-request to GitBucket I have first: