From 2ce0153225a8e9fb0da959fe7395573a74831ce3 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 on iOS VoiceOver, 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.

Add a timeout before focusing the first item. This seems to fix the
screen reader focus and browser focus being on different elements.

Fixes #24735
---
 src/material/menu/menu.ts | 42 ++++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts
index fcf0d2fa54d5..f358b27ae680 100644
--- a/src/material/menu/menu.ts
+++ b/src/material/menu/menu.ts
@@ -404,29 +404,31 @@ export class _MatMenuBase
    * out so we don't repeat the same logic in the public `focusFirstItem` method.
    */
   private _focusFirstItem(origin: FocusOrigin) {
-    const manager = this._keyManager;
+    setTimeout(() => {
+      const manager = this._keyManager;
 
-    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;
+      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') {
+            console.log('MatMenu focusing on', element);
+            break;
+          } else {
+            element = element.parentElement;
+          }
         }
       }
-    }
+    }, 0);
   }
 
   /**