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

…and ChromeVox (angular#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 angular#2345
forsti0506 · Apr 3, 2022 · ffb6ce3 · ffb6ce3
1 parent 4f5fa57
commit ffb6ce3
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)