612752 - Focus rings and default style for :-moz-ui-invalid should be re-thought

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Mounir Lamouri (:mounir)]

The focus ring _and_ the red box shadow is shown which isn't really nice.

Possible solutions:
1. Remove the default style when the element has the focus ;
2. Remove the focus ring when the element has :-moz-ui-invalid applying (and make the box shadow bigger?) ;
3. Change the default style so it still works with the focus ring.

I think that 1. wouldn't be really nice for UX, 2. would have to be reverted by authors which might be annoying and 3. isn't easy.

Comment 1

[Mounir Lamouri (:mounir)]

One of the possibilities is to have a lighter box-shadow when the element is focused. Like this:
data:text/html,<style>:invalid.proposal { box-shadow: 0 0 2px 2px rgba(255,0,0,0.4); }</style><input class='proposal' type='email'><br><br><input type='email'>

The first input has a lighter box-shadow but not the second one. I think the focus ring is more visible but I'm not sure it will solve possible a11y issues.

What do you think?

Comment 2

[Mounir Lamouri (:mounir)]

Should that block? It might be an issue for accessibility (color blind people) and it's a very bad UI. I think we should try to found a solution for Firefox 4.

Comment 3

[Mounir Lamouri (:mounir)]

Attachment: Test that

Jonas and Alexander, could you try that with a nightly build and give me your feedbacks.

Comment 4

[Jonas Sicking (:sicking) No longer reading bugmail consistently]

Assuming we just want this fainter "ring" when an element has focus (rather than any time it is invalid) then it looks good to me.

Comment 5

[Mounir Lamouri (:mounir)]

Attachment: Test that

Exactly. This new test reflect better.

Comment 6

[Mounir Lamouri (:mounir)]

Hmm, maybe we should try to have this different style only when there is a focus ring but as far as I can test, GTK themes without focus ring have :-moz-focusring applying so I don't see what this is for. I will check when I will write the patch.

Comment 7

[Mounir Lamouri (:mounir)]

Attachment: Patch v1

Alexander, you can test that with the attached test case.

Comment 8

[Alex Limi (:limi) — Firefox UX Team]

Comment on attachment 494522 [details] [diff] [review]
Patch v1

Works for me!

Comment 9

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

Comment on attachment 494522 [details] [diff] [review]
Patch v1

r=dbaron.  Sorry for the delay getting to this.

Comment 10

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

http://hg.mozilla.org/mozilla-central/rev/af69450fedb9