fix(menu): blur focused descendant before setting aria-hidden

[akinshaywai]

Problem

Fixes #5760

When a user opens a menu, focuses a menu item, then switches to another window or tab:

1. The browser fires focusout on the focused <li> menu item (relatedTarget is null)
2. handleFocusout closes the menu
3. willUpdate sets aria-hidden="true" on <md-menu>
4. The browser blocks the attribute and logs a console warning:

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead…

This violates WAI-ARIA guidelines and produces noise in the console.

Fix

Before setting aria-hidden="true" in willUpdate, check whether document.activeElement is a descendant of the menu and blur it if so. This moves focus to document.body first, allowing aria-hidden to be applied without triggering the browser warning.

const focused = document.activeElement;
if (focused instanceof HTMLElement && this.contains(focused)) {
  focused.blur();
}
this.setAttribute('aria-hidden', 'true');

Testing

To reproduce before this fix:

1. Open https://material-web.dev/components/menu/
2. Open the menu and focus a menu item using keyboard
3. Switch to another tab/window
4. Observe the console warning in DevTools

After this fix the warning no longer appears.

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.