Normalize.css: Removing button border removes focus outline in FF

[tdhooper]

It's fairly common to want to remove button borders. If you do this while using normalize, the :focus style that keyboard users depend on will disappear in Firefox.

Tab through the links and buttons in the following examples for a demonstration:

• With normalize http://codepen.io/anon/pen/Gpmmqw/
• Without normalize http://codepen.io/anon/pen/rOmmKz

This is due to https://github.com/necolas/normalize.css/blob/master/normalize.css#L313

I'm using Firefox 40.0.3 on OS X

[robsonsobral]

I confirmed the issue on Firefox 43 on Windows.

Which is the result using only?

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
}

[mobyou]

I confirm the focus outline issue also on the older Firefox (v41.0.1 on Windows).
The border: 0 on this selector is a big accessibility issue.

@robsonsobral
This CSS works :

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
}

[akhyarrh]

Confirmed FF 43.0a2 (2015-10-13) Mint Rafaela

[tdhooper]

I've found that if we remove the border reset, #393 will return.

So instead of doing this, we can add the following to bring back the focus styling

button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText;
}

I've taken this from the default Firefox styles http://mxr.mozilla.org/mozilla-release/source/layout/style/forms.css

[jonathantneal]

@tdhooper, I’d like to accept your PR. Would you setup a page with your fix so I can confirm it in all Firefox browsers?

[tdhooper]

Sure, http://codepen.io/anon/pen/bELoMQ

[battaglr]

I'm not sure if is the intended behaviour, but in Firefox 43 (Mac) the ButtonText makes the outline black. If we use just outline: 1px dotted the outline will inherit the text color.

Here is a fork of the @tdhooper test case that shows the outline inheriting the text color.

[jonathantneal]

@tdhooper, @battaglr, in this case, are we just as well off to omit the ButtonText? If so, I can take in the pull with that modification.

[battaglr]

@tdhooper, @jonathantneal, I don't have a strong opinion in this case.

Apparently the default behaviour on Firefox when border is removed is to display the outline color as black —at least on Mac— regardless the current color of the button —as it could be expected since ButtonText indicates a system color.

Although in the MDN documentation about _system colors_ is a note that says:

Not all system colors are supported on all systems. :-1: for use on public web pages.

Personally I would prefer _not_ adding ButtonText, and let outline inherit the color of the button. But either way I'm fine.

[jonathantneal]

@battaglr, great points. It’s a funny thing normalize a deprecated feature.

I will keep ButtonText, because inherit can introduce issues when the document uses one color scheme without defining a color scheme for form controls.

Opinionated libraries can reset this, and minifiers can save them the otherwise lost 81 bytes. :)

[battaglr]

@jonathantneal, oh, I did not know it was deprecated.

And FWIW I was not implying the use of the keyword inherit just outline: 1px solid; —I believe this way it would not cause those issues.

Anyhow :+1:

[jonathantneal]

Totally. For future reference (who knows if or who will revisit this issue), my concern with outline: 1px solid is what omitting the color on outline does. For instance, when the color is omitted on a border, its default value is the value of the element's color property, which would be the same as using inherit.

[battaglr]

Great! I was aware of that; but I don't know why the inherit keyword gives me chills. :stuck_out_tongue_closed_eyes:

[equinusocio]

Another similar solution is using outline: 1px dotted ButtonText; where ButtonText is a system variable (https://github.com/sindresorhus/modern-normalize/issues/24#issuecomment-370204039)