Add scope attribute to headers in DatePicker for improved accessibility

[rsanheim]

Feature Description

The current <th>' fields with the days of the week for the material date picker do not have a scope attribute. The scope attribute provides screen readers additional context about which table header is a row or column header.

Adding scope='column for each <th> containing a day of the week would improve accessibility for the date picker for those using screen readers.

Current table header code for matDatepicker:

<thead class="mat-calendar-table-header">
<tr>
  <th aria-label="Sunday" class="ng-star-inserted">S</th>
  <th aria-label="Monday" class="ng-star-inserted">M</th>
  <th aria-label="Tuesday" class="ng-star-inserted">T</th>
  <th aria-label="Wednesday" class="ng-star-inserted">W</th>
  <th aria-label="Thursday" class="ng-star-inserted">T</th>
  <th aria-label="Friday" class="ng-star-inserted">F</th>
  <th aria-label="Saturday" class="ng-star-inserted">S</th>
</tr>
</thead>

Proposed fix for this code:

<thead class="mat-calendar-table-header">
<tr>
  <th aria-label="Sunday" scope="col" class="ng-star-inserted">S</th>
  <th aria-label="Monday" scope="col" class="ng-star-inserted">M</th>
  <th aria-label="Tuesday" scope="col" class="ng-star-inserted">T</th>
  <th aria-label="Wednesday" scope="col" class="ng-star-inserted">W</th>
  <th aria-label="Thursday" scope="col" class="ng-star-inserted">T</th>
  <th aria-label="Friday" scope="col" class="ng-star-inserted">F</th>
  <th aria-label="Saturday" scope="col" class="ng-star-inserted">S</th>
</tr>
</thead>

Use Case

All users who interact with matDatepicker via a screen reader would benefit from this change, as the relationship between the day headers and the columns would be made explicit and clear for screen reading tools.

See also #16317 for other proposed accessibility fixes for this input.

[rsanheim]

andrewseguin closed this in #17163 4 days ago

Thanks!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}