angular
bug(button): Icon Button Focusing Inconsistent
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:
https://github.com/angular/components/assets/4698762/8261e82f-a51d-481d-a45b-467f3571429e
One thing to note, I'm seeing this issue only with trackpad taps, not with trackpad clicks. See below:
https://github.com/angular/components/assets/4698762/d818e059-1e3f-4b05-80ea-e70e12e06e36
Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-fntbkn?file=src%2Fmain.ts
Steps to reproduce:
- Click on the icon button to open the menu
- Click again on the icon button to close the menu
- Move the cursor away from the button
- 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
@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
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
