1112717 - button and input focus outlines inconsistent, doubled, or missing

Status: UNCONFIRMED

(Core :: Layout: Form Controls, defect)

Description

[Alex Bell]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:36.0) Gecko/20100101 Firefox/36.0
Build ID: 20141217004003

Steps to reproduce:

http://jsfiddle.net/2xos4ov1/

Tab through the output pane using the keyboard. Observe the inconsistent focus styles.


Actual results:

In some cases focus outlines are rendered effectively twice, using both the authored outline style and the UA default.

Any application of border-radius to a button causes the blue default UA focus outline not to appear.

Authored focus outlines on buttons wrap the text inside, and not the border-box of the element. When hiding the text using text-indent (a very common CSS pattern), this produces wacky results. This makes it impossible for authors to supply text for accessibility inside a "visual" button without creating ridiculous, nonsensical focus outlines.


Expected results:

There should only be one focus outline rendered per element. Either the UA default, or the authored.

There should be no dotted black line around button text when a button is focused.

FF Default UA focus styles should all be the same color. Pick one. I don't care. But please be internally consistent. The mix of black and blue is deeply confusing. I personally prefer a blue shade.

-moz-appearance: none should turn off ALL native element styling for button and input elements. Who thought the weird half-circle was ever a good idea? This needs revisiting IMHO.

Outlines for button elements should wrap the element's border-box, not overflowed or indented text.

I can break this up into separate bugs if that's helpful, but I thought seeing the test bed all in one place might be helpful.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's testcase, with jsFiddle gunk removed

for the permanent record (so that any comments on it are relative to something that isn't changing)

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

It would help to have one issue for bug (at least for the ones that you think are important and worth fixing); there's a ton of stuff here, and I'm really not sure what to comment on.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(and also please put the bug in the right component)

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Alex Bell from comment #0)
> Outlines for button elements should wrap the element's border-box, not
> overflowed or indented text.

I believe this is not a bug.  (Although there was some CSS Working Group discussion about outlines a few months ago; I might be misremembering what, if anything, was decided.)

Comment 5

[Rodney Rehm]

I can confirm the findings on both OSX and Win with Firefox Nightly 39.0a1 (2015-03-02).
A map of screen shots can be found here: http://test.dev/medialize/ally.js/tests/focus-outline-styles/index.html#style=focus&key=text,radio,checkbox,textarea,button&browser=firefox

This issue is likely a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=442097 (although it contains much more detail).


The issues broken down:

1. for -moz-appearance: initial; on all form elements both native focus outline and custom focus outline get drawn 
2. for -moz-appearance: none; on button both the native inner dotted focus outline and custom focus outline get drawn
3. for -moz-appearance: none; on textarea the native focus outline is never drawn
4. `text-indent` causes custom focus outline to include the offset text, while native focus outline is drawn on the border-box

Comment 6

[Rodney Rehm]

Is it possible the text-indent bug was introduced by https://bugzilla.mozilla.org/show_bug.cgi?id=133165 ?

Comment 7

[Rodney Rehm]

reduced test case for the text-indent issue: http://medialize.github.io/ally.js/tests/browser-bugs/gecko-text-indent-focus-outline.html