fix(datepicker): screen reader reading out role twice (#15663)

Currently the markup of the calendar is `div[role="grid"] > table > td[role="gridcell"]`. Because we've got both a `grid` and a `table`, NVDA ends up reading out something like "Dialog, table, table, 31st of March 2019, column X, row Y". These changes set the `table` to be a `presentation` role so that "table" is only read out once.

Author: crisbeto

src/material/datepicker/month-view.html

@@ -1,4 +1,4 @@
-<table class="mat-calendar-table">
+<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 class="mat-calendar-table-header-divider" colspan="7" aria-hidden="true"></th></tr>

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

@@ -98,6 +98,11 @@ describe('MatMonthView', () => {
     });
 
     describe('a11y', () => {
+      it('should set the correct role on the internal table node', () => {
+        const table = monthViewNativeElement.querySelector('table')!;
+        expect(table.getAttribute('role')).toBe('presentation');
+      });
+
       describe('calendar body', () => {
         let calendarBodyEl: HTMLElement;
         let calendarInstance: StandardMonthView;

src/material/datepicker/multi-year-view.html

@@ -1,4 +1,4 @@
-<table class="mat-calendar-table">
+<table class="mat-calendar-table" role="presentation">
   <thead class="mat-calendar-table-header">
     <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>

src/material/datepicker/multi-year-view.spec.ts

@@ -100,6 +100,11 @@ describe('MatMultiYearView', () => {
     });
 
     describe('a11y', () => {
+      it('should set the correct role on the internal table node', () => {
+        const table = multiYearViewNativeElement.querySelector('table')!;
+        expect(table.getAttribute('role')).toBe('presentation');
+      });
+
       describe('calendar body', () => {
         let calendarBodyEl: HTMLElement;
         let calendarInstance: StandardMultiYearView;

src/material/datepicker/year-view.html

@@ -1,4 +1,4 @@
-<table class="mat-calendar-table">
+<table class="mat-calendar-table" role="presentation">
   <thead class="mat-calendar-table-header">
     <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>

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

@@ -115,6 +115,11 @@ describe('MatYearView', () => {
     });
 
     describe('a11y', () => {
+      it('should set the correct role on the internal table node', () => {
+        const table = yearViewNativeElement.querySelector('table')!;
+        expect(table.getAttribute('role')).toBe('presentation');
+      });
+
       describe('calendar body', () => {
         let calendarBodyEl: HTMLElement;
         let calendarInstance: StandardYearView;