diff --git a/menu/harness.ts b/menu/harness.ts index e054e320de..68615f3b54 100644 --- a/menu/harness.ts +++ b/menu/harness.ts @@ -6,9 +6,8 @@ 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. @@ -16,6 +15,6 @@ import {Menu} from './lib/menu'; export class MenuHarness extends Harness { /** @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)); } } diff --git a/menu/lib/menu.ts b/menu/lib/menu.ts index feeda581ee..9d710fd198 100644 --- a/menu/lib/menu.ts +++ b/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}> `; } + protected getMenuItemTagName() { + return 'md-menu-item'; + } + protected createAdapter(): MDCMenuAdapter { return { addClassToElementAtIndex: (index, className) => { diff --git a/menu/lib/menuitem/harness.ts b/menu/lib/menuitem/harness.ts new file mode 100644 index 0000000000..6b104ca4b5 --- /dev/null +++ b/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 {} diff --git a/menu/lib/menuitem/menu-item.ts b/menu/lib/menuitem/menu-item.ts new file mode 100644 index 0000000000..fcf550a5f9 --- /dev/null +++ b/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'; +} diff --git a/menu/menu-item.ts b/menu/menu-item.ts new file mode 100644 index 0000000000..cbc0b59ccb --- /dev/null +++ b/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]; +} diff --git a/menu/menu_test.ts b/menu/menu_test.ts index e0bf8fbb70..8074da91de 100644 --- a/menu/menu_test.ts +++ b/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 = {}) { Open Menu - One - Two - Three + + + `;