bug(button): Icon Button Focusing Inconsistent

[karmasakshi]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

This bug can be seen on the documentation page of Menu component. If you go to https://material.angular.io/components/menu/examples and scroll down to "Menu with icons" section, the icon button will sometimes be left focused after opening and closing the menu. See below:

Screen.Recording.2024-02-17.at.1.09.55.AM.mov

One thing to note, I'm seeing this issue only with trackpad taps, not with trackpad clicks. See below:

Screen.Recording.2024-02-17.at.1.11.22.AM.mov

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-fntbkn?file=src%2Fmain.ts

Steps to reproduce:

1. Click on the icon button to open the menu
2. Click again on the icon button to close the menu
3. Move the cursor away from the button
4. Repeat

Expected Behavior

The focus on the icon button should be gone on hovering away from the button.

Actual Behavior

The focus stays on the button.

Environment

• Angular: 17.2.1
• CDK/Material: 17.2.0
• Browser(s): Chrome, Firefox and Safari latest
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 12.7.3

[wagnermaciel]

@karmasakshi I believe for accessibility reasons, the correct behavior is for focus to return to the button after closing the menu.

The unexpected behavior here would be that closing the menu does not return focus to the button

[zarend]

Hello folks, this may be a systemic issue with Overlay and maybe not only an issue with button and menu components. I noticed in chrome debugger that document.activeelement is the menu trigger when closing popup, but it doesn't display the focus state. I also noticed that when closing with mouse, activeElement changed to body before changing to trigger.
-Zach