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

Ensure calendar components do not use color alone to convey selection/meaning

    XMLWordPrintable

    Details

    • Previous Issue Keys:
      A11YTEST-321

      Description

      [New] - 3/13/2018[Issue]The calendar uses the color only to distinguish between different dates:- today is on a yellow background,- current date on a blue background.[User Impact]Users who cannot see color should also be able to determine these differences.[Code]HTML:

      <td class=" ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="1" data-year="2018">    <a class="ui-state-default ui-state-highlight ui-state-active" href="#">26</a></td>

      CSS:.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight

      { border: 1px solid #dad55e; background: #fffa90; color: #777620;}

      [Expected behavior]Developers should add a title attribute with the entire date and the differences between dates: e.g., today.[Compliant code]HTML:

      <td class=" ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="1" data-year="2018"title="Monday, February 26, 2018 (Current)">    <a class="ui-state-default ui-state-highlight ui-state-active" href="#">26</a></td>

        Gliffy Diagrams

          Zeplin

            Attachments

              Activity

                People

                • Assignee:
                  Unassigned
                  Reporter:
                  jonespm Matthew Jones
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  0 Start watching this issue

                  Dates

                  • Created:
                    Updated:

                    Git Integration