Foundation-sites: Buttons stay selected in Chrome

[larssondaniel]

Buttons do not seem to go back from their selected state after you click them, when using Chrome.

For example: when you click the "Default Button" here: http://foundation.zurb.com/docs/components/buttons.html#
in Safari or Firefox, it returns to its lighter color after clicking it and moving your mouse outside of the button.

In Chrome (version 39.0.2171.71) however, it stays selected until you click somewhere else.

[adamransome]

I get this in Firefox 34.0.5 as well. Although I don't think it's a Foundation bug, more how browsers handle :focus.

[rafibomb]

The reason it's like this is for keyboard users.

&:hover,
&:focus { background-color: $bg-hover; }

I think normalize CSS would take care for this inconsistency. We are not including on the docs for some reason and we'll look into that.

[kellyrmilligan]

@rafibomb i'm still getting this in 2018 in chrome. were there updates to docs somewhere that fix this?

[colin-marshall]

@kellyrmilligan reopening this so we can look into it in the near future.

[DanielRuf]

The tabindex="0" keeps the focus as it seems.

[DanielRuf]

But removing the focus is not good for a11y and blind users and other users of screen readers and other solutions. The behavior like this is intended in Chrome and other browsers as far as I know

Edge has an a11y score of 100/100. The behavior is the same.

[DanielRuf]

See https://twitter.com/patrick_h_lauke/status/530503642399666177

[DanielRuf]

Would label this with a11y

[ncoden]

Note: Since we started working on Foundation 7, we (sadly) stopped support, bug fix or new feature for v5. But v6 has the same behavior so I'll try to reply.

For accessibility reasons, every interactive element (controls, inputs) must have a special look when it is focused. Most often, this is the "blue shadow" the browser shows by default (outline). In Foundation, we remove it (because lot of people find it ugly) but apply a background in return, to keep the button "showing" when it is focus.

We currently use what-input to display the outline only when a keyboard is used on almost all elements (including the button). We could do the same for the button background. However, I am not sure that everyone expect a button to not display any "focus" when a mouse is used.

What do you think @colin-marshall ?

[colin-marshall]

@ncoden just want to make sure I understand your question. Are you suggesting that whenever a button is focused, the background does not change, regardless of it was focused from keyboard or mouse? So that would mean the only visible indicator you would have that a button is focused, is the blue outline if you used the keyboard to select it?

[ncoden]

@colin-marshall Exact.

[colin-marshall]

However, I am not sure that everyone expect a button to not display any "focus" when a mouse is used.

This is a good question, that I don't really have an answer to.

@Owlbertz is knowledgable in accessibility, he is probably a better person to ask.

[Owlbertz]

The WCAG require the following:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

They do neither explicitly require an outline, nor a focus indicator when using a mouse.
Thus, as most people (mostly those doing design) do not want this little outline we use what-input to hide it for mouse-users for some features. As mentioned in another issue (I am not able to find - unfortunately) I suggested that we add a fully customizable focus indication. For the upcoming version.

However - having the button color staying the same for mouse-users when focused seems ok according to what I cited above.

[DanielRuf]

I suggested that we add a fully customizable focus indication. For the upcoming version.

Definitely a good idea.

However - having the button color staying the same for mouse-users when focused seems ok according to what I cited above.

Right, or we combine focus with hover if we need another indicator.

[DanielRuf]

@Owlbertz what would be your decision on this? Do we have to change something to improve the accessability and the UX here?

[Owlbertz]

As mentioned above, regarding accessibility the only important requirement is that the focus is visible when navigating with the keyboard.

[DanielRuf]

Do we have to do something here or can we close this?