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

Bootstrap tooltips with FA icons in Profile

    XMLWordPrintable

    Details

    • 21 Status:
      Merged
    • Test Plan:
      Hide
      1. Go to Profile
      2. Navigate the various pages looking for information icons
      3. Ensure they use the new icon rather than the old icon (see attached screenshots for reference)
      4. Make sure selecting the icon works properly and it provides the additional information about the particular feature
      1. Navigate the same pages with a screenreader
      2. Search/listen for cases of the old icon text: "More info on setting"
        • Note: it will now be read aloud by the screenreader as "Display information about this option"
      3. Ensure it is obvious how you can interact with the information icon
      4. Ensure the additional information provided by the info icon describes the feature accurately
      Show
      Go to Profile Navigate the various pages looking for information icons Ensure they use the new icon rather than the old icon (see attached screenshots for reference) Make sure selecting the icon works properly and it provides the additional information about the particular feature Navigate the same pages with a screenreader Search/listen for cases of the old icon text: "More info on setting" Note: it will now be read aloud by the screenreader as "Display information about this option" Ensure it is obvious how you can interact with the information icon Ensure the additional information provided by the info icon describes the feature accurately

      Description

      Current tooltips in Profile use Silk icons with qtip2, cluetip or both.
      There is an outdated look to that. And sometimes it feels broken.
      Also there is no keyboard accessibility to the tooltip without screen reader.

      Fontawsome icons and Bootstraps tooltips can help out with that

      I'd be happy for suggestions!

        Gliffy Diagrams

          Zeplin

            Attachments

            1. new1.png
              new1.png
              22 kB
            2. new2.png
              new2.png
              19 kB
            3. old11.png
              old11.png
              13 kB
            4. old12.png
              old12.png
              18 kB
            5. old21.png
              old21.png
              18 kB
            6. old22.png
              old22.png
              19 kB
            7. SAK-45267-JAWS.mp4
              1.15 MB

              Issue Links

                Activity

                  People

                  Assignee:
                  stetsche Markus S.
                  Reporter:
                  stetsche Markus S.
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                    Dates

                    Created:
                    Updated:
                    Resolved:

                      Git Integration