582951 - Visual indication of checkbox focus insufficient when in Windows High Contrast Mode

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[David Bolter [:davidb] (NeedInfo me for attention)]

This was reported to me by IBM who now use Firefox internally and require it to be fully accessible.

STR:
1. Load a page with a regular html checkbox. E.g.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_checkbox
2. Windows High Contrast Mode (HCM) can be launched via:
[left alt] + [left shift] + [PrtScn]
3. Tab to and from the checkbox
expected: noticable visual indicator
actual: a few tiny dots down the right side and bottom of the box. Not really ideal for someone who uses HCM.

Note this key and flag would indicate High Contrast Mode:
[HKEY_CURRENT_USER\Control Panel\Accessibility\HighContrast]
"Flags"="127"

See related bug 575974.

Comment 1

[Dão Gottwald [:dao]]

forms.css is using -moz-appearance: checkbox; and only sets border-style: groove; (which isn't used because of -moz-appearance) for :-moz-focusring. If native widget rendering is supposed to take care of the focused state, this would be a widget bug. This bug isn't limited to Windows or high-contrast mode though, so I think it's a forms.css bug.

Comment 2

[Dão Gottwald [:dao]]

Attachment: strawman forms.css patch

This assumes this is not a cross-platform widget bug. I'm not sure this is right.

Comment 3

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [:dao] from comment #1)
> This bug isn't limited to Windows or high-contrast mode though, so I think it's a forms.css bug.

Then again not all OS themes are affected. Here's what I see:

- Win10 default theme: no focus indicator
- Win10 dark high-contrast themes: proper focus ring
- Win10 black-on-white high-contrast theme: broken focus ring (I think comment 0 describes this)
- Ubuntu 16.04 default theme: no focus indicator

Jim, can you shed some light on what's happening on the win32 widget side? Does it intentionally render a focus ring for high-contrast themes? Does it intentionally omit the focus ring for the default theme? What's going on with the black-on-white high-contrast theme?

Either way the inconsistency doesn't seem to make sense, so I'm moving this bug to Widget: Win32 for now. Might need to file another bug for Widget: Gtk.

Comment 4

[Jim Mathies [:jimm]]

We draw a partial focus rect on win8 and up on top of the themed checkbox here [1].

[1] http://searchfox.org/mozilla-central/rev/8eb4fd2c7be150b0aa1b05c0f3707e82dc8f2dc8/widget/windows/nsNativeThemeWin.cpp#1907

Comment 5

[Jim Mathies [:jimm]]

Attachment: win8-highcontrast.png

Depending on the dpi of the system, the focus lines might be hard to spot. It seems like higher dpi displays trigger more dots, which make the focus lines hard to pick up.

Comment 6

[Jim Mathies [:jimm]]

Attachment: win8-defaulttheme.png

Comment 7

[Dão Gottwald [:dao]]

(In reply to Jim Mathies [:jimm] from comment #4)
> We draw a partial focus rect on win8 and up on top of the themed checkbox
> here [1].

How about we stop doing that and use a CSS outline like in attachment 8789331 [details] [diff] [review]?

Comment 8

[Jim Mathies [:jimm]]

(In reply to Dão Gottwald [:dao] from comment #7)
> (In reply to Jim Mathies [:jimm] from comment #4)
> > We draw a partial focus rect on win8 and up on top of the themed checkbox
> > here [1].
> 
> How about we stop doing that and use a CSS outline like in attachment
> 8789331 [details] [diff] [review]?

If it looks good, seems fine with me.

Comment 9

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [:dao] from comment #7)
> (In reply to Jim Mathies [:jimm] from comment #4)
> > We draw a partial focus rect on win8 and up on top of the themed checkbox
> > here [1].
> 
> How about we stop doing that and use a CSS outline like in attachment
> 8789331 [details] [diff] [review]?

bz, do you know if there's a good reason why we avoided CSS outline here and have what looks like a hack in widget code?

Comment 10

[Boris Zbarsky [:bzbarsky]]

> bz, do you know if there's a good reason why we avoided CSS outline here

No idea offhand.

As long as it interacts reasonably with the page doing its own outline styling, should be fine to use outline here, at first glance.

I'm really sorry about the lag; I was confusing this with another bug that had a needinfo from myself.  :(

Comment 11

[Dão Gottwald [:dao]]

Attachment: patch

Comment 12

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

How does this relate to how other browsers (particularly on Windows) do focus styling of checkboxes and radios?  (And how does their default focus styling respond to CSS styling?)

Comment 13

[Dão Gottwald [:dao]]

(In reply to David Baron :dbaron: ⌚️UTC-7 from comment #12)
> How does this relate to how other browsers (particularly on Windows) do
> focus styling of checkboxes and radios?  (And how does their default focus
> styling respond to CSS styling?)

I've tested this on Windows 10. Both Chrome and Edge seem to use some kind of outline that can be overridden by authors with CSS outline.

Comment 14

[Jim Mathies [:jimm]]

Comment on attachment 8798796 [details] [diff] [review]
patch

http://www.mathies.com/mozilla/forms.html

Visually an improvement over what we currently have.

One noticed behavior change though - on win7 my checkboxes don't get focus rects at all. With this patch they do now. I consider this an improvement.

r+ for the code changes in widget and on the overall affect

Comment 15

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

Comment on attachment 8798796 [details] [diff] [review]
patch

So on Linux, *my* native theme takes care of this, but I suppose we can't guarantee that all do.  I guess I'm ok with this as is, so r=dbaron.

We perhaps need a way of saying that a native theme overrides outline, though, so that Linux and Mac native themes can (when present) say that they override the outline.  We can probably do that in a followup.  (The issue also came up in something else I was reviewing recently, but it doesn't seem to be bug 140562 unless it was a comment I wrote and then deleted...)

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/ad249ce81497
Use CSS outline for checkbox and radio button focus indicator. r=dbaron,jimm

Comment 17

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/ad249ce81497