feat(design): add aria-controls support to DaffMenuComponent (#4315)

Co-Authored-By: Joanna Lau <[email protected]>
Co-Authored-By: Fiona Cai <[email protected]>

Author: fiona-cai

libs/design-examples/menu/src/menu-with-id/menu-content/menu-content.component.html

@@ -0,0 +1,13 @@
+<daff-menu>
+  <a href="#" daff-menu-item>
+    <fa-icon [icon]="faUser" [fixedWidth]="true" daffPrefix></fa-icon> My
+    Account
+  </a>
+  <a href="#" daff-menu-item>
+    <fa-icon [icon]="faInfo" [fixedWidth]="true" daffPrefix></fa-icon> Help
+  </a>
+  <button daff-menu-item>
+    <fa-icon [icon]="faEnvelope" [fixedWidth]="true" daffPrefix></fa-icon>
+    Contact Us
+  </button>
+</daff-menu>

libs/design-examples/menu/src/menu-with-id/menu-content/menu-content.component.ts

@@ -0,0 +1,27 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import {
+  faEnvelope,
+  faInfo,
+  faUser,
+} from '@fortawesome/free-solid-svg-icons';
+
+import { DaffMenuModule } from '@daffodil/design/menu';
+
+@Component({
+  selector: 'menu-with-id-content',
+  templateUrl: './menu-content.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DaffMenuModule,
+    FaIconComponent,
+  ],
+})
+export class MenuWithIdContentExampleComponent {
+  faUser = faUser;
+  faInfo = faInfo;
+  faEnvelope = faEnvelope;
+}

libs/design-examples/menu/src/menu-with-id/menu-with-id.component.html

@@ -0,0 +1,7 @@
+<button
+  daff-button
+  color="theme"
+  [daffMenuActivator]="menu"
+  id="menu-with-id">
+  Menu
+</button>

libs/design-examples/menu/src/menu-with-id/menu-with-id.component.ts

@@ -0,0 +1,22 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+import { DaffButtonComponent } from '@daffodil/design/button';
+import { DaffMenuModule } from '@daffodil/design/menu';
+
+import { MenuWithIdContentExampleComponent } from './menu-content/menu-content.component';
+
+@Component({
+  selector: 'menu-with-id-example',
+  templateUrl: './menu-with-id.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    DaffButtonComponent,
+    DaffMenuModule,
+  ],
+})
+export class MenuWithIdExampleComponent {
+  public menu = MenuWithIdContentExampleComponent;
+}

libs/design-examples/menu/src/provider.ts

@@ -11,5 +11,9 @@ export const provideDaffDesignMenuExamplesContent = () => makeEnvironmentProvide
     id: 'menu-with-icon-toggle',
     component: () => import('./menu-with-icon-toggle/menu-with-icon-toggle.component').then(c => c.MenuWithIconToggleExampleComponent),
   },
+  {
+    id: 'menu-with-id',
+    component: () => import('./menu-with-id/menu-with-id.component').then(c => c.MenuWithIdExampleComponent),
+  },
 ));
 

libs/design-examples/menu/src/public_api.ts

@@ -1,3 +1,4 @@
 export { BasicMenuExampleComponent } from './basic-menu/basic-menu.component';
 export { MenuWithIconToggleExampleComponent } from './menu-with-icon-toggle/menu-with-icon-toggle.component';
+export { MenuWithIdExampleComponent } from './menu-with-id/menu-with-id.component';
 export { provideDaffDesignMenuExamplesContent } from './provider';

libs/design/menu/README.md

@@ -105,18 +105,12 @@ The menu activator provides an `isOpen` property that tracks whether the menu is
 
 <daff-docs-example-viewer example="menu-with-icon-toggle"></daff-docs-example-viewer>
 
-```html
-<button [daffMenuActivator]="menuContent" #menu="daffMenuActivator">
-  Options
-  <fa-icon [icon]="menu.isOpen() ? faChevronUp : faChevronDown"></fa-icon>
-</button>
 
-<ng-template #menuContent>
-  <daff-menu>
-    <button daff-menu-item>Menu Item</button>
-  </daff-menu>
-</ng-template>
-```
+### Setting an ID
+
+The menu activator accepts an optional `id` input. When set, the opened menu's `id` is derived as `{id}-menu`. When no `id` is provided, a unique ID is auto-generated.
+
+<daff-docs-example-viewer example="menu-with-id"></daff-docs-example-viewer>
 
 ## Accessibility
 Menu follows the [Menu and Menubar WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).

libs/design/menu/src/config/menu-config.ts

@@ -0,0 +1,26 @@
+import { createConfigInjectionToken } from '@daffodil/core';
+
+/**
+ * Configuration for a menu instance.
+ */
+export interface DaffMenuConfig {
+  /**
+   * A unique identifier for the menu instance.
+   */
+  menuId?: string;
+}
+
+const daffMenuConfigDefault: DaffMenuConfig = {
+  menuId: '',
+};
+
+export const {
+  /**
+   * An injection token for the menu configuration.
+   */
+  token: DAFF_MENU_CONFIG,
+  /**
+   * Provider function for {@link DAFF_MENU_CONFIG}.
+   */
+  provider: provideDaffMenuConfig,
+} = createConfigInjectionToken<DaffMenuConfig>(daffMenuConfigDefault, 'DAFF_MENU_CONFIG');

libs/design/menu/src/config/menu-id.ts

@@ -0,0 +1,7 @@
+let daffMenuUniqueId = 0;
+
+/**
+ * Generates a unique menu ID for each menu instance.
+ */
+export const daffNextMenuId = (): string =>
+  `daff-menu-${daffMenuUniqueId++}`;

libs/design/menu/src/menu-activator/menu-activator.component.spec.ts

@@ -9,6 +9,10 @@ import {
 import { By } from '@angular/platform-browser';
 
 import { DaffMenuActivatorDirective } from './menu-activator.component';
+import {
+  DAFF_MENU_CONFIG,
+  DaffMenuConfig,
+} from '../config/menu-config';
 import { DaffMenuComponent } from '../menu/menu.component';
 import { DaffMenuService } from '../services/menu.service';
 import { provideTestMenuService } from '../testing/dummy-service';
@@ -37,6 +41,7 @@ describe('@daffodil/design/menu | DaffMenuActivatorDirective', () => {
       ],
       providers: [
         provideTestMenuService(),
+        { provide: DAFF_MENU_CONFIG, useValue: <DaffMenuConfig>{ menuId: 'daff-menu-test' }},
       ],
     }).compileComponents();
 
@@ -55,6 +60,10 @@ describe('@daffodil/design/menu | DaffMenuActivatorDirective', () => {
     expect(de.nativeElement.getAttribute('aria-haspopup')).toBe('menu');
   });
 
+  it('should set aria-controls to the reserved menu id on init', () => {
+    expect(de.nativeElement.getAttribute('aria-controls')).toMatch(/^daff-menu-\d+$/);
+  });
+
   it('should open the menu when the button is clicked', () => {
     const menuService = TestBed.inject(DaffMenuService);
     spyOn(menuService, 'open');