Opened 2 years ago

Closed 22 months ago

Last modified 22 months ago

#5704 closed change (rejected)

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

Reported by: saroyanm Assignee:
Priority: P4 Milestone:
Module: User-Interface Keywords:
Cc: juliandoucette Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

Description

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">

Change History (4)

comment:1 Changed 22 months ago by 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.

comment:2 Changed 22 months ago by 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

comment:3 Changed 22 months ago by agiammarchi

  • Resolution set to rejected
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.