Datetimepicker is not readable using JAWS(accessibility tool)

naveen42kumar commented 7 years ago

When we tab through the dates of the datetimepicker calendar Jaws is reading every selected day as blank. it should read the selected date. I am using bootstarp V3, IE11 and Jaws 18

WVWillHall commented 7 years ago

looks like there is no aria-label on the button itself.

<table role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
  <thead>
    <tr>
      <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i aria-hidden="true" class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">previous</span></button></th>
      <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th>
      <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i aria-hidden="true" class="glyphicon glyphicon-chevron-right"></i><span class="sr-only">next</span></button></th>
    </tr>
    <tr>
      <th ng-if="showWeeks" class="text-center"></th>
      <th ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small></th>
    </tr>
  </thead>
  <tbody>
    <tr class="uib-weeks" ng-repeat="row in rows track by $index" role="row">
      <td ng-if="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td>
      <td ng-repeat="dt in row" class="uib-day text-center" role="gridcell"
        id="{{::dt.uid}}"
        ng-class="::dt.customClass">
        <button type="button" class="btn btn-default btn-sm"
          uib-is-class="
            'btn-info' for selectedDt,
            'active' for activeDt
            on dt"
          ng-click="select(dt.date)"
          ng-disabled="::dt.disabled"
          tabindex="-1"><span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span></button>
      </td>
    </tr>
  </tbody>
</table>

if you override the template and add a label to the button does it work?

dadoadk commented 6 years ago

@naveen42kumar Have you find the fix for this issue. The date picker is not read by JAWS 18 screen reader. It's kind of disappointing. This is another thread that dealt with the similar issue https://github.com/angular-ui/bootstrap/issues/5520 and I also tried to get some help from ChromeVox support: https://bugs.chromium.org/p/chromium/issues/detail?id=699725

Does replacing the template for date picker work for you? Did you just have to add aria-label to the button?

naveen42kumar commented 6 years ago

@dadoadk instead of using bootstrap datetimepicker I have customized the jquery date picker which resolved all the accessibility issues.

angular-ui / bootstrap

Datetimepicker is not readable using JAWS(accessibility tool) #6517