mat-menu: button navigation on screen readers doesn't work while mat-menu is open

[DJesseTaylor]

Steps to reproduce:

This issue can be reproduced on the https://material.angular.io/components/menu/overview page with the first mat-menu example.

1. Open a mat-menu item containing buttons while using a screen reader (Issue found while using JAWS)

2. Attempt to navigate to the next button by pressing b. (This is the command on JAWS it might be different on other screen readers)

Expected Behavior

Screen reader should focus the next button on the screen, which should be the first item in the action menu

Actual Behavior

Screen reader finds no buttons to navigate to.

Environment

• Angular/Material/CDK Version: "@angular/cdk": "^12.2.3", "@angular/common": "^12.2.3", "@angular/compiler": "^12.2.3", "@angular/core": "^12.2.3", "@angular/forms": "^12.2.3", "@angular/material": "^12.2.3",
• Browser(s): Chrome Version 93.0.4577.82
• Operating System (e.g. Windows, macOS, Ubuntu): Window
• Screen Reader: JAWS Professional Version 2020.1912.11

[zarend]

Hello DJesseTaylor,

This looks like another issue with Overlay popup being at the end of the DOM, rather than inline adjacent to the Overlay's trigger. What I believe is happening is that since focus is in the overlay popup, focus is at the end of the DOM. That means that trying to navigate to next button will give no result, since we have already passed all the buttons in the DOM by moving to the Overlay popup.

Best Regards,

Zach