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,23 +195,29 @@ 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',
-        );
-
-        if (activeCell) {
-          if (!movePreview) {
-            this._skipNextFocus = true;
+    setTimeout(() => {
+      this._ngZone.runOutsideAngular(() => {
+        this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+          const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(
+            '.mat-calendar-body-active',
+          );
+
+          if (activeCell) {
+            if (!movePreview) {
+              this._skipNextFocus = true;
+            }
+
+            activeCell.focus();
           }
-
-          activeCell.focus();
-        }
+        });
       });
-    });
+    }, 20);
   }
 
   /** Gets whether a value is the start of the main range. */