fix(datepicker): add scope to calendar headers (#17163)

Sets a `scope` to the relevant `th` elements in the calendar header for improved accessibility.

Fixes #17038.

Author: crisbeto

src/material/datepicker/month-view.html

@@ -1,6 +1,8 @@
 <table class="mat-calendar-table" role="presentation">
   <thead class="mat-calendar-table-header">
-    <tr><th *ngFor="let day of _weekdays" [attr.aria-label]="day.long">{{day.narrow}}</th></tr>
+    <tr>
+      <th scope="col" *ngFor="let day of _weekdays" [attr.aria-label]="day.long">{{day.narrow}}</th>
+    </tr>
     <tr><th class="mat-calendar-table-header-divider" colspan="7" aria-hidden="true"></th></tr>
   </thead>
   <tbody mat-calendar-body

src/material/datepicker/month-view.spec.ts

@@ -103,6 +103,18 @@ describe('MatMonthView', () => {
         expect(table.getAttribute('role')).toBe('presentation');
       });
 
+      it('should set the correct scope on the table headers', () => {
+        const nonDividerHeaders = monthViewNativeElement.querySelectorAll(
+            '.mat-calendar-table-header th:not(.mat-calendar-table-header-divider)');
+        const dividerHeader =
+            monthViewNativeElement.querySelector('.mat-calendar-table-header-divider')!;
+
+        expect(Array.from(nonDividerHeaders).every(header => {
+          return header.getAttribute('scope') === 'col';
+        })).toBe(true);
+        expect(dividerHeader.hasAttribute('scope')).toBe(false);
+      });
+
       describe('calendar body', () => {
         let calendarBodyEl: HTMLElement;
         let calendarInstance: StandardMonthView;