824367 - button element doesn't accept CSS :focus styling

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[Raphael]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11

Steps to reproduce:

Tried following CSS :
button + label {background: yellow;}
button:focus + label {background: green;}


Actual results:

Clicked on button. Result is not OK on Firefox Mac (label must be green on button click)


Expected results:

label must be green on button click

bugs only on Mac version

see : http://codepen.io/raphaelgoetter/pen/fLGow

Comment 1

[Matthias Versen [:Matti]]

This is an intended behavior to match the OSX UI style.
https://bugzilla.mozilla.org/show_bug.cgi?id=577316#c6 explains it.

You can switch accessibility.mouse_focuses_formcontrol in about:config and your testcase will work. 
It also works if you focus your button in your testcase with the keyboard and without changing the pref.

Comment 2

[Raphael]

OK and thanks for explanations, but why is "button" the only one not to be focused on click ? (even with a tabindex)

it's working on every other form controls (input, textarea,...)

Comment 3

[Matthias Versen [:Matti]]

Ask the OSX UI designer :-)
We only want to follow the OSX UI guidelines.