fix(docs-infra): assign different aria labels to main aio navs (#45209)

dario-piotrowicz · dylhunn · commit 0fc4571b8564 · 2022-03-29T09:23:12.000-07:00
assign different aria labels to the primary nav and the one used for guides and docs, so that impaired users can more easily distinguish the two PR Close #45209
diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
@@ -50,8 +50,8 @@
 <mat-sidenav-container class="sidenav-container" [class.no-animations]="disableAnimations" [class.has-floating-toc]="hasFloatingToc">
 
   <mat-sidenav [ngClass]="{'collapsed': !dockSideNav}" #sidenav class="sidenav" [mode]="mode" [opened]="isOpened" (openedChange)="updateHostClasses()">
-    <aio-nav-menu *ngIf="!showTopMenu" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="dockSideNav"></aio-nav-menu>
-    <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="dockSideNav"></aio-nav-menu>
+    <aio-nav-menu *ngIf="!showTopMenu" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="dockSideNav" navLabel="primary"></aio-nav-menu>
+    <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="dockSideNav" navLabel="guides and docs"></aio-nav-menu>
 
     <div class="doc-version">
       <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
diff --git a/aio/src/app/layout/nav-menu/nav-menu.component.ts b/aio/src/app/layout/nav-menu/nav-menu.component.ts
@@ -4,12 +4,18 @@ import { CurrentNode, NavigationNode } from 'app/navigation/navigation.service';
 @Component({
   selector: 'aio-nav-menu',
   template: `
-  <aio-nav-item *ngFor="let node of filteredNodes" [node]="node" [selectedNodes]="currentNode?.nodes" [isWide]="isWide">
-  </aio-nav-item>`
+  <nav [attr.aria-label]="navLabel || null">
+    <aio-nav-item *ngFor="let node of filteredNodes"
+      [node]="node"
+      [selectedNodes]="currentNode?.nodes"
+      [isWide]="isWide">
+    </aio-nav-item>
+  </nav>`
 })
 export class NavMenuComponent {
   @Input() currentNode: CurrentNode | undefined;
   @Input() isWide = false;
   @Input() nodes: NavigationNode[];
+  @Input() navLabel: string;
   get filteredNodes() { return this.nodes ? this.nodes.filter(n => !n.hidden) : []; }
 }
