Bootstrap: link-btn gets ugly focus border in chrome on click

[lukemcgregor]

Chrome version: Version 40.0.2214.115 m;

JSFiddle: http://jsfiddle.net/g4t960rw/2/

Corrected by the following css:

.btn-link:focus,
.btn-link:active:focus{
    outline:none;
}

.btn-link:focus{
    text-decoration:none;
}
.btn-link:hover{
    text-decoration:underline;
}

[cvrebert]

We can't just remove all focus styling like that; it breaks accessibility. See also http://outlinenone.com

[patrickhlauke]

At the very least, the proposed CSS would also need to have the underline on focus

.btn-link:focus{
    text-decoration:underline;
}

The fundamental problem is that there is historically no distinction between browser focus styles as a result of keyboard navigation, and focus styles as a result of activating/setting focus on something using a mouse. Add to that the fact that Chrome seems to have opted for some misguided defaults (see also http://codepen.io/patrickhlauke/pen/xbjjRX) and it gets a bit tricky.

Personally, I could live with this, provided my addition of the text-decoration:underline is done, as then it would at least provide the underline as indication for keyboard navigation.

[zacechola]

I'll second everything @patrickhlauke said; the distinctions between keyboard focus/mouse focus will be determined at the browser level. The only issue I'd have with removing the outlines on .btn-link is that we still have outlines on other button styles, and, in browsers that support it, would continue to have outlines around links when tabbed into them. So then there's a matter of consistency across elements: Buttons that visually look like links don't outline like other buttons or links (if the browser supports it).

Maybe that's as simple as

a:focus { outline:none; }

Since focus on anchors will already add the underline. Then you have underlines without outlines on tab focus in most browsers on both .btn-link and anchors.

My gut says this is a rabbit hole not worth going down, though. :confused:

[lukemcgregor]

@zacechola in my browser focus on a hyper-link still gives a box outline but its closer wrapped around the text
eg:

The focus behaviour is only really an issue because it appears to be applied to buttons on click (and doesn't go away until you click somewhere else) which seems a bit broken to me. This is not the same behaviour as links, which only get focus on tabbing.

Based on what has been said here I think there are three options:

• get rid of the focus border on link buttons completely (breaks tabbing ux)
• get rid of the idea of a link-btn perhaps it isn't really a reasonable thing to be doing if we cant make the ux behaviour the same as an actual link.
• Make it less jarring by making focus on both links and link-btn's only underline (no border).

[zacechola]

@lukemcgregor the padding area of .btn accounts for the differences between the focus rectangle shapes.

In this, we remove the focus rectangle, add text underline to both links and .btn-link
http://jsbin.com/lahagu/2/edit?html,css,output

However, the problem here is exactly the same as at the start, just with different styles applied. Different browsers will continue behave differently.

[patrickhlauke]

The focus behaviour is only really an issue because it appears to be applied to buttons on click (and doesn't go away until you click somewhere else) which seems a bit broken to me.

It may seem broken, but unfortunately it's been like that for aeons in browsers. And it fundamentally makes sense: when you click on something, you're moving the browser's focus to it (check document.activeElement). And a focused button has, by default, an outline applied. Now, IE/Firefox have optimised this away for the most part when it comes to focus change as a result of mouse interactions, but I can at the same time see Chrome's more straightforward logic.

This is not the same behaviour as links, which only get focus on tabbing.

This is only a recent change in browsers. A few years back, it happened for links as well (which is why the indiscriminate use of outline:none became so popular and caused so many problems for keyboard users - see http://24ways.org/2009/dont-lose-your-focus/ for how it used to be, and for a look at the recent change to focus outline http://www.sitepoint.com/when-do-elements-take-the-focus/)

i agree with @zacechola here that it's a rabbit hole we don't really want to dive into...as you end up chasing your own tail in the end.

[lukemcgregor]

Fair enough I get your point.

[mdhama]

a:focus {outline:0; text-decoration: none;}

It worked for me. :)