fix(material/menu): focus the first item when opening menu on iOS Voi…

…ceOver

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

@@ -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);
   }
 
   /**