feat(menu): Add aria-label support in menu, and set `role=menu/menu…

…item` for menu and menu item components.

PiperOrigin-RevId: 466359528

menu/harness.ts

@@ -6,16 +6,15 @@
 
 import {Harness} from '@material/web/testing/harness';
 
-import {ListItemHarness} from '../list/lib/listitem/harness';
-
 import {Menu} from './lib/menu';
+import {MenuItemHarness} from './lib/menuitem/harness';
 
 /**
  * Test harness for menu.
  */
 export class MenuHarness extends Harness<Menu> {
   /** @return ListItem harnesses for the menu's items. */
   getItems() {
-    return this.element.items.map((item) => new ListItemHarness(item));
+    return this.element.items.map((item) => new MenuItemHarness(item));
   }
 }

menu/lib/menu.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2020 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
@@ -12,8 +12,10 @@ import '../../menusurface/menu-surface';
 
 // TODO(b/239222919): remove compat dependencies
 import {observer} from '@material/web/compat/base/observer';
+import {ariaProperty} from '@material/web/decorators/aria-property';
 import {html, LitElement} from 'lit';
 import {property, query} from 'lit/decorators';
+import {ifDefined} from 'lit/directives/if-defined';
 
 import {List} from '../../list/lib/list';
 import {ListItem} from '../../list/lib/listitem/list-item';
@@ -47,13 +49,14 @@ export abstract class Menu extends LitElement {
 
   @property({type: Object}) anchor: HTMLElement|null = null;
 
+  @ariaProperty  // tslint:disable-line:no-new-decorators
+  @property({type: String, attribute: 'data-aria-label', noAccessor: true})
+  override ariaLabel!: string;
+
   @property({type: Boolean, reflect: true}) open = false;
 
   @property({type: Boolean}) quick = false;
 
-  // TODO(b/240174946): Add aria-label support.
-  // @property({type: String}) ariaLabel: string|null = null;
-
   @property({type: String}) corner: Corner = 'BOTTOM_START';
 
   @property({type: Number}) x: number|null = null;
@@ -133,12 +136,20 @@ export abstract class Menu extends LitElement {
           @opened=${this.onOpened}
           @keydown=${this.onKeydown}>
         <md-list
+          aria-label="${ifDefined(this.ariaLabel)}"
+          .listTabIndex=${-1}
+          .listItemTagName=${this.getMenuItemTagName()}
+          role=${'menu'}
           @action=${this.onAction}>
         <slot></slot>
       </md-list>
     </md-menu-surface>`;
   }
 
+  protected getMenuItemTagName() {
+    return 'md-menu-item';
+  }
+
   protected createAdapter(): MDCMenuAdapter {
     return {
       addClassToElementAtIndex: (index, className) => {

menu/lib/menuitem/harness.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ListItemHarness} from '@material/web/list/lib/listitem/harness';
+
+/**
+ * Test harness for menu item.
+ */
+export class MenuItemHarness extends ListItemHarness {}

menu/lib/menuitem/menu-item.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {ListItem} from '@material/web/list/lib/listitem/list-item';
+import {ARIARole} from '@material/web/types/aria';
+
+/** Base class for menu item component. */
+export class MenuItem extends ListItem {
+  override role: ARIARole = 'menuitem';
+}

menu/menu-item.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators';
+
+import {styles} from '../list/lib/listitem/list-item-styles.css';
+
+import {MenuItem} from './lib/menuitem/menu-item';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-menu-item': MdMenuItem;
+  }
+}
+
+@customElement('md-menu-item')
+export class MdMenuItem extends MenuItem {
+  static override styles = [styles];
+}

menu/menu_test.ts

@@ -5,7 +5,7 @@
  */
 
 import './menu';
-import '../list/list-item';
+import './menu-item';
 
 import {Environment} from '@material/web/testing/environment';
 import {html} from 'lit';
@@ -87,9 +87,9 @@ function getMenuTemplate(propsInit: Partial<MdMenu> = {}) {
         Open Menu
       </button>
       <md-menu .quick="${propsInit.quick ?? true}">
-        <md-list-item>One</md-list-item>
-        <md-list-item>Two</md-list-item>
-        <md-list-item>Three</md-list-item>
+        <md-menu-item .headline=${'One'}></md-menu-item>
+        <md-menu-item .headline=${'Two'}></md-menu-item>
+        <md-menu-item .headline=${'Three'}></md-menu-item>
       </md-menu>
     </div>
   `;