fix(material/datepicker): fix Voiceover losing focus on PageDown

Fixes an issue where Voiceover loses focus when pressing PageDown/PageUp
in the calendar to go to the next month/year (issue #24330). Adding a
20ms timeout seems to fix this.

Note that this will not fully fix the issue until #24397 is merged.

Address #24330.

Author: zarend

src/material/datepicker/calendar-body.ts

@@ -195,21 +195,27 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
     return cellNumber == this.activeCell;
   }
 
-  /** Focuses the active cell after the microtask queue is empty. */
+  /**
+   * Focuses the active cell after the microtask queue is empty.
+   *
+   * Adds a 20ms timeout to fix Voiceover losing focus when pressing PageUp/PageDown (issue #24330).
+   */
   _focusActiveCell(movePreview = true) {
     this._ngZone.runOutsideAngular(() => {
       this._ngZone.onStable.pipe(take(1)).subscribe(() => {
-        const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(
-          '.mat-calendar-body-active',
-        );
+        setTimeout(() => {
+          const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(
+            '.mat-calendar-body-active',
+          );
 
-        if (activeCell) {
-          if (!movePreview) {
-            this._skipNextFocus = true;
-          }
+          if (activeCell) {
+            if (!movePreview) {
+              this._skipNextFocus = true;
+            }
 
-          activeCell.focus();
-        }
+            activeCell.focus();
+          }
+        }, 20);
       });
     });
   }

src/material/datepicker/calendar-header.html

@@ -3,7 +3,7 @@
     <button mat-button type="button" class="mat-calendar-period-button"
             (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
             [attr.aria-describedby]="_buttonDescriptionId"
-            [attr.aria-live]="'polite'">
+            attr.aria-live="polite">
       <span [attr.id]="_buttonDescriptionId">{{periodButtonText}}</span>
       <svg class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView !== 'month'"
            viewBox="0 0 10 5" focusable="false">