Typeaheadcontroller typeahead wrongly activated on menu navigation #5808

What is affected?

Component, Accessibility

Description

Putting focusable components - such as a md-checkbox - inside a md-menu-item and subsequently pressing 'TAB' when focused on said menu-item, correctly delegates focus to its inner checkbox, but also deactivates the parent md-menu-item - e.g sets tabIndex = 0.
Further navigation - e.g pressing ArrowUp - which is handled through a call to the menu.listController.handleKeydown function, will conclude that no items are active and therefore the call to activatePreviousItem with activeItemRecord being a null-value results in a call to activateLastItem.
The last list item gets focus, instead of the item above.

The culprit is the menu.typeaheadController whose onKeydown-function is called through the capturing event listener menu.captureKeydown. As isTypingAhead == false beginTypeahead gets called.

There are checks for whether or not the given key is a navigable key - upon which it should return - but only for arrow keys, space, enter and escape - hardcoded. Therefore shift and tabkeys begin typeahead's which sets tabIndex = -1 for the lastActiveItemRecord (the first menu-item with tabIndex == 0);

Reproduction

The below code (partially from the documentation) for a menu and activating button should display the described behaviour, when tabbing while focus is on the 'banana' md-menu-item, and then trying to navigate afterwards

<md-filled-button id="usage-anchor" type="button" onclick="document.getElementById('usage-menu').open=true">Set with idref</md-filled-button>            
<md-menu id="usage-menu" anchor="usage-anchor">
    <md-menu-item>
        <div slot="headline">Apple</div>
    </md-menu-item>
    <md-menu-item>
        <div slot="headline">Apple 2</div>
    </md-menu-item>
    <md-menu-item>
        <div slot="headline">Banana</div>
        <md-checkbox slot="end"></md-checkbox>
    </md-menu-item>
    <md-menu-item>
        <div slot="headline">Apple 3</div>
    </md-menu-item>
    <md-menu-item>
        <div slot="headline">Apple 4</div>
    </md-menu-item>
    <md-menu-item>
        <div slot="headline">Cucumber</div>
    </md-menu-item>
</md-menu>

Workaround

Including more checks for which keys are navigable/non-typeahead;
Could just add shiftLeft and tab to the long if-statement, or maybe provide an extension point like the listController's isNavigableKey function :) ;

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

All (i imagine)

Browser/OS/Node environment

unrelated i believe