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

NEW
Unassigned

Status

()

P2
normal
3 years ago
2 years ago

People

(Reporter: dholbert, Unassigned)

Tracking

(Blocks: 2 bugs)

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox46 affected)

Details

(Whiteboard: tpi:+)

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8707294 [details]
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.
(Reporter)

Updated

3 years ago
Summary: GTK3 checkboxes & radio buttons don't give any indication that they're focused → GTK3 checkboxes & radio buttons don't give any visual indication that they're focused
(Reporter)

Comment 1

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

Firefox Nighlty (with gtk3) gives ACTUAL RESULTS.
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.
Group: adobe-confidential, mozilla-employee-confidential
(Sorry, played with too many checkboxes on this bug.)
Group: adobe-confidential, mozilla-employee-confidential
(Reporter)

Comment 4

3 years ago
(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).
(Reporter)

Comment 5

3 years ago
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)
(Reporter)

Comment 6

3 years ago
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.)
Summary: GTK3 checkboxes & radio buttons don't give any visual indication that they're focused → GTK3 checkboxes & radio buttons don't give any visual indication that they're focused (unless a site explicitly adds a input:focus{...} rule)

Comment 7

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

Updated

2 years ago
Priority: -- → P1
Whiteboard: tpi:+

Comment 8

2 years ago
Created attachment 8799711 [details]
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?
See Also: → bug 1312169
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.
Priority: P1 → P2

Updated

2 years ago
Blocks: 1312169
See Also: bug 1312169
You need to log in before you can comment on or make changes to this bug.