fix(material/datepicker) debugging VoiceOver not reading date on PageDown

Do not merge this pls. Debugging issue #2430.

There seems to be two issues

1. The screenreader focus doesn't not match the browser focus
2. the aria-live region is interfering with reading the focused element

Adds a timeout to fix #1, and removes the aria-live region to fix #2. This is not the final solution, requires more investigation...

Relates to #24330

Author: zarend

src/material/datepicker/calendar-body.ts

@@ -197,21 +197,23 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
 
   /** Focuses the active cell after the microtask queue is empty. */
   _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();
-        }
+        });
       });
-    });
+    }, 50);
   }
 
   /** Gets whether a value is the start of the main range. */

src/material/datepicker/calendar-header.html

@@ -1,9 +1,7 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
     <button mat-button type="button" class="mat-calendar-period-button"
-            (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
-            [attr.aria-describedby]="_buttonDescriptionId"
-            cdkAriaLive="polite">
+            (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel">
       <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">