feat(aria/ui-patterns): add initial menu pattern

* Adds the initial implementation of the WAI-ARIA menu, menubar, and menuitem patterns. This
includes the basic behaviors for keyboard navigation, opening and closing submenus, and
typeahead support.
* This also introduces a 'focusElement' option to the list navigation behaviors to allow for
moving the active item without focusing it.

Author: wagnermaciel

src/aria/ui-patterns/BUILD.bazel

@@ -14,6 +14,7 @@ ts_project(
         "//src/aria/ui-patterns/behaviors/signal-like",
         "//src/aria/ui-patterns/combobox",
         "//src/aria/ui-patterns/listbox",
+        "//src/aria/ui-patterns/menu",
         "//src/aria/ui-patterns/radio-group",
         "//src/aria/ui-patterns/tabs",
         "//src/aria/ui-patterns/toolbar",

src/aria/ui-patterns/behaviors/list-focus/list-focus.ts

@@ -97,15 +97,19 @@ export class ListFocus<T extends ListFocusItem> {
   }
 
   /** Moves focus to the given item if it is focusable. */
-  focus(item: T): boolean {
+  focus(item: T, opts?: {focusElement?: boolean}): boolean {
     if (this.isListDisabled() || !this.isFocusable(item)) {
       return false;
     }
 
     this.prevActiveItem.set(this.inputs.activeItem());
     this.inputs.activeItem.set(item);
 
-    this.inputs.focusMode() === 'roving' ? item.element().focus() : this.inputs.element()?.focus();
+    if (opts?.focusElement || opts?.focusElement === undefined) {
+      this.inputs.focusMode() === 'roving'
+        ? item.element().focus()
+        : this.inputs.element()?.focus();
+    }
 
     return true;
   }

src/aria/ui-patterns/behaviors/list-navigation/list-navigation.ts

@@ -29,13 +29,13 @@ export class ListNavigation<T extends ListNavigationItem> {
   constructor(readonly inputs: ListNavigationInputs<T> & {focusManager: ListFocus<T>}) {}
 
   /** Navigates to the given item. */
-  goto(item?: T): boolean {
-    return item ? this.inputs.focusManager.focus(item) : false;
+  goto(item?: T, opts?: {focusElement?: boolean}): boolean {
+    return item ? this.inputs.focusManager.focus(item, opts) : false;
   }
 
   /** Navigates to the next item in the list. */
-  next(): boolean {
-    return this._advance(1);
+  next(opts?: {focusElement?: boolean}): boolean {
+    return this._advance(1, opts);
   }
 
   /** Peeks the next item in the list. */
@@ -44,8 +44,8 @@ export class ListNavigation<T extends ListNavigationItem> {
   }
 
   /** Navigates to the previous item in the list. */
-  prev(): boolean {
-    return this._advance(-1);
+  prev(opts?: {focusElement?: boolean}): boolean {
+    return this._advance(-1, opts);
   }
 
   /** Peeks the previous item in the list. */
@@ -54,26 +54,26 @@ export class ListNavigation<T extends ListNavigationItem> {
   }
 
   /** Navigates to the first item in the list. */
-  first(): boolean {
+  first(opts?: {focusElement?: boolean}): boolean {
     const item = this.inputs.items().find(i => this.inputs.focusManager.isFocusable(i));
-    return item ? this.goto(item) : false;
+    return item ? this.goto(item, opts) : false;
   }
 
   /** Navigates to the last item in the list. */
-  last(): boolean {
+  last(opts?: {focusElement?: boolean}): boolean {
     const items = this.inputs.items();
     for (let i = items.length - 1; i >= 0; i--) {
       if (this.inputs.focusManager.isFocusable(items[i])) {
-        return this.goto(items[i]);
+        return this.goto(items[i], opts);
       }
     }
     return false;
   }
 
   /** Advances to the next or previous focusable item in the list based on the given delta. */
-  private _advance(delta: 1 | -1): boolean {
+  private _advance(delta: 1 | -1, opts?: {focusElement?: boolean}): boolean {
     const item = this._peek(delta);
-    return item ? this.goto(item) : false;
+    return item ? this.goto(item, opts) : false;
   }
 
   /** Peeks the next or previous focusable item in the list based on the given delta. */

src/aria/ui-patterns/behaviors/list/list.ts

@@ -24,13 +24,14 @@ import {
   ListTypeaheadItem,
 } from '../list-typeahead/list-typeahead';
 
-/** The selection operations that the list can perform. */
-interface SelectOptions {
+/** The operations that the list can perform after navigation. */
+interface NavOptions {
   toggle?: boolean;
   select?: boolean;
   selectOne?: boolean;
   selectRange?: boolean;
   anchor?: boolean;
+  focusElement?: boolean;
 }
 
 /** Represents an item in the list. */
@@ -105,28 +106,28 @@ export class List<T extends ListItem<V>, V> {
   }
 
   /** Navigates to the first option in the list. */
-  first(opts?: SelectOptions) {
-    this._navigate(opts, () => this.navigationBehavior.first());
+  first(opts?: NavOptions) {
+    this._navigate(opts, () => this.navigationBehavior.first(opts));
   }
 
   /** Navigates to the last option in the list. */
-  last(opts?: SelectOptions) {
-    this._navigate(opts, () => this.navigationBehavior.last());
+  last(opts?: NavOptions) {
+    this._navigate(opts, () => this.navigationBehavior.last(opts));
   }
 
   /** Navigates to the next option in the list. */
-  next(opts?: SelectOptions) {
-    this._navigate(opts, () => this.navigationBehavior.next());
+  next(opts?: NavOptions) {
+    this._navigate(opts, () => this.navigationBehavior.next(opts));
   }
 
   /** Navigates to the previous option in the list. */
-  prev(opts?: SelectOptions) {
-    this._navigate(opts, () => this.navigationBehavior.prev());
+  prev(opts?: NavOptions) {
+    this._navigate(opts, () => this.navigationBehavior.prev(opts));
   }
 
   /** Navigates to the given item in the list. */
-  goto(item: T, opts?: SelectOptions) {
-    this._navigate(opts, () => this.navigationBehavior.goto(item));
+  goto(item: T, opts?: NavOptions) {
+    this._navigate(opts, () => this.navigationBehavior.goto(item, opts));
   }
 
   /** Removes focus from the list. */
@@ -140,7 +141,7 @@ export class List<T extends ListItem<V>, V> {
   }
 
   /** Handles typeahead search navigation for the list. */
-  search(char: string, opts?: SelectOptions) {
+  search(char: string, opts?: NavOptions) {
     this._navigate(opts, () => this.typeaheadBehavior.search(char));
   }
 
@@ -190,7 +191,7 @@ export class List<T extends ListItem<V>, V> {
   }
 
   /** Handles updating selection for the list. */
-  updateSelection(opts: SelectOptions = {anchor: true}) {
+  updateSelection(opts: NavOptions = {anchor: true}) {
     if (opts.toggle) {
       this.selectionBehavior.toggle();
     }
@@ -217,7 +218,7 @@ export class List<T extends ListItem<V>, V> {
    * Handles boilerplate calling of focus & selection operations. Also ensures these
    * additional operations are only called if the navigation operation moved focus to a new option.
    */
-  private _navigate(opts: SelectOptions = {}, operation: () => boolean) {
+  private _navigate(opts: NavOptions = {}, operation: () => boolean) {
     if (opts?.selectRange) {
       this._wrap.set(false);
       this.selectionBehavior.rangeStartIndex.set(this._anchorIndex());

src/aria/ui-patterns/listbox/listbox.ts

@@ -72,7 +72,7 @@ export class ListboxPattern<V> {
   dynamicSpaceKey = computed(() => (this.listBehavior.isTyping() ? '' : ' '));
 
   /** The regexp used to decide if a key should trigger typeahead. */
-  typeaheadRegexp = /^.$/; // TODO: Ignore spaces?
+  typeaheadRegexp = /^.$/;
 
   /** The keydown event manager for the listbox. */
   keydown = computed(() => {

src/aria/ui-patterns/menu/BUILD.bazel

@@ -0,0 +1,37 @@
+load("//tools:defaults.bzl", "ng_project", "ng_web_test_suite", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_project(
+    name = "menu",
+    srcs = [
+        "menu.ts",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+        "//src/aria/ui-patterns/behaviors/event-manager",
+        "//src/aria/ui-patterns/behaviors/expansion",
+        "//src/aria/ui-patterns/behaviors/list",
+        "//src/aria/ui-patterns/behaviors/signal-like",
+    ],
+)
+
+ng_project(
+    name = "unit_test_sources",
+    testonly = True,
+    srcs = [
+        "menu.spec.ts",
+    ],
+    deps = [
+        ":menu",
+        "//:node_modules/@angular/core",
+        "//src/aria/ui-patterns/behaviors/signal-like",
+        "//src/cdk/keycodes",
+        "//src/cdk/testing/private",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)