fix(menu): submenus will open correctly on click

PiperOrigin-RevId: 523796693

list/lib/listitem/list-item.ts

@@ -105,7 +105,7 @@ export class ListItemEl extends LitElement implements ListItem {
    * so that we have control over focus on specific variants such as disabling
    * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.
    */
-  protected focusOnSelection = true;
+  protected focusOnActivation = true;
 
   protected getRipple = () => {
     this.showRipple = true;
@@ -119,7 +119,7 @@ export class ListItemEl extends LitElement implements ListItem {
       if (this.active) {
         this.itemTabIndex = 0;
 
-        if (this.focusOnSelection) {
+        if (this.focusOnActivation) {
           this.showFocusRing = shouldShowStrongFocus();
         }
 
@@ -274,7 +274,7 @@ export class ListItemEl extends LitElement implements ListItem {
     // will focus the list item root if it is selected but not on the first
     // update or else it may cause the page to jump on first load.
     if (changed.has('active') && !this.isFirstUpdate && this.active &&
-        this.focusOnSelection) {
+        this.focusOnActivation) {
       this.focus();
     }
 

menu/lib/menu.ts

@@ -133,7 +133,7 @@ export abstract class Menu extends LitElement {
    */
   @ariaProperty
   @property({attribute: 'data-role', noAccessor: true})
-  override role: ARIARole = 'list';
+  override role: ARIARole = 'menu';
   /**
    * The max time between the keystrokes of the typeahead menu behavior before
    * it clears the typeahead buffer.
@@ -664,6 +664,7 @@ export abstract class Menu extends LitElement {
     const items = this.items;
     for (const item of items) {
       item.active = false;
+      item.selected = false;
     }
   }
 

menu/lib/shared.ts

@@ -15,10 +15,14 @@ interface MenuItemSelf {
    */
   headline: string;
   /**
-   * Whether or not the item is in the selected visual state (focuses on
-   * selection).
+   * Whether or not the item is the currently active item of interest (focuses
+   * upon activation).
    */
   active: boolean;
+  /**
+   * Whether or not the item is in the selected visual state.
+   */
+  selected?: boolean;
   /**
    * If it is a sub-menu-item, a method that can close the submenu.
    */

menu/lib/submenuitem/sub-menu-item.ts

@@ -217,7 +217,6 @@ export class SubMenuItem extends MenuItemEl {
     // around the menu and then mouses over an md-sub-menu.
     this.dispatchEvent(new DeactivateItemsEvent());
     this.dispatchEvent(new DeactivateTypeaheadEvent());
-    this.active = true;
     this.selected = true;
 
     // This is the case of mouse hovering when already opened via keyboard or

select/lib/selectoption/select-option.ts

@@ -42,7 +42,7 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
       // By default active = true focuses the element. We want to prevent that
       // in this case because we set active = this.selected and that may mess
       // around with menu's restore focus function once the menu closes.
-      this.focusOnSelection = false;
+      this.focusOnActivation = false;
     }
 
     super.willUpdate(changed);
@@ -52,7 +52,7 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
     super.updated(changed);
     // Restore the active = true focusing behavior which happens in
     // super.updated() if it was turned off.
-    this.focusOnSelection = true;
+    this.focusOnActivation = true;
 
     // Do not dispatch event on first update / boot-up.
     if (changed.has('selected') && changed.get('selected') !== undefined) {