feat(material-experimental/menubar): extends components from cdk menu equivalents (#20301)

Extends MatMenuBar and MatMenuBarItem from their CdkMenu equivalent directives and adds MenuBar and
MenuItem specific behaviours.

Author: andy9775

src/material-experimental/menubar/BUILD.bazel

@@ -1,4 +1,11 @@
-load("//tools:defaults.bzl", "ng_module", "sass_binary", "sass_library")
+load(
+    "//tools:defaults.bzl",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+    "sass_binary",
+    "sass_library",
+)
 
 package(default_visibility = ["//visibility:public"])
 
@@ -14,6 +21,7 @@ ng_module(
     ] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/menubar",
     deps = [
+        "//src/cdk-experimental/menu",
         "@npm//@angular/core",
     ],
 )
@@ -33,6 +41,26 @@ sass_binary(
     src = "menubar-item.scss",
 )
 
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":menubar",
+        "//src/cdk-experimental/menu",
+        "//src/cdk/keycodes",
+        "//src/cdk/testing/private",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),

src/material-experimental/menubar/menubar-item.spec.ts

@@ -0,0 +1,82 @@
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {ComponentFixture, async, TestBed} from '@angular/core/testing';
+import {CdkMenuItem, CdkMenuModule, CdkMenu} from '@angular/cdk-experimental/menu';
+import {MatMenuBarItem} from './menubar-item';
+import {MatMenuBarModule} from './menubar-module';
+
+describe('MatMenuBarItem', () => {
+  let fixture: ComponentFixture<SimpleMenuBarItem>;
+  let menubarItem: MatMenuBarItem;
+  let nativeMenubarItem: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatMenuBarModule, CdkMenuModule],
+      declarations: [SimpleMenuBarItem],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SimpleMenuBarItem);
+    fixture.detectChanges();
+
+    menubarItem = fixture.componentInstance.menubarItem;
+    nativeMenubarItem = fixture.componentInstance.nativeMenubarItem.nativeElement;
+  });
+
+  it('should have the menuitem role', () => {
+    expect(nativeMenubarItem.getAttribute('role')).toBe('menuitem');
+  });
+
+  it('should be a button type', () => {
+    expect(nativeMenubarItem.getAttribute('type')).toBe('button');
+  });
+
+  it('should not set the aria-disabled attribute when false', () => {
+    expect(nativeMenubarItem.hasAttribute('aria.disabled')).toBeFalse();
+  });
+
+  it('should coerce and set aria-disabled attribute', () => {
+    (menubarItem.disabled as any) = '';
+    fixture.detectChanges();
+
+    expect(nativeMenubarItem.getAttribute('aria-disabled')).toBe('true');
+  });
+
+  it('should have cdk and material classes set', () => {
+    expect(nativeMenubarItem.classList.contains('cdk-menu-item')).toBeTrue();
+    expect(nativeMenubarItem.classList.contains('mat-menubar-item')).toBeTrue();
+  });
+
+  it('should open the attached menu on click', () => {
+    nativeMenubarItem.click();
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.menu).toBeDefined();
+  });
+
+  it('should have initial tab index set to -1', () => {
+    expect(nativeMenubarItem.tabIndex).toBe(-1);
+  });
+});
+
+@Component({
+  template: `
+    <mat-menubar>
+      <mat-menubar-item [cdkMenuTriggerFor]="sub">File</mat-menubar-item>
+      <mat-menubar-item [cdkMenuTriggerFor]="sub">File</mat-menubar-item>
+    </mat-menubar>
+
+    <ng-template cdkMenuPanel #sub="cdkMenuPanel">
+      <div #menu cdkMenu [cdkMenuPanel]="sub">
+        <button cdkMenuItem></button>
+      </div>
+    </ng-template>
+  `,
+})
+class SimpleMenuBarItem {
+  @ViewChild(CdkMenuItem) menubarItem: MatMenuBarItem;
+  @ViewChild(CdkMenuItem, {read: ElementRef}) nativeMenubarItem: ElementRef;
+
+  @ViewChild('menu') menu: CdkMenu;
+}

src/material-experimental/menubar/menubar-item.ts

@@ -7,6 +7,7 @@
  */
 
 import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+import {CdkMenuItem} from '@angular/cdk-experimental/menu';
 
 /**
  * A material design MenubarItem adhering to the functionality of CdkMenuItem and
@@ -20,5 +21,13 @@ import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/co
   styleUrls: ['menubar-item.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[tabindex]': '_tabindex',
+    'type': 'button',
+    'role': 'menuitem',
+    'class': 'cdk-menu-item mat-menubar-item',
+    '[attr.aria-disabled]': 'disabled || null',
+  },
+  providers: [{provide: CdkMenuItem, useExisting: MatMenuBarItem}],
 })
-export class MatMenuBarItem {}
+export class MatMenuBarItem extends CdkMenuItem {}

src/material-experimental/menubar/menubar-module.ts

@@ -7,10 +7,12 @@
  */
 
 import {NgModule} from '@angular/core';
+import {CdkMenuModule} from '@angular/cdk-experimental/menu';
 import {MatMenuBar} from './menubar';
 import {MatMenuBarItem} from './menubar-item';
 
 @NgModule({
+  imports: [CdkMenuModule],
   exports: [MatMenuBar, MatMenuBarItem],
   declarations: [MatMenuBar, MatMenuBarItem],
 })

src/material-experimental/menubar/menubar.spec.ts

@@ -0,0 +1,74 @@
+import {Component, ViewChild, ElementRef} from '@angular/core';
+import {RIGHT_ARROW} from '@angular/cdk/keycodes';
+import {CdkMenuBar} from '@angular/cdk-experimental/menu';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
+import {MatMenuBarModule} from './menubar-module';
+import {MatMenuBar} from './menubar';
+
+describe('MatMenuBar', () => {
+  let fixture: ComponentFixture<SimpleMatMenuBar>;
+  let matMenubar: MatMenuBar;
+  let nativeMatMenubar: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatMenuBarModule],
+      declarations: [SimpleMatMenuBar],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SimpleMatMenuBar);
+    fixture.detectChanges();
+
+    matMenubar = fixture.componentInstance.matMenubar;
+    nativeMatMenubar = fixture.componentInstance.nativeMatMenubar.nativeElement;
+  });
+
+  it('should have the menubar role', () => {
+    expect(nativeMatMenubar.getAttribute('role')).toBe('menubar');
+  });
+
+  it('should have the cdk and material classes set', () => {
+    expect(nativeMatMenubar.classList.contains('cdk-menu-bar')).toBeTrue();
+    expect(nativeMatMenubar.classList.contains('mat-menubar')).toBeTrue();
+  });
+
+  it('should have tabindex set to 0', () => {
+    expect(nativeMatMenubar.getAttribute('tabindex')).toBe('0');
+  });
+
+  it('should toggle aria-orientation attribute', () => {
+    expect(nativeMatMenubar.getAttribute('aria-orientation')).toBe('horizontal');
+
+    matMenubar.orientation = 'vertical';
+    fixture.detectChanges();
+
+    expect(nativeMatMenubar.getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  it('should toggle focused items on left/right click', () => {
+    nativeMatMenubar.focus();
+
+    expect(document.querySelector(':focus')!.id).toBe('first');
+
+    dispatchKeyboardEvent(nativeMatMenubar, 'keydown', RIGHT_ARROW);
+    fixture.detectChanges();
+
+    expect(document.querySelector(':focus')!.id).toBe('second');
+  });
+});
+
+@Component({
+  template: `
+    <mat-menubar>
+      <mat-menubar-item id="first"></mat-menubar-item>
+      <mat-menubar-item id="second"></mat-menubar-item>
+    </mat-menubar>
+  `,
+})
+class SimpleMatMenuBar {
+  @ViewChild(CdkMenuBar) matMenubar: MatMenuBar;
+  @ViewChild(CdkMenuBar, {read: ElementRef}) nativeMatMenubar: ElementRef;
+}

src/material-experimental/menubar/menubar.ts

@@ -7,6 +7,7 @@
  */
 
 import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+import {CdkMenuBar, CdkMenuGroup, CDK_MENU, MenuStack} from '@angular/cdk-experimental/menu';
 
 /**
  * A material design Menubar adhering to the functionality of CdkMenuBar. MatMenubar
@@ -19,5 +20,17 @@ import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/co
   styleUrls: ['menubar.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'role': 'menubar',
+    'class': 'cdk-menu-bar mat-menubar',
+    'tabindex': '0',
+    '[attr.aria-orientation]': 'orientation',
+  },
+  providers: [
+    {provide: CdkMenuGroup, useExisting: MatMenuBar},
+    {provide: CdkMenuBar, useExisting: MatMenuBar},
+    {provide: CDK_MENU, useExisting: MatMenuBar},
+    {provide: MenuStack, useClass: MenuStack},
+  ],
 })
-export class MatMenuBar {}
+export class MatMenuBar extends CdkMenuBar {}