Use <input type="checkbox"> instead <button role="checkbox">

[saroyanm]

Background

After several design iterations we finally have a final version of the new options page (See #5158).
We are using <button role="checkbox"> for checkbox items ​see style guide and ​example code. No need to use <button role="checkbox"> where we can achive same result using input element <input type="checkbox">.

What to change

Use <input type="checkbox"> instead <button role="checkbox">

[agiammarchi]

I was giving this ticket a try but I have noticed already a couple of issues:

• the #dialog-content-language-add contains buttons role checkbox with content so that you can click content and change the status. This is usually obtained through <label><input type=checkbox> some content</label> but it requires some logic refactoring for both JS, in charge of changing the aria-checked status, and CSS
• styling buttons is, in general, easier than styling checkbox, and putting text inside s also simpler. Are we sure we want to go this direction?

From a11y and for cleaner approach I do agree input checkbox and, eventually, labels around, is the best way to go, but I wonder if we all agree it is worth doing such refactoring.

[agiammarchi]

After discussing in UI chat, we've decided that to obtain styled rows with a good level of accessibility as shown in some spec [1] the current solution works actually better.

Havng <label><input type=checkbox> content</label> would not provide tab-index out o the box and on top of that the current CSS appearance status, needed to customize the look and feel of a checkbox, seems to be not ideal across browsers [2].

Closing for now.

[1] ​https://gitlab.com/eyeo/spec/blob/master/spec/abp/options-page-style-guide.md#dropdown-overlay
[2] ​https://caniuse.com/#feat=css-appearance

[agiammarchi]

Case study: ​https://codepen.io/WebReflection/full/GQOVgR/