1501194 - Use actual checkboxes to enable/disable properties in the rules view instead of <div>s that are styled like checkboxes

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

For context: this was discussed in bug 1190113.

I don't know why it was done this way, but the checkboxes to enable/disable properties in the CSS rules view are actually just <div> elements styled to look and feel like checkboxes.

It feels like that's not ideal because keyboard navigation isn't supported, but also because they look different than the other checkboxes displayed elsewhere in DevTools.

I believe we should change this.

To be on the safe side, we should ideally also try to understand why we didn't use checkboxes in the first place, maybe there was an important reason at the time.
I'll do some research and hopefully will find the bug.

Comment 1

[Patrick Brosset <:pbro>]

So, I did some research and found the following bugs where the .theme-checkbox CSS was created and then modified:
bug 836233, bug 855502, bug 859686.
Reading through comments there, the only one that gives a reason as to why we didn't use native checkboxes is this one bug 859686 comment 7:
> Because native ones look terrible with the dark theme (styling options are very limited).

Other than this, I think the main reason originally was because styling a fake div just looked cooler and matched the mockups that had been designed at the time.

Now, I think consistency and accessibility are way more important than that, and we use native checkboxes everywhere else including with the dark theme, so I don't think we should worry about removing the fake checkboxes.

Comment 2

[Florens Verschelde :fvsch]

This might be a duplicate of bug 1491811 (which has some design discussion).

Comment 3

[Florens Verschelde :fvsch]

Re. the accessibility part, I'm wondering how these checkboxes should be labeled.
Something like aria-label=`(Disable|Enable) $propertyName` maybe?