fix(a11y): open operator page menu when main nav clicked

Author: btroncone

src/app/app.component.html

@@ -4,9 +4,15 @@
   </header>
   <main>
     <mat-sidenav-container>
-      <mat-sidenav #sidenav role="navigation">
+      <mat-sidenav #sidenav
+                   role="navigation">
         <mat-nav-list (click)="sidenav.toggle()">
-          <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
+          <a *ngFor="let menu of menus"
+             mat-list-item
+             routerLinkActive="active"
+             [routerLinkActiveOptions]="menu.options"
+             [routerLink]="menu.link"
+             (click)="shouldOpenChildMenu(menu.title)">
             {{menu.title}}
           </a>
         </mat-nav-list>

src/app/app.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/router';
 import { filter, map, mergeMap } from 'rxjs/operators';
 import { SeoService, SeoData } from './core/services/seo.service';
+import { OperatorMenuService } from './core/services/operator-menu.service';
 
 interface Menu {
   title: string;
@@ -46,7 +47,8 @@ export class AppComponent implements OnInit {
   constructor(
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
-    private _seo: SeoService
+    private _seo: SeoService,
+    private _operatorMenuService: OperatorMenuService
   ) {}
 
   ngOnInit() {
@@ -66,4 +68,11 @@ export class AppComponent implements OnInit {
       )
       .subscribe((data: SeoData) => this._seo.setHeaders(data));
   }
+
+  shouldOpenChildMenu(title: string) {
+    // for accessibility we need to ensure child menu is open when clicked
+    if (title === 'Operators') {
+      this._operatorMenuService.openOperatorMenu();
+    }
+  }
 }

src/app/core/core.module.ts

@@ -5,6 +5,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { CopierService } from './services/copier.service';
 import { SeoService } from './services/seo.service';
+import { OperatorMenuService } from './services/operator-menu.service';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
 import { MaterialModule } from '../material/material.module';
 
@@ -17,7 +18,7 @@ export class CoreModule {
   static forRoot() {
     return {
       ngModule: CoreModule,
-      providers: [CopierService, SeoService]
+      providers: [CopierService, SeoService, OperatorMenuService]
     };
   }
 }

src/app/core/services/operator-menu.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class OperatorMenuService {
+  private _operatorMenuStatus = new Subject<boolean>();
+
+  openOperatorMenu() {
+    this._operatorMenuStatus.next(true);
+  }
+
+  closeOperatorMenu() {
+    this._operatorMenuStatus.next(false);
+  }
+
+  menuStatus() {
+    return this._operatorMenuStatus.asObservable();
+  }
+}

src/app/operators/operators.component.html

@@ -1,31 +1,29 @@
-<mat-sidenav-container
-  class="operator-container">
-  <mat-sidenav
-    [mode]="sidenavMode"
-    [opened]="!smallScreen"
-    [fixedTopGap]="operatorMenuGap"
-    [fixedInViewport]="true"
-    class="operator-list-sidenav"
-    #operatorSidenav>
-    <mat-nav-list *ngFor="let category of categories" class="operator-list">
-      <h3 mat-subheader class="category-subheader">{{ category }}</h3>
+<mat-sidenav-container class="operator-container">
+  <mat-sidenav [mode]="sidenavMode"
+               [opened]="!smallScreen || (operatorMenuStatus$ | async)"
+               [fixedTopGap]="operatorMenuGap"
+               [fixedInViewport]="true"
+               class="operator-list-sidenav"
+               #operatorSidenav>
+    <mat-nav-list *ngFor="let category of categories"
+                  class="operator-list">
+      <h3 mat-subheader
+          class="category-subheader">{{ category }}</h3>
       <a mat-list-item
-        *ngFor="let operator of groupedOperators[category]"
-        [routerLink]="['/operators', operator.name]"
-        routerLinkActive="active">
+         *ngFor="let operator of groupedOperators[category]"
+         [routerLink]="['/operators', operator.name]"
+         routerLinkActive="active">
         {{ operator.name }}
       </a>
     </mat-nav-list>
   </mat-sidenav>
   <router-outlet></router-outlet>
 </mat-sidenav-container>
-<button
-  *ngIf="smallScreen"
-  mat-mini-fab
-  color="primary"
-  class="sidenav-toggle"
-  [@growInOut]="'in'"
-  (click)="operatorSidenav.toggle()">
+<button *ngIf="smallScreen"
+        mat-mini-fab
+        color="primary"
+        class="sidenav-toggle"
+        [@growInOut]="'in'"
+        (click)="operatorSidenav.toggle()">
   <mat-icon>view_list</mat-icon>
 </button>
-

src/app/operators/operators.component.ts

@@ -3,7 +3,9 @@ import {
   Inject,
   InjectionToken,
   OnInit,
-  ChangeDetectionStrategy
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ViewChild
 } from '@angular/core';
 import {
   trigger,
@@ -14,9 +16,12 @@ import {
 } from '@angular/animations';
 import { Router, ActivatedRoute } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { MatSidenav } from '@angular/material';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
+import { filter } from 'rxjs/operators';
 import { OperatorDoc } from '../../operator-docs/operator.model';
+import { OperatorMenuService } from '../core/services/operator-menu.service';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
@@ -53,12 +58,14 @@ interface OperatorDocMap {
     ])
   ]
 })
-export class OperatorsComponent implements OnInit {
+export class OperatorsComponent implements OnInit, AfterContentInit {
+  @ViewChild(MatSidenav) _sidenav: MatSidenav;
   public groupedOperators: OperatorDocMap;
   public categories: string[];
 
   constructor(
     private _breakpointObserver: BreakpointObserver,
+    private _operatorMenuService: OperatorMenuService,
     @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
   ) {}
 
@@ -67,6 +74,13 @@ export class OperatorsComponent implements OnInit {
     this.categories = Object.keys(this.groupedOperators);
   }
 
+  ngAfterContentInit() {
+    this._operatorMenuService
+      .menuStatus()
+      .pipe(filter(s => !!s))
+      .subscribe(_ => this._sidenav.open());
+  }
+
   get extraSmallScreen() {
     return this._breakpointObserver.isMatched('(max-width: 601px)');
   }