From 0fc4571b8564ab22b4861637ea3779fbb4dcfd94 Mon Sep 17 00:00:00 2001
From: dario-piotrowicz <dario.piotrowicz@gmail.com>
Date: Wed, 16 Mar 2022 21:47:16 +0000
Subject: [PATCH] fix(docs-infra): assign different aria labels to main aio
 navs (#45209)

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
---
 aio/src/app/app.component.html                    |  4 ++--
 aio/src/app/layout/nav-menu/nav-menu.component.ts | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 82bdbb529eb..1e80f99142f 100644
--- 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
index b20c338a500..12a78c1b6df 100644
--- 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) : []; }
 }