fix(component-nav): apply aria-label to navs

- so that they can be differentiated by screen readers

Relates to #671.

Author: Splaktar

src/app/pages/component-sidenav/component-nav.html

@@ -1,6 +1,6 @@
 <div class="docs-component-viewer-nav">
   <div class="docs-component-viewer-nav-content">
-    <nav *ngFor="let category of docItems.getCategories((params | async)?.section); let last = last;">
+    <div *ngFor="let category of docItems.getCategories((params | async)?.section); let last = last;">
       <button cdkAccordionItem #panel="cdkAccordionItem" (click)="panel.toggle()" expanded="true"
               class="docs-nav-content-btn"
               [attr.aria-label]="category.name + ', section toggle'"
@@ -9,7 +9,8 @@
         {{category.name}}
         <mat-icon>{{panel.expanded ? 'keyboard_arrow_up' :  'keyboard_arrow_down'}}</mat-icon>
       </button>
-      <mat-nav-list dense [@bodyExpansion]="panel.expanded ? 'expanded' : 'collapsed'" id="panel-{{category.id}}">
+      <mat-nav-list dense [@bodyExpansion]="panel.expanded ? 'expanded' : 'collapsed'"
+                    id="panel-{{category.id}}" [attr.aria-label]="category.name">
         <a mat-list-item *ngFor="let component of category.items"
            [routerLink]="'/' + (params | async)?.section+ '/' + component.id"
            routerLinkActive="docs-component-viewer-sidenav-item-selected"
@@ -18,6 +19,6 @@
         </a>
       </mat-nav-list>
       <hr *ngIf="!last" />
-    </nav>
+    </div>
   </div>
 </div>

src/app/pages/component-viewer/component-viewer.html

@@ -1,5 +1,5 @@
 <div class="docs-component-viewer">
-  <nav mat-tab-nav-bar class="docs-component-viewer-tabbed-content">
+  <nav mat-tab-nav-bar class="docs-component-viewer-tabbed-content" aria-label="Section">
     <a mat-tab-link class="docs-component-viewer-section-tab"
         *ngFor="let section of sections"
         [routerLink]="section.toLowerCase()"

src/app/shared/navbar/navbar.html

@@ -1,5 +1,5 @@
 <!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
-<nav class="docs-navbar-header"
+<nav class="docs-navbar-header" aria-label="Top Toolbar"
      [class.is-next-version]="isNextVersion">
   <a mat-button class="docs-button" routerLink="/" aria-label="Angular Material">
     <img class="docs-angular-logo"
@@ -28,7 +28,7 @@
          alt="angular">
   </a>
 </nav>
-<nav class="docs-navbar docs-navbar-show-small">
+<nav class="docs-navbar docs-navbar-show-small" aria-label="Section Nav Bar">
   <a mat-button class="docs-navbar-link"
     *ngFor="let key of sectionKeys"
     [routerLink]="key">{{sections[key].name}}</a>

src/app/shared/table-of-contents/table-of-contents.html

@@ -1,6 +1,6 @@
 <div *ngFor="let linkSection of _linkSections" class="docs-toc-container">
   <div class="docs-toc-heading">{{linkSection.name}}</div>
-  <nav>
+  <nav aria-label="Section Table of Contents">
     <a [href]="_rootUrl + '#' + link.id"
       *ngFor="let link of linkSection.links; let i = index"
       class="docs-level-{{link.type}} docs-link"