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.

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.

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

(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.

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

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.

(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]?

(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.

(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?

> 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. :(

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?)

(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 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 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...)

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