fix(angular:vertical-nav): navgroup togglebtn a11y

• backport to v12 • this adds a new input to the clr-vertical-nav-group component • the new input is groupLabel/clrVerticalNavGroupLabel • it defaults to commonstrings.keys.verticalNavGroupToggle • if supplied a value, it updates the aria-label on the toggle button • previously, a custom label could not be provided to the toggle button • ...without non-trivial overrides to commonstrings Signed-off-by: Scott Mathis <smathis@vmware.com>
vmware-clarity · Mar 7, 2022 · e44f64c · e44f64c
1 parent 3b60871
commit e44f64c
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 33 deletions.
diff --git a/golden/clr-angular.d.ts b/golden/clr-angular.d.ts
@@ -1924,6 +1924,7 @@ export declare class ClrVerticalNavGroup implements AfterContentInit, OnDestroy
     get expanded(): boolean;
     set expanded(value: boolean);
     expandedChange: EventEmitter<boolean>;
+    groupLabel: string;
     set userExpandedInput(value: boolean | string);
     constructor(_itemExpand: IfExpandService, _navGroupRegistrationService: VerticalNavGroupRegistrationService, _navGroupService: VerticalNavGroupService, _navService: VerticalNavService, commonStrings: ClrCommonStringsService);
     collapseGroup(): void;

diff --git a/projects/angular/src/layout/vertical-nav/vertical-nav-group.html b/projects/angular/src/layout/vertical-nav/vertical-nav-group.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -10,7 +10,7 @@
     class="nav-group-trigger"
     type="button"
     [attr.aria-expanded]="expanded"
-    [attr.aria-label]="commonStrings.keys.verticalNavGroupToggle"
+    [attr.aria-label]="groupLabel"
     (click)="toggleExpand()"
   >
     <ng-content select="[clrVerticalNavIcon]"></ng-content>

diff --git a/projects/angular/src/layout/vertical-nav/vertical-nav-group.spec.ts b/projects/angular/src/layout/vertical-nav/vertical-nav-group.spec.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -151,6 +151,36 @@ export default function (): void {
       });
     });
 
+    describe('Nav Group Internals with clrVerticalNavGroupLabel', () => {
+      let navGroup: ClrVerticalNavGroup;
+      let toggleBtn: HTMLButtonElement;
+
+      beforeEach(() => {
+        fixture = TestBed.createComponent(IfExpandedTestComponent);
+        fixture.detectChanges();
+        compiled = fixture.nativeElement;
+        navGroup = fixture.componentInstance.navGroup;
+        toggleBtn = compiled.querySelector('.nav-group-trigger');
+      });
+
+      afterEach(() => {
+        fixture.destroy();
+      });
+
+      it('defaults aria-label of nav group toggle button to common strings', () => {
+        expect(toggleBtn.hasAttribute('aria-label')).toBe(true);
+        expect(toggleBtn.getAttribute('aria-label')).toBe(navGroup.commonStrings.keys.verticalNavGroupToggle);
+      });
+
+      it('overrides default aria-label if clrVerticalNavGroup is set', fakeAsync(function () {
+        navGroup.groupLabel = 'ohai';
+        fixture.detectChanges();
+        tick();
+        expect(toggleBtn.hasAttribute('aria-label')).toBe(true);
+        expect(toggleBtn.getAttribute('aria-label')).toBe('ohai');
+      }));
+    });
+
     describe('Template API', () => {
       let navGroup: ClrVerticalNavGroup;
       let expandService: IfExpandService;

diff --git a/projects/angular/src/layout/vertical-nav/vertical-nav-group.ts b/projects/angular/src/layout/vertical-nav/vertical-nav-group.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -98,6 +98,9 @@ export class ClrVerticalNavGroup implements AfterContentInit, OnDestroy {
     }
   }
 
+  @Input('clrVerticalNavGroupLabel')
+  groupLabel = this.commonStrings.keys.verticalNavGroupToggle;
+
   @Input('clrVerticalNavGroupExpanded')
   set userExpandedInput(value: boolean | string) {
     value = !!value;

diff --git a/src/app/vertical-nav/accessibility/vertical-nav-accessibility.demo.html b/src/app/vertical-nav/accessibility/vertical-nav-accessibility.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -26,7 +26,7 @@
     </header>
     <div class="content-container">
       <clr-vertical-nav>
-        <clr-vertical-nav-group routerLinkActive="active">
+        <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Beatles nav group'">
           <a
             [routerLink]="['./beatles']"
             routerLinkActive="active"
@@ -45,7 +45,7 @@
           </ng-template>
         </clr-vertical-nav-group>
 
-        <clr-vertical-nav-group routerLinkActive="active">
+        <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Killers nav group'">
           <a
             [routerLink]="['./killers']"
             routerLinkActive="active"

diff --git a/src/app/vertical-nav/highlights/vertical-nav-highlights.demo.html b/src/app/vertical-nav/highlights/vertical-nav-highlights.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -39,7 +39,10 @@
           </a>
 
           <ng-container *ngIf="item['children']">
-            <clr-vertical-nav-group *ngIf="item['children']">
+            <clr-vertical-nav-group
+              *ngIf="item['children']"
+              [clrVerticalNavGroupLabel]="'Toggle ' + item.label.toLowerCase() + ' nav group'"
+            >
               <a
                 href="javascript://"
                 clrVerticalNavLink

diff --git a/src/app/vertical-nav/nested-icon-menus/vertical-nav-nested-icon-menus.demo.html b/src/app/vertical-nav/nested-icon-menus/vertical-nav-nested-icon-menus.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -28,7 +28,10 @@ <h4>With Nav Group Text</h4>
     <div class="content-container">
       <clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapse">
         <ng-container *ngFor="let item of case.items">
-          <clr-vertical-nav-group *ngIf="item['children']">
+          <clr-vertical-nav-group
+            *ngIf="item['children']"
+            [clrVerticalNavGroupLabel]="'Toggle ' + item.label.toLowerCase() + ' nav group'"
+          >
             <cds-icon [attr.shape]="item.icon" *ngIf="item['icon']" clrVerticalNavIcon></cds-icon>
             {{item.label}}
             <clr-vertical-nav-group-children *clrIfExpanded>
@@ -81,7 +84,10 @@ <h4>With Nav Group Links</h4>
     <div class="content-container">
       <clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapse">
         <ng-container *ngFor="let item of case.items">
-          <clr-vertical-nav-group *ngIf="item['children']">
+          <clr-vertical-nav-group
+            *ngIf="item['children']"
+            [clrVerticalNavGroupLabel]="'Toggle ' + item.label.toLowerCase() + ' nav group'"
+          >
             <a href="javascript://" clrVerticalNavLink>
               <cds-icon [attr.shape]="item.icon" *ngIf="item['icon']" clrVerticalNavIcon></cds-icon>
               {{item.label}}

diff --git a/src/app/vertical-nav/nested-menus/vertical-nav-nested-menus.demo.html b/src/app/vertical-nav/nested-menus/vertical-nav-nested-menus.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -28,7 +28,10 @@ <h4>With Nav Group Text</h4>
     <div class="content-container nested-menus-text">
       <clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapse">
         <ng-container *ngFor="let item of case.items">
-          <clr-vertical-nav-group *ngIf="item['children']">
+          <clr-vertical-nav-group
+            *ngIf="item['children']"
+            [clrVerticalNavGroupLabel]="'Toggle ' + item.label.toLowerCase() + ' nav group'"
+          >
             <cds-icon [attr.shape]="item.icon" *ngIf="item['icon']" clrVerticalNavIcon></cds-icon>
             {{item.label}}
 
@@ -82,7 +85,10 @@ <h4>With Nav Group Links</h4>
     <div class="content-container nested-menus-links">
       <clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapse">
         <ng-container *ngFor="let item of case.items">
-          <clr-vertical-nav-group *ngIf="item['children']">
+          <clr-vertical-nav-group
+            *ngIf="item['children']"
+            [clrVerticalNavGroupLabel]="'Toggle ' + item.label.toLowerCase() + ' nav group'"
+          >
             <a href="javascript://" clrVerticalNavLink>
               <cds-icon [attr.shape]="item.icon" *ngIf="item['icon']" clrVerticalNavIcon></cds-icon>
               {{item.label}}

diff --git a/.../vertical-nav/partially-nested-icon-menu/vertical-nav-partial-nested-icon-menus.demo.html b/.../vertical-nav/partially-nested-icon-menu/vertical-nav-partial-nested-icon-menus.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -27,7 +27,10 @@
     <div class="content-container partial-nested-icon-menu">
       <clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapse">
         <ng-container *ngFor="let item of case.items">
-          <clr-vertical-nav-group *ngIf="item['children']">
+          <clr-vertical-nav-group
+            *ngIf="item['children']"
+            [clrVerticalNavGroupLabel]="'Toggle ' + item.label.toLowerCase() + ' nav group'"
+          >
             <cds-icon [attr.shape]="item.icon" *ngIf="item['icon']" clrVerticalNavIcon></cds-icon>
             {{item.label}}
             <clr-vertical-nav-group-children *clrIfExpanded>

diff --git a/src/app/vertical-nav/partially-nested-menu/vertical-nav-partial-nested-menus.demo.html b/src/app/vertical-nav/partially-nested-menu/vertical-nav-partial-nested-menus.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -27,7 +27,10 @@
     <div class="content-container partial-nested-menu">
       <clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapse">
         <ng-container *ngFor="let item of case.items">
-          <clr-vertical-nav-group *ngIf="item['children']">
+          <clr-vertical-nav-group
+            *ngIf="item['children']"
+            [clrVerticalNavGroupLabel]="'Toggle ' + item.label.toLowerCase() + ' nav group'"
+          >
             <cds-icon [attr.shape]="item.icon" *ngIf="item['icon']" clrVerticalNavIcon></cds-icon>
             {{item.label}}
             <clr-vertical-nav-group-children *clrIfExpanded>

diff --git a/src/app/vertical-nav/routing/vertical-nav-routing.demo.html b/src/app/vertical-nav/routing/vertical-nav-routing.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -31,7 +31,7 @@
         [clrVerticalNavCollapsed]="navCollapsed"
         (clrVerticalNavCollapsedChange)="updateNavCollapsed($event)"
       >
-        <clr-vertical-nav-group routerLinkActive="active">
+        <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Beatles nav group'">
           <a
             [routerLink]="['./beatles']"
             routerLinkActive="active"
@@ -50,7 +50,7 @@
           </ng-template>
         </clr-vertical-nav-group>
 
-        <clr-vertical-nav-group routerLinkActive="active">
+        <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Killers nav group'">
           <a
             [routerLink]="['./killers']"
             routerLinkActive="active"
@@ -81,7 +81,7 @@
           [clrVerticalNavCollapsed]="navCollapsed"
           (clrVerticalNavCollapsedChange)="updateNavCollapsed($event)"
         >
-          <clr-vertical-nav-group routerLinkActive="active">
+          <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Beatles nav group'">
             <cds-icon shape="home" clrVerticalNavIcon></cds-icon>
             The Beatles
             <ng-template [clrIfExpanded]="groupExpand" (clrIfExpandedChange)="updateGroupExpand($event)">
@@ -95,7 +95,7 @@
             </ng-template>
           </clr-vertical-nav-group>
 
-          <clr-vertical-nav-group routerLinkActive="active">
+          <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Killers nav group'">
             <cds-icon shape="home" clrVerticalNavIcon></cds-icon>
             The Killers
             <ng-template clrIfExpanded>
@@ -120,7 +120,7 @@
           [clrVerticalNavCollapsed]="navCollapsed"
           (clrVerticalNavCollapsedChange)="updateNavCollapsed($event)"
         >
-          <clr-vertical-nav-group routerLinkActive="active">
+          <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Beatles nav group'">
             <a hidden aria-hidden="true" [routerLink]="['./beatles']"> </a>
             <cds-icon shape="home" clrVerticalNavIcon></cds-icon>
             The Beatles
@@ -135,7 +135,7 @@
             </ng-template>
           </clr-vertical-nav-group>
 
-          <clr-vertical-nav-group routerLinkActive="active">
+          <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Killers nav group'">
             <a hidden aria-hidden="true" [routerLink]="['./killers']"> </a>
             <cds-icon shape="home" clrVerticalNavIcon></cds-icon>
             The Killers

diff --git a/src/app/vertical-nav/static/vertical-nav-static.demo.html b/src/app/vertical-nav/static/vertical-nav-static.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -42,7 +42,11 @@
                   <cds-icon [attr.shape]="item.icon" *ngIf="item['icon']" class="nav-icon"></cds-icon>
                   <span class="nav-text">{{item.label}}</span>
                 </a>
-                <button class="nav-group-trigger" type="button">
+                <button
+                  class="nav-group-trigger"
+                  type="button"
+                  [attr.aria-label]="'Toggle ' + item.label.toLowerCase() + ' nav group'"
+                >
                   <cds-icon class="clr-nav-caret" shape="angle" [attr.direction]="'down'"></cds-icon>
                 </button>
               </div>

diff --git a/src/app/vertical-nav/unstructured-routes/unstructured-routes.html b/src/app/vertical-nav/unstructured-routes/unstructured-routes.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -31,7 +31,7 @@
         [clrVerticalNavCollapsed]="navCollapsed"
         (clrVerticalNavCollapsedChange)="updateNavCollapsed($event)"
       >
-        <clr-vertical-nav-group routerLinkActive="active">
+        <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Beatles nav group'">
           <a
             [routerLink]="['./beatles']"
             routerLinkActive="active"
@@ -50,7 +50,7 @@
           </ng-template>
         </clr-vertical-nav-group>
 
-        <clr-vertical-nav-group routerLinkActive="active">
+        <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Killers nav group'">
           <a
             [routerLink]="['./killers']"
             routerLinkActive="active"
@@ -85,6 +85,7 @@
           routerLinkActive="active"
           [clrVerticalNavGroupExpanded]="groupExpand"
           (clrVerticalNavGroupExpandedChange)="updateGroupExpand($event)"
+          [clrVerticalNavGroupLabel]="'Toggle The Beatles nav group'"
         >
           <a
             [routerLink]="['./beatles']"
@@ -102,7 +103,7 @@
           </clr-vertical-nav-group-children>
         </clr-vertical-nav-group>
 
-        <clr-vertical-nav-group routerLinkActive="active">
+        <clr-vertical-nav-group routerLinkActive="active" [clrVerticalNavGroupLabel]="'Toggle The Killers nav group'">
           <a
             [routerLink]="['./killers']"
             routerLinkActive="active"

diff --git a/src/app/vertical-nav/without-expanded-directive/without-expanded-directive.html b/src/app/vertical-nav/without-expanded-directive/without-expanded-directive.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+  ~ Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -35,6 +35,7 @@
           routerLinkActive="active"
           [clrVerticalNavGroupExpanded]="groupExpand"
           (clrVerticalNavGroupExpandedChange)="updateGroupExpand($event)"
+          [clrVerticalNavGroupLabel]="'Toggle The Beatles nav group'"
         >
           <a
             [routerLink]="['./beatles']"
@@ -85,6 +86,7 @@
           routerLinkActive="active"
           [clrVerticalNavGroupExpanded]="groupExpand"
           (clrVerticalNavGroupExpandedChange)="updateGroupExpand($event)"
+          [clrVerticalNavGroupLabel]="'Toggle The Beatles nav group'"
         >
           <cds-icon shape="home" clrVerticalNavIcon></cds-icon>
           The Beatles