From 539e4cdfd8403e6c4a83ab0c75da88a9d97c3937 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Tue, 22 Jun 2021 15:48:58 -0700
Subject: [PATCH] fix(material/datepicker): correct structure for grid role
 (#23022)

Previously, the grid in mat-datepicker was not strictly following the structure expected for the grid role. Additionally, this change adds an `<abbr>` element to the column headers such that VoiceOver can correctly read column headers.

Fixes #21357

(cherry picked from commit f0ddd54d4f6538e09d80fe0f19541acaa5a33467)
---
 src/material/datepicker/calendar-body.ts        |  2 --
 src/material/datepicker/calendar.scss           |  4 ++++
 src/material/datepicker/month-view.html         | 11 ++++++++---
 src/material/datepicker/month-view.spec.ts      |  2 +-
 src/material/datepicker/multi-year-view.html    |  4 ++--
 src/material/datepicker/multi-year-view.spec.ts |  2 +-
 src/material/datepicker/year-view.html          |  4 ++--
 src/material/datepicker/year-view.spec.ts       |  2 +-
 8 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/material/datepicker/calendar-body.ts b/src/material/datepicker/calendar-body.ts
index df7ce929666d..e3601a8e884a 100644
--- a/src/material/datepicker/calendar-body.ts
+++ b/src/material/datepicker/calendar-body.ts
@@ -58,8 +58,6 @@ export interface MatCalendarUserEvent<D> {
   styleUrls: ['calendar-body.css'],
   host: {
     'class': 'mat-calendar-body',
-    'role': 'grid',
-    'aria-readonly': 'true'
   },
   exportAs: 'matCalendarBody',
   encapsulation: ViewEncapsulation.None,
diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss
index 1d00655cb63f..082dc4677116 100644
--- a/src/material/datepicker/calendar.scss
+++ b/src/material/datepicker/calendar.scss
@@ -122,3 +122,7 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     height: $calendar-header-divider-width;
   }
 }
+
+.mat-calendar-abbr {
+  text-decoration: none;
+}
diff --git a/src/material/datepicker/month-view.html b/src/material/datepicker/month-view.html
index a51a15a35af7..3f57c2ba025b 100644
--- a/src/material/datepicker/month-view.html
+++ b/src/material/datepicker/month-view.html
@@ -1,9 +1,14 @@
-<table class="mat-calendar-table" role="presentation">
+<table class="mat-calendar-table" role="grid">
   <thead class="mat-calendar-table-header">
     <tr>
-      <th scope="col" *ngFor="let day of _weekdays" [attr.aria-label]="day.long">{{day.narrow}}</th>
+      <!-- For the day-of-the-week column header, we use an `<abbr>` element because VoiceOver
+           ignores the `aria-label`. ChromeVox, however, does not read the full name
+           for the `<abbr>`, so we still set `aria-label` on the header element. -->
+      <th scope="col" *ngFor="let day of _weekdays" [attr.aria-label]="day.long">
+        <abbr class="mat-calendar-abbr" [attr.title]="day.long">{{day.narrow}}</abbr>
+      </th>
     </tr>
-    <tr><th class="mat-calendar-table-header-divider" colspan="7" aria-hidden="true"></th></tr>
+    <tr><th aria-hidden="true" class="mat-calendar-table-header-divider" colspan="7"></th></tr>
   </thead>
   <tbody mat-calendar-body
          [label]="_monthLabel"
diff --git a/src/material/datepicker/month-view.spec.ts b/src/material/datepicker/month-view.spec.ts
index 2447182dad54..10ee073fae0c 100644
--- a/src/material/datepicker/month-view.spec.ts
+++ b/src/material/datepicker/month-view.spec.ts
@@ -114,7 +114,7 @@ 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');
+          expect(table.getAttribute('role')).toBe('grid');
         });
 
         it('should set the correct scope on the table headers', () => {
diff --git a/src/material/datepicker/multi-year-view.html b/src/material/datepicker/multi-year-view.html
index d865c16c587c..918954dabf8a 100644
--- a/src/material/datepicker/multi-year-view.html
+++ b/src/material/datepicker/multi-year-view.html
@@ -1,5 +1,5 @@
-<table class="mat-calendar-table" role="presentation">
-  <thead class="mat-calendar-table-header">
+<table class="mat-calendar-table" role="grid">
+  <thead aria-hidden="true" class="mat-calendar-table-header">
     <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>
   <tbody mat-calendar-body
diff --git a/src/material/datepicker/multi-year-view.spec.ts b/src/material/datepicker/multi-year-view.spec.ts
index 6f52b0069bb4..38802c3e8f4b 100644
--- a/src/material/datepicker/multi-year-view.spec.ts
+++ b/src/material/datepicker/multi-year-view.spec.ts
@@ -104,7 +104,7 @@ 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');
+        expect(table.getAttribute('role')).toBe('grid');
       });
 
       describe('calendar body', () => {
diff --git a/src/material/datepicker/year-view.html b/src/material/datepicker/year-view.html
index e0d7964aa3cd..e4d3a5b4c36c 100644
--- a/src/material/datepicker/year-view.html
+++ b/src/material/datepicker/year-view.html
@@ -1,5 +1,5 @@
-<table class="mat-calendar-table" role="presentation">
-  <thead class="mat-calendar-table-header">
+<table class="mat-calendar-table" role="grid">
+  <thead aria-hidden="true" class="mat-calendar-table-header">
     <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>
   <tbody mat-calendar-body
diff --git a/src/material/datepicker/year-view.spec.ts b/src/material/datepicker/year-view.spec.ts
index b62cff2d510e..c1dbc02e5e63 100644
--- a/src/material/datepicker/year-view.spec.ts
+++ b/src/material/datepicker/year-view.spec.ts
@@ -118,7 +118,7 @@ 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');
+        expect(table.getAttribute('role')).toBe('grid');
       });
 
       describe('calendar body', () => {