Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-40146

Improve the design and visibility of enabled radio buttons and checkboxes

    Details

    • 12 status:
      Please Merge
    • Test Plan:
      Hide

      Check all tools for checkboxes and radio buttons.

      Confirm they still work as expected (selecting, checking, unchecking, etc).

      Ensure the checkboxes and radio buttons match the "after" images below and are more visible than the previous design.

      Show
      Check all tools for checkboxes and radio buttons. Confirm they still work as expected (selecting, checking, unchecking, etc). Ensure the checkboxes and radio buttons match the "after" images below and are more visible than the previous design.

      Description

      The current design of the radio buttons are light blue and fuzzy, which makes them difficult to identify and difficult to differentiate their different states, such as disabled. Checkmarks in the checkboxes are also light blue.

      My patch changes the radio buttons to be solid inset circles that match the default font colour. My new checkboxes also match the colour of the radio buttons.

      I have also fixed the focus outline for these two elements from an ugly square box to a fitting shape of the element, while maintaining the size and colour of the focus highlight.

      Before - checkbox in focus:

      After - checkbox in focus:

      Before - radio button in focus:

      After - radio button in focus:

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  sfoster9 Shawn Foster
                  Reporter:
                  sfoster9 Shawn Foster
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code