bug(menu): When opening menu with keyboard, focus is set to the first item, but focus origin is set to "program".

[zelliott]

Motivation

When opening a menu with keyboard as demonstrated in the repro steps below, focus moves to the first menu item (which is correct), but the focus origin is set to "program". This is a problem because some Angular Material consumers (in particular products internal to Google) have styles that depend upon the appropriate focus origin class. In my case, I have strong focus indicator styles that are only supposed to appear when the class .cdk-keyboard-focused is present. When opening a menu with a keyboard, I expect my strong focus indicator to render on the first menu item, but it does not.

Note that this is a problem in both the old Material and new MDC menus.

Problem & Solution

The problematic line is here. Menu only tracks whether it was opened by a "mouse" or "touch" focus origin, and if it is neither of those, it defaults to "program". The easiest solution seems to be to update menu to also track "keyboard" focus origin. The _handleKeydown event handler will need to update the _openedBy focus origin to "keyboard". I'm open to other ideas as well.

Reproduction

Steps to reproduce:

1. Go to https://stackblitz.com/angular/xkpoabmbqpb?file=src/app/material-module.ts
2. Open the menu with the "Enter" key.
3. Observe that the class .cdk-program-focused is present on the first menu item.

Expected Behavior

I expect the class .cdk-keyboard-focused to be present on the first menu item.

Actual Behavior

Observe that the class .cdk-program-focused is present on the first menu item.

Environment

• Angular: Latest
• CDK/Material: Latest
• Browser(s): All
• Operating System (e.g. Windows, macOS, Ubuntu): All

[crisbeto]

In most places we treat program focus in the same way as keyboard in the CSS selectors. We should do the same here.

[zelliott]

Sorry, it's not clear to me what fix you are proposing @crisbeto.

[crisbeto]

I was under the impression that this issue was about the focus indication not showing when the menu is opened using the keyboard, but that doesn't seem to be the case (https://github.com/angular/components/blob/master/src/material/menu/_menu-theme.scss#L37). Are you trying to use the focus classes for your custom styling?

[zelliott]

Yeah. Internally in our product, we have some styles that only show the strong focus indicator when .cdk-keyboard-focused is present on the body (we have a single, global FocusMonitor with FocusMonitorDetectionMode .EVENTUAL that is attached to the body that we use to determine input modality).

IIRC, there was a reason we don't show the strong focus indicator on program as well. In our app, we don't really care about program because, given we have a single FocusMonitor with FocusMonitorDetectionMode .EVENTUAL, essentially all focus events are attributed to either mouse, touch, or keyboard. I could investigate showing the strong focus indicator on program, but I'm guessing I'll encounter some bugs and it seemed easier to contribute a fix for menu to AM.