feat(vertical-nav): add trigger unique id and configurable aria-label

vmware-clarity · Feb 7, 2025 · 3f6186e · 3f6186e
1 parent 2213a08
commit 3f6186e
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 3 deletions.
diff --git a/.storybook/stories/vertical-nav/vertical-nav-group.stories.ts b/.storybook/stories/vertical-nav/vertical-nav-group.stories.ts
@@ -44,6 +44,7 @@ export default {
   args: {
     // inputs
     clrVerticalNavGroupExpanded: false,
+    clrVerticalNavTriggerLabel: '',
     // outputs
     clrVerticalNavGroupExpandedChange: action('clrVerticalNavGroupExpandedChange'),
     // story helpers
@@ -57,7 +58,7 @@ const NavGroupTemplate: StoryFn = args => ({
   template: `
     <div class="main-container">
       <div class="content-container">
-        <clr-vertical-nav [clrVerticalNavCollapsible]="true">
+        <clr-vertical-nav [clrVerticalNavCollapsible]="true" [clrVerticalNavTriggerLabel]="clrVerticalNavTriggerLabel">
           <clr-vertical-nav-group
             [clrVerticalNavGroupExpanded]="clrVerticalNavGroupExpanded"
             (clrVerticalNavGroupExpandedChange)="clrVerticalNavGroupExpandedChange($event)"

diff --git a/.storybook/stories/vertical-nav/vertical-nav.stories.ts b/.storybook/stories/vertical-nav/vertical-nav.stories.ts
@@ -42,6 +42,7 @@ export default {
     // inputs
     clrVerticalNavCollapsible: false,
     clrVerticalNavCollapsed: false,
+    clrVerticalNavTriggerLabel: '',
     // outputs
     clrVerticalNavCollapsedChange: action('clrVerticalNavCollapsedChange'),
     // story helpers
@@ -57,6 +58,7 @@ const VerticalNavTemplate: StoryFn = args => ({
       <div class="content-container">
         <clr-vertical-nav
           [clrVerticalNavCollapsible]="clrVerticalNavCollapsible"
+          [clrVerticalNavTriggerLabel]="clrVerticalNavTriggerLabel"
           [clrVerticalNavCollapsed]="clrVerticalNavCollapsed"
           (clrVerticalNavCollapsedChange)="clrVerticalNavCollapsedChange($event)"
         >

diff --git a/projects/angular/src/layout/vertical-nav/vertical-nav.html b/projects/angular/src/layout/vertical-nav/vertical-nav.html
@@ -9,8 +9,9 @@
   type="button"
   class="nav-trigger"
   [class.on-collapse]="collapsed"
+  [attr.aria-controls]="triggerId"
   [attr.aria-expanded]="ariaExpanded"
-  [attr.aria-label]="commonStrings.keys.verticalNavToggle"
+  [attr.aria-label]="verticalNavTriggerLabel"
   (click)="toggleByButton()"
   *ngIf="collapsible"
 >
@@ -20,7 +21,7 @@
     [attr.direction]="(this.collapsed) ? 'right' : 'left'"
   ></cds-icon>
 </button>
-<div class="nav-content">
+<div [id]="triggerId" class="nav-content">
   <ng-content></ng-content>
   <button
     type="button"

diff --git a/projects/angular/src/layout/vertical-nav/vertical-nav.spec.ts b/projects/angular/src/layout/vertical-nav/vertical-nav.spec.ts
@@ -11,6 +11,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { ClrIconModule } from '../../icon/icon.module';
+import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
 import { VerticalNavService } from './providers/vertical-nav.service';
 import { ClrVerticalNav } from './vertical-nav';
 import { ClrVerticalNavModule } from './vertical-nav.module';
@@ -470,6 +471,7 @@ export default function (): void {
 
     describe('Template API', () => {
       let vertNavService: VerticalNavService;
+      const commonStrings = new ClrCommonStringsService();
 
       beforeEach(() => {
         fixture = TestBed.createComponent(APITestComponent);
@@ -482,6 +484,23 @@ export default function (): void {
         fixture.destroy();
       });
 
+      it('supports an input to change aria-label on collapsible vertical nav trigger', () => {
+        fixture.componentInstance.collapsible = true;
+        fixture.detectChanges();
+
+        expect(vertNavService.collapsible).toBe(true);
+
+        const trigger: HTMLElement = compiled.querySelector('.nav-trigger');
+
+        expect(trigger.getAttribute('aria-label')).toBe(commonStrings.keys.verticalNavToggle);
+
+        const verticalNavTriggerLabel = 'Changed label string';
+        fixture.componentInstance.clrVerticalNavTriggerLabel = verticalNavTriggerLabel;
+        fixture.detectChanges();
+
+        expect(trigger.getAttribute('aria-label')).toBe(verticalNavTriggerLabel);
+      });
+
       it('supports an input to enable the collapsible behavior of the nav', () => {
         expect(vertNavService.collapsible).toBe(false);
 
@@ -643,11 +662,13 @@ class ViewBasicsTestComponent {
       #nav
       [clrVerticalNavCollapsible]="collapsible"
       [clrVerticalNavCollapsed]="collapsed"
+      [clrVerticalNavTriggerLabel]="clrVerticalNavTriggerLabel"
       (clrVerticalNavCollapsedChange)="updateCollapsed($event)"
     ></clr-vertical-nav>
   `,
 })
 class APITestComponent {
+  clrVerticalNavTriggerLabel: string;
   collapsible = false;
   collapsed = false;
   collapsedChange: boolean;

diff --git a/projects/angular/src/layout/vertical-nav/vertical-nav.ts b/projects/angular/src/layout/vertical-nav/vertical-nav.ts
@@ -9,6 +9,7 @@ import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core
 import { Subscription } from 'rxjs';
 
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
+import { uniqueIdFactory } from '../../utils/id-generator/id-generator.service';
 import { VerticalNavGroupRegistrationService } from './providers/vertical-nav-group-registration.service';
 import { VerticalNavIconService } from './providers/vertical-nav-icon.service';
 import { VerticalNavService } from './providers/vertical-nav.service';
@@ -25,9 +26,12 @@ import { VerticalNavService } from './providers/vertical-nav.service';
   },
 })
 export class ClrVerticalNav implements OnDestroy {
+  triggerId = uniqueIdFactory();
+
   @Output('clrVerticalNavCollapsedChange') private _collapsedChanged = new EventEmitter<boolean>(true);
 
   private _sub: Subscription;
+  private _verticalNavTriggerLabel: string;
 
   constructor(
     private _navService: VerticalNavService,
@@ -40,6 +44,18 @@ export class ClrVerticalNav implements OnDestroy {
     });
   }
 
+  @Input('clrVerticalNavTriggerLabel')
+  get verticalNavTriggerLabel() {
+    if (this._verticalNavTriggerLabel) {
+      return this._verticalNavTriggerLabel;
+    }
+
+    return this.commonStrings.keys.verticalNavToggle;
+  }
+  set verticalNavTriggerLabel(value: string) {
+    this._verticalNavTriggerLabel = value;
+  }
+
   @Input('clrVerticalNavCollapsible')
   get collapsible(): boolean | string {
     return this._navService.collapsible;