There is no focus highlighting for buttons in active state

[jobara]

When buttons have the active class applied (.active), there is no focus highlighting on the button. This makes it hard to 1) know that you can deactivate a button and 2) for keyboard only users to know where they are. When a button is active it should still receive focus highlighting when the button is focused by either the mouse or keyboard.

Step 1:
Go to the demo: http://getbootstrap.com/css/#buttons-active

Step 2:
Using the mouse or the keyboard put focus on any of the active buttons.
Note that you cannot tell which one is focused.

Tested on:
Safari, Chrome, Firefox (Mac OS 10.9.1)
IE 11, Chrome, Firefox (Windows 8.1)

[deviprsd]

What are you suggesting exactly ?

[jobara]

Sorry, I've updated the ticket. Hopefully it is clearer now. In short it should still get focus highlighting even when the .active class is applied.

[deviprsd]

Maybe ... its not a big issue

[jobara]

It's probably less of an issue for the case of the :active pseudo selector. However, for the .active class it is. I'd want to use it for a toggle button, but now it posses both a usability and an accessibility issue for the reasons I stated above.

[cvrebert]

We apparently remove the focus outline for active stuff:

.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
}

and since this comes after the :focus stuff in the CSS, it dominates over the .btn:focus styles.

[zlatanvasovic]

@cvrebert Why is background-image: none there?

[cvrebert]

@zdroid Most likely related to the Android Firefox fix. Not sure.

[zlatanvasovic]

Hmm.

[zlatanvasovic]

@cvrebert No need for it on active. Look at this weird test case. My phone tells me the second button don't need background-image reset on hover (mobile devices don't have it), focus or active.

Extended version: it's caused by CSS overriding. When you add something new to styles, it overrides default styles for all states, except when state styles are set differently. 😄

[mdo]

The background-image: none was for removing the gradient on buttons in previous versions.

[zlatanvasovic]

It removes gradient for :active also. No need for repeating.

2014/1/12 Mark Otto notifications@github.com

The background-image: none was for removing the gradient on buttons in
previous versions.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/12154#issuecomment-32130254
.

Zlatan Vasović - ZDroid

[zlatanvasovic]

Chris, look at comment on your commit. Your curly brace is on new line.

2014-02-09 2:00 GMT+01:00 Chris Rebert notifications@github.com:

Closed #12154 #12154 via 4787a694787a69
.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/12154
.

Zlatan Vasović - ZDroid

[mdo]

I fixed that @zdroid, in 65b1070.

[zlatanvasovic]

Thanks.

2014-02-09 10:18 GMT+01:00 Mark Otto notifications@github.com:

I fixed that @zdroid https://github.com/ZDroid, in 65b107065b1070
.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/12154#issuecomment-34569269
.

Zlatan Vasović - ZDroid

[jobara]

@cvrebert thanks for fixing this.