fix(component-sidenav): apply aria-current to selected nav items & improve contrast

- use Roboto font instead of system-ui for `docs-nav-content-btn`s
- use a different background color for selected route, in addition to different text color
- increase opacity of `docs-nav-content-btn`s to meet contrast guidelines
- switch to `mat-nav-list` to get the benefits of better contrast and hover/focus styles
  - plus slightly more padding for touch interfaces

Fixes #694. Relates to #671.

Author: Splaktar

src/app/pages/component-sidenav/_component-sidenav-theme.scss

@@ -17,7 +17,8 @@
     }
 
     .docs-nav-content-btn {
-      color: rgba(mat-color($foreground, text), .5);
+      color: rgba(mat-color($foreground, text), 0.7);
+      font-family: Roboto, "Helvetica Neue", sans-serif;
 
       &:focus {
         // override the default background
@@ -37,6 +38,10 @@
       &:hover {
         color: mat-color($primary, if($is-dark-theme, 200, default));
       }
+
+      &.docs-component-viewer-sidenav-item-selected {
+        background: rgba(0, 0, 0, $nav-background-focus-opacity);
+      }
     }
   }
 

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

@@ -9,14 +9,14 @@
         {{category.name}}
         <mat-icon>{{panel.expanded ? 'keyboard_arrow_up' :  'keyboard_arrow_down'}}</mat-icon>
       </button>
-      <ul [@bodyExpansion]="panel.expanded ? 'expanded' : 'collapsed'" id="panel-{{category.id}}">
-        <li *ngFor="let component of category.items">
-          <a [routerLink]="'/' + (params | async)?.section+ '/' + component.id"
-            routerLinkActive="docs-component-viewer-sidenav-item-selected">
-            {{component.name}}
-          </a>
-        </li>
-      </ul>
+      <mat-nav-list dense [@bodyExpansion]="panel.expanded ? 'expanded' : 'collapsed'" id="panel-{{category.id}}">
+        <a mat-list-item *ngFor="let component of category.items"
+           [routerLink]="'/' + (params | async)?.section+ '/' + component.id"
+           routerLinkActive="docs-component-viewer-sidenav-item-selected"
+           [attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
+          {{component.name}}
+        </a>
+      </mat-nav-list>
       <hr *ngIf="!last" />
     </nav>
   </div>

src/app/pages/component-sidenav/component-sidenav.ts

@@ -37,6 +37,7 @@ import {HttpClientModule} from '@angular/common/http';
 import {StackBlitzButtonModule} from '../../shared/stack-blitz';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {ExampleModule} from '@angular/components-examples';
+import {MatListModule} from '@angular/material/list';
 
 const SMALL_WIDTH_BREAKPOINT = 720;
 
@@ -81,6 +82,7 @@ export class ComponentSidenav implements OnInit {
 export class ComponentNav implements OnInit, OnDestroy {
   @Input() params: Observable<Params>;
   expansions: {[key: string]: boolean} = {};
+  currentItemId: string;
   private _onDestroy = new Subject<void>();
 
   constructor(public docItems: DocumentationItems,
@@ -91,7 +93,7 @@ export class ComponentNav implements OnInit, OnDestroy {
       startWith(null),
       switchMap(() => this.params),
       takeUntil(this._onDestroy)
-    ).subscribe(p => this.setExpansions(p));
+    ).subscribe(params => this.setExpansions(params));
   }
 
   ngOnDestroy() {
@@ -103,14 +105,12 @@ export class ComponentNav implements OnInit, OnDestroy {
   setExpansions(params: Params) {
     const categories = this.docItems.getCategories(params.section);
     for (const category of (categories || [])) {
-      if (this.expansions[category.id]) {
-        continue;
-      }
 
       let match = false;
       for (const item of category.items) {
         if (this._router.url.indexOf(item.id) > -1) {
           match = true;
+          this.currentItemId = item.id;
           break;
         }
       }
@@ -167,6 +167,9 @@ const routes: Routes = [ {
 
 @NgModule({
   imports: [
+    MatSidenavModule,
+    MatListModule,
+    RouterModule,
     CommonModule,
     ComponentCategoryListModule,
     ComponentHeaderModule,