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

…Down 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
angular · Feb 10, 2022 · fabafac · fabafac
1 parent 7832abb
commit fabafac
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/src/material/datepicker/calendar-body.ts b/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. */

diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
@@ -2,8 +2,7 @@
   <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">
+            [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">