From 708cb12a9f22007b177a6492df2d78f307633698 Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Mon, 4 Apr 2022 20:55:42 +0000
Subject: [PATCH] fix(material/menu): focus the first item when opening menu on
 iOS VoiceOver

When opening the menu using the iOS VoiceOver screen reader, focus the first item in the menu.
Previously, the first menu item would focus on other screen readers like desktop VoiceOver but
not with iOS VoiceOver.

Waiting until `onStable` seems to fix this.

Fixes #24735
---
 src/material/menu/menu.ts | 61 +++++++++++++++++++--------------------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts
index fcf0d2fa54d5..848d8427e963 100644
--- a/src/material/menu/menu.ts
+++ b/src/material/menu/menu.ts
@@ -391,42 +391,39 @@ export class _MatMenuBase
    * @param origin Action from which the focus originated. Used to set the correct styling.
    */
   focusFirstItem(origin: FocusOrigin = 'program'): void {
-    // When the content is rendered lazily, it takes a bit before the items are inside the DOM.
-    if (this.lazyContent) {
-      this._ngZone.onStable.pipe(take(1)).subscribe(() => this._focusFirstItem(origin));
-    } else {
-      this._focusFirstItem(origin);
-    }
-  }
+    // Wait for `onStable` to ensure iOS VoiceOver screen reader focuses the first item (#24735).
+    this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+      let menuPanel: HTMLElement | null = null;
+
+      if (this._directDescendantItems.length) {
+        menuPanel = this._directDescendantItems.first!._getHostElement().parentElement;
+
+        // Because the `mat-menuPanel` is at the DOM insertion point, not inside the overlay, we don't
+        // have a nice way of getting a hold of the menuPanel panel. We can't use a `ViewChild` either
+        // because the panel is inside an `ng-template`. We work around it by starting from one of
+        // the items and walking up the DOM.
+        while (menuPanel) {
+          if (menuPanel.getAttribute('role') === 'menu') {
+            break;
+          } else {
+            menuPanel = menuPanel.parentElement;
+          }
+        }
+      }
 
-  /**
-   * Actual implementation that focuses the first item. Needs to be separated
-   * out so we don't repeat the same logic in the public `focusFirstItem` method.
-   */
-  private _focusFirstItem(origin: FocusOrigin) {
-    const manager = this._keyManager;
+      // If an item in the menuPanel is already focused, avoid overriding the focus.
+      if (!menuPanel || !menuPanel.contains(document.activeElement)) {
+        const manager = this._keyManager;
+        manager.setFocusOrigin(origin).setFirstItemActive();
 
-    manager.setFocusOrigin(origin).setFirstItemActive();
-
-    // If there's no active item at this point, it means that all the items are disabled.
-    // Move focus to the menu panel so keyboard events like Escape still work. Also this will
-    // give _some_ feedback to screen readers.
-    if (!manager.activeItem && this._directDescendantItems.length) {
-      let element = this._directDescendantItems.first!._getHostElement().parentElement;
-
-      // Because the `mat-menu` is at the DOM insertion point, not inside the overlay, we don't
-      // have a nice way of getting a hold of the menu panel. We can't use a `ViewChild` either
-      // because the panel is inside an `ng-template`. We work around it by starting from one of
-      // the items and walking up the DOM.
-      while (element) {
-        if (element.getAttribute('role') === 'menu') {
-          element.focus();
-          break;
-        } else {
-          element = element.parentElement;
+        // If there's no active item at this point, it means that all the items are disabled.
+        // Move focus to the menuPanel panel so keyboard events like Escape still work. Also this will
+        // give _some_ feedback to screen readers.
+        if (!manager.activeItem && menuPanel) {
+          menuPanel.focus();
         }
       }
-    }
+    });
   }
 
   /**