fix(material/datepicker): fix improper focus trapping with VoiceOver …

…and ChromeVox (#24300) Fixes focus trapping on the datepicker dialog by putting `role="dialog"` `aria-modal="true"` and `cdkTrapFocus` all on the same element. This aligns the datepicker with how MatDialog does focus trapping. Without having them all on the same element, users could exit out of the focus trapping using screenreader specific navigation with VoiceOver and ChromeVox. Fixes #2345 (cherry picked from commit 1c91731)
angular · Feb 7, 2022 · f5199ee · f5199ee
1 parent 4e6915c
commit f5199ee
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 16 deletions.
diff --git a/src/material/datepicker/date-range-input.spec.ts b/src/material/datepicker/date-range-input.spec.ts
@@ -208,7 +208,7 @@ describe('MatDateRangeInput', () => {
     fixture.detectChanges();
     tick();
 
-    const popup = document.querySelector('.cdk-overlay-pane')!;
+    const popup = document.querySelector('.cdk-overlay-pane .mat-datepicker-content-container')!;
     expect(popup).toBeTruthy();
     expect(popup.getAttribute('aria-labelledby')).toBe(label.getAttribute('id'));
   }));

diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts
@@ -123,7 +123,6 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
 {
   private _subscriptions = new Subscription();
   private _model: MatDateSelectionModel<S, D>;
-
   /** Reference to the internal calendar component. */
   @ViewChild(MatCalendar) _calendar: MatCalendar<D>;
 
@@ -154,6 +153,9 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
   /** Portal with projected action buttons. */
   _actionsPortal: TemplatePortal | null = null;
 
+  /** Id of the label for the `role="dialog"` element. */
+  _dialogLabelId: string | null;
+
   constructor(
     elementRef: ElementRef,
     private _changeDetectorRef: ChangeDetectorRef,
@@ -622,14 +624,14 @@ export abstract class MatDatepickerBase<
     instance.datepicker = this;
     instance.color = this.color;
     instance._actionsPortal = this._actionsPortal;
+    instance._dialogLabelId = this.datepickerInput.getOverlayLabelId();
   }
 
   /** Opens the overlay with the calendar. */
   private _openOverlay(): void {
     this._destroyOverlay();
 
     const isDialog = this.touchUi;
-    const labelId = this.datepickerInput.getOverlayLabelId();
     const portal = new ComponentPortal<MatDatepickerContent<S, D>>(
       MatDatepickerContent,
       this._viewContainerRef,
@@ -647,16 +649,6 @@ export abstract class MatDatepickerBase<
         panelClass: `mat-datepicker-${isDialog ? 'dialog' : 'popup'}`,
       }),
     ));
-    const overlayElement = overlayRef.overlayElement;
-    overlayElement.setAttribute('role', 'dialog');
-
-    if (labelId) {
-      overlayElement.setAttribute('aria-labelledby', labelId);
-    }
-
-    if (isDialog) {
-      overlayElement.setAttribute('aria-modal', 'true');
-    }
 
     this._getCloseStream(overlayRef).subscribe(event => {
       if (event) {

diff --git a/src/material/datepicker/datepicker-content.html b/src/material/datepicker/datepicker-content.html
@@ -1,5 +1,8 @@
 <div
   cdkTrapFocus
+  role="dialog"
+  [attr.aria-modal]="true"
+  [attr.aria-labelledby]="_dialogLabelId ?? undefined"
   class="mat-datepicker-content-container"
   [class.mat-datepicker-content-container-with-custom-header]="datepicker.calendarHeaderComponent"
   [class.mat-datepicker-content-container-with-actions]="_actionsPortal">

diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
@@ -236,7 +236,7 @@ describe('MatDatepicker', () => {
         fixture.detectChanges();
         flush();
 
-        const popup = document.querySelector('.cdk-overlay-pane')!;
+        const popup = document.querySelector('.mat-datepicker-content-container')!;
         expect(popup).toBeTruthy();
         expect(popup.getAttribute('role')).toBe('dialog');
       }));
@@ -254,7 +254,9 @@ describe('MatDatepicker', () => {
           fixture.detectChanges();
           flush();
 
-          const popup = document.querySelector('.cdk-overlay-pane')!;
+          const popup = document.querySelector(
+            '.cdk-overlay-pane .mat-datepicker-content-container',
+          )!;
           expect(popup).toBeTruthy();
           expect(popup.getAttribute('aria-labelledby')).toBe('test-label');
         }),
@@ -1405,7 +1407,9 @@ describe('MatDatepicker', () => {
         fixture.detectChanges();
         flush();
 
-        const popup = document.querySelector('.cdk-overlay-pane')!;
+        const popup = document.querySelector(
+          '.cdk-overlay-pane .mat-datepicker-content-container',
+        )!;
         expect(popup).toBeTruthy();
         expect(popup.getAttribute('aria-labelledby')).toBe(label.getAttribute('id'));
       }));

diff --git a/tools/public_api_guard/material/datepicker.md b/tools/public_api_guard/material/datepicker.md
@@ -433,6 +433,7 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>> extend
     comparisonEnd: D | null;
     comparisonStart: D | null;
     datepicker: MatDatepickerBase<any, S, D>;
+    _dialogLabelId: string | null;
     // (undocumented)
     _getSelected(): D | DateRange<D> | null;
     // (undocumented)