1239213 - GTK3 checkboxes & radio buttons don't give any visual indication that they're focused (unless a site explicitly adds a input:focus{...} rule)

Status: RESOLVED WORKSFORME

(Core :: Widget: Gtk, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:
 1. Load attached testcase.
 2. Press tab, to move focus through the checkboxes & radio buttons.

EXPECTED RESULTS:
The checkboxes / radio buttons should gain a focus outline, or some sort of rendering change to indicate that they're focused.

ACTUAL RESULTS:
The checkboxes / radio buttons don't change rendering at all. It's not at all clear which one is focused.

I'm using Nightly 46.0a1 (2016-01-12) on Ubuntu 15.10.

Comment 1

[Daniel Holbert [:dholbert]]

Firefox release (version 43, with gtk2) & Chrome each give EXPECTED RESULTS.

Firefox Nighlty (with gtk3) gives ACTUAL RESULTS.

Comment 2

[Karl Tomlinson (:karlt)]

Seems to be an invalidation problem because zooming in or out moves the focus indicator to the correct widget.  GetExtraSizeForWidget() is meant to address this.

Comment 3

[Karl Tomlinson (:karlt)]

(Sorry, played with too many checkboxes on this bug.)

Comment 4

[Daniel Holbert [:dholbert]]

(FWIW, I don't see any noticeable improvement [no focus ring shows up or anything] when zooming in or out, after using tab to [imperceptibly] shift focus to one of the checkboxes).

Comment 5

[Daniel Holbert [:dholbert]]

Sorry, to be clear -- comment 4 was about the attached testcase. I don't see any benefit from zooming there.

*On this Bugzilla bug page*, though (using Bugzilla's 'experimental UI'), I *do* see a light-blue focus rect around the checkboxes. (without needing to zoom in)

Comment 6

[Daniel Holbert [:dholbert]]

The light-blue focus ring that I see on Bugzilla comes from this styling in https://bugzilla.mozilla.org/data/assets/e31d6f807e9c44fd2fadaf15925a0254.css?1452524708 :

> input:focus {
>   border-color: #42a4e0;
>   -webkit-box-shadow: 0 0 0 2px rgba(73,173,227,0.4);
>   -moz-box-shadow: 0 0 0 2px rgba(73,173,227,0.4);
>   box-shadow: 0 0 0 2px rgba(73,173,227,0.4);
> }

If I manually add that style rule to my attached testcase, then it gives EXPECTED RESULTS. (though with bugzilla's color scheme rather than my native theme, of course.

So, my goal with this bug here is to cover the lack of a focus ring, *by default*.  (The zooming-related issues in comment 2 [which I'm not seeing] might want a different bug, unless they're more involved than I'm understanding them to be.)

Comment 7

[dosvald]

Confirming this on 45beta (which turned on GTK3 by default)

Comment 8

[Jan Horak [:jhorak]]

Attachment: HTML, XUL, GTK3 focus demo png

Drawing subtle focus indication or none depends on theme you're using. The problem seems to be the area over the focus indication should be. The demo png I've attached show:
1. <input type='radio' id='a'><label for='a'>button one</label>
   The focus is very subtle on my theme, it does not appear for Adwaita 
2. <radio> element from XUL
   the focus area is drawn only around label
3. GtkRadioButton from GTK3
   the focus area is drawn around radio button and label.

Can we archive number 3 somehow for HTML?

Comment 9

[Karl Tomlinson (:karlt)]

Currently, Gecko native theming attempts to draw focus around the check or
radiobutton, not the label.

With GTK 3.18, testcase 1 sometimes shows this focus with Adwaita, but there
are invalidation problems.  The focus is not visible at all with Ambiance.

Adwaita and Ambiance for GTK 3.18 draw the focus around the label (in native
GTK apps such as gtk3-widget-factory).  If the label could be natively styled,
then I guess it would be possible for Gecko to find the associated form control and
render focus around the label when appropriate.

Adwaita in GTK 3.20 draws a single focus indicator around both the button and
the label.  In HTML, where the label and button are not necessarily adjacent,
it seems unlikely that this would be practical in general.  Perhaps a
rectangle including both the label and the button could be used anyway.  I'm
not sure.

Changes from bug 582951 workaround this bug enough to identify the focus element, and so fixing this is not as urgent as it was.

Comment 10

[Sylvestre Ledru [:Sylvestre]]

Moving to p3 because no activity for at least 1 year(s).
See https://github.com/mozilla/bug-handling/blob/master/policy/triage-bugzilla.md#how-do-you-triage for more information

Comment 11

[Emilio Cobos Álvarez (:emilio)]

This should work consistently across platforms with the non-native theme now.