Closed Bug 1239213 Opened 9 years ago Closed 3 years ago

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

Categories

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

defect

Tracking

()

RESOLVED WORKSFORME
Tracking Status
firefox46 --- affected

People

(Reporter: dholbert, Unassigned)

References

(Blocks 1 open bug)

Details

(Whiteboard: tpi:+)

Attachments

(2 files)

Attached file testcase 1 (deleted) —
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.
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
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
(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).
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)
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)
Confirming this on 45beta (which turned on GTK3 by default)
Priority: -- → P1
Whiteboard: tpi:+
Attached image HTML, XUL, GTK3 focus demo png (deleted) —
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?
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
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
Priority: P2 → P3

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

Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: