mat-menu is acting differently when triggered via keyboard vs mouse

[mertdeg2]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

User clicks on the mat-menu trigger button, and first item within menu (or the entire menu) is focused.

What is the current behavior?

User clicks on the mat-menu trigger button, the button stays focused. This creates couple of accessibility issues. Note that if its triggered via keyboard this issue doesn't repro thanks to this logic: https://github.com/angular/material2/blob/3728555c6e37dbeb1756366c797c99655d8ffa1f/src/lib/menu/menu-trigger.ts#L240

What are the steps to reproduce?

1. Go to https://stackblitz.com/angular/lrpbkepagev?file=app%2Fmenu-overview-example.html
2. Click on the menu button
3. Note that focus stays on the button (print document.activeElement)

Note that if you do this via keyboard, the first focusable element within mat-menu is focused.

What is the use-case or motivation for changing an existing behavior?

We have a tooltip component that stays open when a button is focused. When there is a tooltip and a menu attached to a component, click on the menu trigger button will result in both tooltip and menu showing. Once user clicks on menu, the menu component should take away to focus (like it does when its triggered via keyboard). This would also make sure screen readers announce the right content.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All

[mertdeg2]

@jelbourn

[crisbeto]

If I remember correctly, the reasoning behind only focusing the first item when the menu is opened by keyboard was because there was something explicit about it in the spec, however I'm having a hard time finding it.

As for the case when it's opened by keyboard, focus seems to be moved correctly onto the menu panel (you can check it by throwing this in the console and trying to open by click: setInterval(_ => console.log(document.activeElement), 1000);. Note that focus will be restored to the button once the menu is closed.

[mertdeg2]

Thanks for explanation on this @crisbeto! With current behavior, when the user clicks on the menu screen readers don't announce anything different. I think this will cause accessibility issues for visually impaired users who use mouse.

This would also be inline with HTML <select/> implementation.

[jelbourn]

There's nothing explicit in the spec, but the implied behavior is that the focus style only shows when the menu is opened by keyboard. This happens because the focus treatment is the same as the hover treatment and most users get confused and think it's a bug.

I think we should make both keyboard and mouse work the same WRT what gets focused but only show the initial focus style when the interaction was through keyboard. I vaguely recall this coming up before for another component- maybe the select?

[alexandermikuta]

It looks like the problem still (or again) exists as can be seen at: https://material.angular.io/components/menu/examples

[crisbeto]

I don't see the issue @alexandermikuta. Focus does get moved to the button when you open it using the mouse, we just decide not to change the styling in this particular case.

[alexandermikuta]

@crisbeto It seems with the latest material-website update the issue is gone. I can not reproduce my error from yesterday anymore.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}