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

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

    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

          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 Source Code