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

Library: Standardize the design of the focus outlines in Sakai

    Details

    • 19 status:
      Verified
    • Test Plan:
      Hide
      • Ensure the focus outline looks and acts similar when clicking and interacting with links, buttons, and form controls throughout Sakai
      • Ensure the focus is keyboard-accessible
      • Ensure the focus is contrast- and visually-accessible
      • Ensure links, buttons, and form controls are legible and are not obscured by the focus outline when focusing on or interacting with these elements
      Show
      Ensure the focus outline looks and acts similar when clicking and interacting with links, buttons, and form controls throughout Sakai Ensure the focus is keyboard-accessible Ensure the focus is contrast- and visually-accessible Ensure links, buttons, and form controls are legible and are not obscured by the focus outline when focusing on or interacting with these elements

      Description

      The focus outline in Sakai varies from component to component. The design and colour of the outline is different for buttons than it is for links than it is for radio buttons.

      SAK-38356 introduced a Sakai default outline colour for links. SAK-32484 defined a separate design for Bootstrap buttons. SAK-40146 used a different style and colour for the focus of radio buttons and checkmarks.

      Standardizes all of these cases with central variables.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  kedwar1 Kendra Edwards
                  Reporter:
                  sfoster9 Shawn Foster
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  2 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code