Most modern UI's use toggle switches instead of checkboxes. Toggle switches are often more clear and a better metaphor. The fact that Web Admin uses checkboxes everywhere also makes it feel outdated. However, there are cases where we might still want to use checkboxes. When you, for example, can select multiple options from a group, checkboxes are better than toggle switches. Here's a good blog discussion the use cases for checkboxes and toggle switches: https://blog.uxtweak.com/checkbox-vs-toggle-switch/ We will want the possibility to use both toggle switches and checkboxes.
Here are some examples of different toggle switch states: https://help.syncfusion.com/xamarin/switch/states
We have decided to keep traditional checkboxes for choices that give the feeling of “I agree” or choices that need a simple confirmation. In practice, this means that most changes in this bug were reverted. Only a few cases in Web Admin fit the criteria to use the new toggle switches.
The text labels for many of the toggle switches were reworked. It is easier to understand what will happen if the label next to the switch is described as an action. The documentation has also been updated to reflect the change from a checkbox to a toggle switch. With this, this bug should be fixed. My tests indicate that the acceptance criteria are fulfilled.
It is worth noting that we have not fulfilled the common criteria for toggle switches – that the change applies immediately. It was a conscious decision to start using toggle switches despite the design of Web Admin where “Save” is required. The advantages of using a better element outweigh the disadvantages of users possibly expecting the change to apply immediately. Future changes to how changes are saved in Web Admin are handled in bug 8086.
General ============================================== Tested server build #3171 on Fedora37 in Firefox 109. In tlwebadm, there are a number of instances where checkboxes and/or toggle switches are used. For checkboxes, these are * Delete confirmation - Session (expressed as 'terminate') - Subcluster - Profile - Location - Terminal - Application group - Application - Menu * Multiple independent deletions - Greeting translation - Introduction translation - Profile translation - Location printer - Terminal printer * Start/stop confirmation - Master - Agent For toggle switches, these are * Show introduction * Make profile available * Use (location) for unknown terminals * Enable application startup feedback * Hide menu The stylings for toggle switches are grey leftward: "unchecked"; grey midway: "indeterminate"; colored rightward: "checked". These are common and easy to grasp the meaning of. Acceptance criteria ============================================== The acceptance criteria, and whether they are fulfilled, are as follows: [✓] Toggle switches should be used instead of checkboxes where the choice is “on/off” or “enable/disable”. One could argue that start/stop of master/agent services is a clear case of "on/off" -- it's something that remains, albeit turned off or inactivated. However, an exception is made here since users should not be able to accidentally flip on or off these central services, but rather that two keys must be turned at the same time. [✓] Toggle switches should have a clear state for “unchecked”, “indeterminate” and “checked”. [✓] Checkboxes should be kept if there are grouped options from which multiple can be selected. [✓] Checkboxes should be kept if the choice in question gives more a feeling of “I agree” than an “activate”-feeling. Conclusion ============================================== Acceptance criteria are fulfilled: checkboxes and toggle switches are properly made used of according to the set of guidelines. The wording when toggles are used is reminiscent of "activate", and conversely when checkboxes are used the wording is more passive and "agreeable". Furthermore, comments are in place in the CSS to facilitate the choice between checkboxes and toggle switches in the future, ensuring an adhered standard. Closing.
Unfortunately, there is a cropping issue on webkit based browsers like Safari and Epiphany. Toggle switches appear cropped on the bottom and right edges.
Created attachment 1115 [details] Screenshot of the cropped toggle switch in Epiphany Note that the same cropping issue appears on both radio buttons and regular checkboxes. The issue seems related to the fact that they are "position: relative" (to account for an alignment issue with our font).
We added a workaround for the clipping issue and reported it to webkit: https://bugs.webkit.org/show_bug.cgi?id=256003
The size of the toggle switches was also slightly modified.
There is no visible clipping in Webkit browsers for radio buttons and toggle switches after the workaround was added in comment 19. The issue has been verified to be solved both in GNOME Web (v. 44.2), and in Safari (iOS 16.4.1).
