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

Add a timeout before manually focusing cells on the calendar. This seems
to fix an issue where Voiceover loses focus when pressing the
PageDown/PageUp keys.

Fixes #24330.

Author: zarend

src/material/datepicker/calendar-body.ts

@@ -20,7 +20,7 @@ import {
   OnDestroy,
   AfterViewChecked,
 } from '@angular/core';
-import {take} from 'rxjs/operators';
+import {delay, take} from 'rxjs/operators';
 
 /** Extra CSS classes that can be associated with a calendar cell. */
 export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
@@ -216,21 +216,27 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
     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 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();
+          }
+        });
       });
     });
   }

src/material/datepicker/calendar.spec.ts

@@ -7,7 +7,14 @@ import {
   MockNgZone,
 } from '../../cdk/testing/private';
 import {Component, NgZone} from '@angular/core';
-import {waitForAsync, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {
+  fakeAsync,
+  waitForAsync,
+  ComponentFixture,
+  inject,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
 import {DateAdapter, MatNativeDateModule} from '@angular/material/core';
 import {DEC, FEB, JAN, JUL, NOV} from '../testing';
 import {By} from '@angular/platform-browser';
@@ -190,7 +197,7 @@ describe('MatCalendar', () => {
           expect(activeCell.focus).not.toHaveBeenCalled();
         });
 
-        it('should move focus to the active cell when the view changes', () => {
+        it('should move focus to the active cell when the view changes', fakeAsync(() => {
           calendarInstance.currentView = 'multi-year';
           fixture.detectChanges();
 
@@ -200,9 +207,10 @@ describe('MatCalendar', () => {
           spyOn(activeCell, 'focus').and.callThrough();
 
           zone.simulateZoneExit();
+          tick();
 
           expect(activeCell.focus).toHaveBeenCalled();
-        });
+        }));
 
         describe('year view', () => {
           beforeEach(() => {

src/material/datepicker/date-range-input.spec.ts

@@ -675,6 +675,7 @@ describe('MatDateRangeInput', () => {
 
     rangePicker.open();
     fixture.detectChanges();
+    tick();
     flush();
 
     expect(startModel.dirty).toBe(false);

src/material/datepicker/datepicker-actions.spec.ts

@@ -1,5 +1,5 @@
 import {Component, ElementRef, Type, ViewChild} from '@angular/core';
-import {ComponentFixture, TestBed, flush, fakeAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed, flush, fakeAsync, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatNativeDateModule} from '@angular/material/core';
@@ -28,37 +28,42 @@ describe('MatDatepickerActions', () => {
     return TestBed.createComponent(component);
   }
 
-  it('should render the actions inside calendar panel in popup mode', () => {
+  it('should render the actions inside calendar panel in popup mode', fakeAsync(() => {
     const fixture = createComponent(DatepickerWithActions);
     fixture.detectChanges();
     fixture.componentInstance.datepicker.open();
     fixture.detectChanges();
+    tick();
+    flush();
 
     const actions = document.querySelector('.mat-datepicker-content .mat-datepicker-actions');
     expect(actions).toBeTruthy();
     expect(actions?.querySelector('.cancel')).toBeTruthy();
     expect(actions?.querySelector('.apply')).toBeTruthy();
-  });
+  }));
 
-  it('should render the actions inside calendar panel in touch UI mode', () => {
+  it('should render the actions inside calendar panel in touch UI mode', fakeAsync(() => {
     const fixture = createComponent(DatepickerWithActions);
     fixture.componentInstance.touchUi = true;
     fixture.detectChanges();
     fixture.componentInstance.datepicker.open();
     fixture.detectChanges();
+    tick();
+    flush();
 
     const actions = document.querySelector('.mat-datepicker-content .mat-datepicker-actions');
     expect(actions).toBeTruthy();
     expect(actions?.querySelector('.cancel')).toBeTruthy();
     expect(actions?.querySelector('.apply')).toBeTruthy();
-  });
+  }));
 
   it('should not assign the value or close the datepicker when a value is selected', fakeAsync(() => {
     const fixture = createComponent(DatepickerWithActions);
     fixture.detectChanges();
     const {control, datepicker, onDateChange, input} = fixture.componentInstance;
     datepicker.open();
     fixture.detectChanges();
+    tick();
 
     const content = document.querySelector('.mat-datepicker-content')!;
     const cells = content.querySelectorAll<HTMLElement>('.mat-calendar-body-cell');
@@ -86,6 +91,8 @@ describe('MatDatepickerActions', () => {
     const {control, datepicker, onDateChange, input} = fixture.componentInstance;
     datepicker.open();
     fixture.detectChanges();
+    tick();
+    flush();
 
     const content = document.querySelector('.mat-datepicker-content')!;
     const cells = content.querySelectorAll<HTMLElement>('.mat-calendar-body-cell');
@@ -98,6 +105,7 @@ describe('MatDatepickerActions', () => {
 
     cells[10].click();
     fixture.detectChanges();
+    tick();
     flush();
 
     expect(datepicker.opened).toBe(true);
@@ -125,6 +133,8 @@ describe('MatDatepickerActions', () => {
     fixture.detectChanges();
     datepicker.open();
     fixture.detectChanges();
+    tick();
+    flush();
 
     const content = document.querySelector('.mat-datepicker-content')!;
     const cells = content.querySelectorAll<HTMLElement>('.mat-calendar-body-cell');
@@ -135,6 +145,7 @@ describe('MatDatepickerActions', () => {
 
     cells[10].click();
     fixture.detectChanges();
+    tick();
     flush();
 
     expect(datepicker.opened).toBe(true);
@@ -156,6 +167,8 @@ describe('MatDatepickerActions', () => {
     const {control, datepicker, onDateChange, input} = fixture.componentInstance;
     datepicker.open();
     fixture.detectChanges();
+    tick();
+    flush();
 
     const content = document.querySelector('.mat-datepicker-content')!;
     const cells = content.querySelectorAll<HTMLElement>('.mat-calendar-body-cell');
@@ -168,6 +181,7 @@ describe('MatDatepickerActions', () => {
 
     cells[10].click();
     fixture.detectChanges();
+    tick();
     flush();
 
     expect(datepicker.opened).toBe(true);
@@ -192,6 +206,8 @@ describe('MatDatepickerActions', () => {
     const {control, datepicker, onDateChange} = fixture.componentInstance;
     datepicker.open();
     fixture.detectChanges();
+    tick();
+    flush();
 
     let content = document.querySelector('.mat-datepicker-content')!;
     let actions = content.querySelector('.mat-datepicker-actions')!;
@@ -204,6 +220,7 @@ describe('MatDatepickerActions', () => {
 
     cells[10].click();
     fixture.detectChanges();
+    tick();
     flush();
 
     expect(datepicker.opened).toBe(true);
@@ -233,6 +250,7 @@ describe('MatDatepickerActions', () => {
 
     cells[10].click();
     fixture.detectChanges();
+    tick();
     flush();
 
     expect(datepicker.opened).toBe(false);