1487048 - Tab key is not focusing in correct order in about:preferences#privacy

Status: VERIFIED FIXED

(Firefox :: Protections UI, defect, P3)

Description

[David Olah]

[Affected versions]
63.0a1 (2018-08-28)

[Affected platforms]
Windows 10, Windows 7, Ubuntu 16.04, Mac OS x

[Steps to reproduce]
1. Open Firefox and in the Hamburger Menu, click on Content Blocking
2. about:preferences#privacy will be opened and Content Blocking section will be focused
7. Navigate using the Tab key

[Expected result]
The elements are focused in order from top to bottom

[Actual result]
Drop-down from "Trackers" is focused after "Change Block List..." link.

Comment 1

[Timea Cernea [:tbabos][inactive]]

Please note that the first "Learn More" hyper-link (above the ON-OFF button) is skipped and will not get focused using the TAB key.

Comment 2

[Timea Cernea [:tbabos][inactive]]

After the update with the new UI in about:preferences#privacy, the text string beside the newly added check-boxes are not focused neither the secondary checkboxes which are not checked. Please check the attached video for the actual state.

Comment 3

[Timea Cernea [:tbabos][inactive]]

Attachment: Focus of the current UI in preff

Comment 4

[(no longer active)]

Caused by these rules:
https://searchfox.org/mozilla-central/source/toolkit/themes/linux/global/checkbox.css#33
https://searchfox.org/mozilla-central/source/toolkit/themes/windows/global/checkbox.css#33

Comment 5

[(no longer active)]

I think the tab order issue is gone now, and the focus ring issue is all that's left.

Comment 6

[(no longer active)]

Attachment: Fix the focus highlights in the Content Blocking section of Preferences

Comment 7

[Dão Gottwald [:dao]]

Comment on attachment 9005480 [details] [diff] [review]
Fix the focus highlights in the Content Blocking section of Preferences

For consistency with other about:preferences controls, the focusring should be around the label rather than the checkbox. Drawing it around the checkbox would be an acceptable stop-gap solution, but I believe Johann already pointed out how to properly fix this in bug 1487453 comment 1.

Comment 8

[(no longer active)]

(In reply to Dão Gottwald [::dao] from comment #7)
> Comment on attachment 9005480 [details] [diff] [review]
> Fix the focus highlights in the Content Blocking section of Preferences
> 
> For consistency with other about:preferences controls, the focusring should
> be around the label rather than the checkbox. Drawing it around the checkbox
> would be an acceptable stop-gap solution, but I believe Johann already
> pointed out how to properly fix this in bug 1487453 comment 1.

Can you please expand on how that would work?  If I understand correctly, the src attribute would allow changing the image of the checkbox.  There is a label attribute as well.  But here there is another icon between the checkbox and the label, which is the reason why I was using a separate <label> element...

Comment 9

[(no longer active)]

Nevermind, Johann helped on IRC.  :-)

Comment 10

[(no longer active)]

Note to self: Bryan also asked me to line up the indented rows with the icons, not the checkbox labels.

Comment 11

[(no longer active)]

Attachment: Screenshot with the patch

Comment 12

[(no longer active)]

Attachment: Bug 1487048 - Use a <xul:checkbox> control to draw the icon and label of the checkboxes in the Content Blocking section; r=johannh,flod

Comment 13

[Francesco Lodolo [:flod]]

Comment on attachment 9005790 [details]
Bug 1487048 - Use a <xul:checkbox> control to draw the icon and label of the checkboxes in the Content Blocking section; r=johannh,flod

Francesco Lodolo [:flod] has approved the revision.

Comment 14

[Johann Hofmann [:johannh]]

Comment on attachment 9005790 [details]
Bug 1487048 - Use a <xul:checkbox> control to draw the icon and label of the checkboxes in the Content Blocking section; r=johannh,flod

Johann Hofmann [:johannh] has approved the revision.

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/45710448c230
Use a <xul:checkbox> control to draw the icon and label of the checkboxes in the Content Blocking section; r=johannh,flod

Comment 17

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/45710448c230

Comment 19

[David Olah]

Comment 1 and Comment 2 is still reproducible. Should I create other Bug for these and close this as Verified or will be fixed in this particular one?

Comment 20

[(no longer active)]

Please feel free, since I can't reproduce them.

Comment 21

[David Olah]

Attachment: bandicam 2018-09-11 17-41-55-671.mp4

I can reproduce both on Nightly 64.0a1 (2018-09-10), Windows 10 and Ubuntu 16.04.
As you can see in the attachment, "learn more" below the Exceptions... is skipped, also the unselected radio buttons are skipped.

Comment 22

[(no longer active)]

(In reply to David Olah from comment #21)
> Created attachment 9008064 [details]
> bandicam 2018-09-11 17-41-55-671.mp4
> 
> I can reproduce both on Nightly 64.0a1 (2018-09-10), Windows 10 and Ubuntu
> 16.04.
> As you can see in the attachment, "learn more" below the Exceptions... is
> skipped, also the unselected radio buttons are skipped.

I see...

So here:

  * The first "learn more" link is actually before Exceptions in tab order not after, that's why it appears to be skipped in your video recording.  But if you started tabbing from the search box, you would see very different results.  So no real bug there IMO.

  * The other issues you've pointed out around unselected radio buttons being skipped are all to be expected.  This is how radio buttons work in native applications in both Windows and Linux, and we imitate that behavior in Firefox.  No real but there either IMO.

If you disagree, you should feel free to open new bugs.

Comment 23

[David Olah]

I verified the issue described in Comment 0 and it is no longer reproducible. Also, based on Comment 22, I am marking the issue as verified.