Closed Bug 1689480 Opened 3 months ago Closed 2 months ago

Add vertical clicktarget to in-content checkboxes and radiobuttons, as specified by the spec

Categories

(Toolkit :: Themes, enhancement)

enhancement

Tracking

()

RESOLVED FIXED
87 Branch
Tracking Status
firefox87 --- fixed

People

(Reporter: itiel_yn8, Assigned: itiel_yn8, NeedInfo)

References

Details

Attachments

(11 files)

48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
48 bytes, text/x-phabricator-request
Details | Review
Summary: Add vertical clicktarget to checkboxes and radiobuttons, as specified by the spec → Add vertical clicktarget to in-content checkboxes and radiobuttons, as specified by the spec
Assignee: nobody → itiel_yn8
Status: NEW → ASSIGNED

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103390

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103391

This also gets rid of the non clickable area between the radiobutton and its label.

Depends on D103392

This also gets rid of the non clickable area between the checkbox/radiobutton and its label.

Depends on D103395

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103397

This also gets rid of the non clickable area between the checkbox/radiobuttons and their label.

Depends on D103398

This also gets rid of the non clickable area between the checkbox and its label.

Depends on D103399

This also makes the labels themselves clickable, and not just the checkboxes.

Depends on D103400

Duplicate of this bug: 1650304
Duplicate of this bug: 1689093
Attachment #9199931 - Attachment description: Bug 1689480 - Changes to the appchooser/permission dialogcheckboxes to accomodate for the added margin-block r?pbz,ntim → Bug 1689480 - Changes to the appchooser/permission dialog checkboxes to accomodate for the added margin-block r?pbz,ntim
Pushed by archaeopteryx@coole-files.de:
https://hg.mozilla.org/integration/autoland/rev/d07c76355cda
Changes to about:tabcrashed checkboxes to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/2be1ec4d0d47
Changes to about:config radiobuttons to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/0e77a19d6439
Changes to about:networking checkbox to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/440ec2cf3e8e
Changes to about:url-classifier checkboxes to accomodate for the added margin-block r=dimi
https://hg.mozilla.org/integration/autoland/rev/f619503d081a
Changes to about:welcomeback radiobuttons to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/7b02086763d4
Changes to about:profiling checkboxes and radiobuttons to accomodate for the added margin-block r=julienw,ntim
https://hg.mozilla.org/integration/autoland/rev/00fbecf58239
Changes to about:logins checkboxes to accomodate for the added margin-block r=tgiles,ntim
https://hg.mozilla.org/integration/autoland/rev/2f14def87a42
Changes to about:telemetry checkbox and radiobuttons to accomodate for the added margin-block r=ntim
https://hg.mozilla.org/integration/autoland/rev/1ca7671397e8
Add vertical clicktarget for in-content checkboxes and radiobuttons r=ntim
https://hg.mozilla.org/integration/autoland/rev/8816e3b6b2d7
Changes to the appchooser/permission dialog checkboxes to accomodate for the added margin-block r=pbz
https://hg.mozilla.org/integration/autoland/rev/ec51a9295fe4
Changes to the print UI checkboxes and radiobuttons to accomodate for the added margin-block r=mstriemer

I'd like QA to verify this bug, along with bug 1685595 and bug 1685628 (they all touch similar aspects of the same element(s)).
TLDR:

  1. Make sure the checkboxes/radiobutton across the in-content UI (not chrome UI) all[*] look the same (for checkboxes (when checked)- white checkmark surrounded by a blue rectangle, for radiobuttons (when selected)- white dot in a blue ring).
  2. Make sure they are clickable also at least 3px above and below the buttons themselves.
  3. Make sure they all have proper hover / active (i.e. mouse-down) / disabled (where relevant) effects.

Non exhaustive list of places to test this in:
about:preferences
about:profiling
about:telemetry ("current data")
about:welcomeback
about:config
about:addons (open an installed extension > scroll down to the "Allow automatic updates" section)
about:addons (the report abuse dialog)
The new print dialog

[*] There are a few exceptions, like in about:newtab's AS Router Admin, the checkbox under the What's New Panel in the main menu, about:memory, about:checkerboard

Flags: qe-verify+

Hi Itiel!

I looked into this respecting the above-mentioned scenarios and pages using Firefox 87.0a1 (20210219094547) .
On Windows 10x64 I tried with dark and white combined themes as well and the checkboxes and radio buttons looks as described in step1 from above. Also they are clickable above and bellow as stated in step 2. They all have the same effect on hover, disabled, clicked and disabled. On about:addons (the report abuse dialog) -> I don't know for sure that the 3px rule is applied as well: screenrecording

On macOS 11.2 however there are some radio button and checkboxes that I think they are not respecting the step2 rule. You have to be really close to them in order to activate them. I made a screen recording witch includes the hovered, selected and mouse-down states as well: link.

At first glymse the problem with step2 rule happens on Ubuntu 18 as well, at least on below side, with certain checkboxes and radio buttons. Screen recording: link

Is this expected? Thank you in advance!

Flags: needinfo?(itiel_yn8)
Regressions: 1693899
No longer regressions: 1693899
You need to log in before you can comment on or make changes to this bug.