feat(aio): sidenav headers should be focusable buttons

Sidenav headers had been anchors w/o hrefs. These can’t take focus which makes you can’t navigate through them with keyboard. For a11y purposes, this PR turns them into buttons.

aio/e2e/app.e2e-spec.ts

@@ -5,8 +5,8 @@ describe('site App', function() {
   let page: SitePage;
 
   beforeEach(() => {
+    SitePage.setWindowWidth(1050);   // Make the window wide enough to show the SideNav side-by-side.
     page = new SitePage();
-    page.setWindowWidth(1050);   // Make the window wide enough to show the SideNav side-by-side.
     page.navigateTo();
   });
 

aio/e2e/app.po.ts

@@ -3,6 +3,7 @@ import { browser, element, by, promise, ElementFinder } from 'protractor';
 const githubRegex = /https:\/\/github.com\/angular\/angular\//;
 
 export class SitePage {
+
   links = element.all(by.css('md-toolbar a'));
   docsMenuLink = element(by.cssContainingText('aio-top-menu a', 'Docs'));
   docViewer = element(by.css('aio-doc-viewer'));
@@ -12,8 +13,14 @@ export class SitePage {
     .filter((a: ElementFinder) => a.getAttribute('href').then(href => githubRegex.test(href)))
     .first();
   gaReady: promise.Promise<any>;
+
+  static setWindowWidth(newWidth: number) {
+    const win = browser.driver.manage().window();
+    return win.getSize().then(oldSize => win.setSize(newWidth, oldSize.height));
+  }
+
   getNavItem(pattern: RegExp) {
-    return element.all(by.css('aio-nav-item a'))
+    return element.all(by.css('aio-nav-item .vertical-menu-item'))
                   .filter(element => element.getText().then(text => pattern.test(text)))
                   .first();
   }
@@ -35,11 +42,6 @@ export class SitePage {
     return browser.executeScript('return arguments[0].innerHTML;', element);
   }
 
-  setWindowWidth(newWidth: number) {
-    const win = browser.driver.manage().window();
-    return win.getSize().then(oldSize => win.setSize(newWidth, oldSize.height));
-  }
-
   /**
    * Replace the ambient Google Analytics tracker with homebrew spy
    * don't send commands to GA during e2e testing!

aio/src/app/layout/nav-item/nav-item.component.html

@@ -12,11 +12,11 @@
     <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></md-icon>
   </a>
 
-  <a *ngIf="node.url == null" [ngClass]="classes" title="{{node.tooltip}}"
+  <button *ngIf="node.url == null" type="button" [ngClass]="classes" title="{{node.tooltip}}"
     (click)="headerClicked()" class="vertical-menu-item heading">
     {{node.title}}
     <md-icon class="rotating-icon" svgIcon="keyboard_arrow_right"></md-icon>
-  </a>
+  </button>
 
   <div class="heading-children" [ngClass]="classes">
     <aio-nav-item *ngFor="let node of node.children" [level]="level + 1"

aio/src/styles/1-layouts/_sidenav.scss

@@ -66,7 +66,10 @@ md-sidenav-container div.mat-sidenav-content {
 
   &:hover {
     background-color: $lightgray;
+  }
 
+  &:focus {
+    color: $darkgray;
   }
 
   //icons _within_ nav
@@ -80,10 +83,24 @@ md-sidenav-container div.mat-sidenav-content {
 
 .vertical-menu-item.selected {
   color: $blue;
+
+  &:focus {
+    color: $blue-900;
+  }
+}
+
+button.vertical-menu-item {
+  border: none;
+  background-color: transparent;
+  padding: 8px 0 8px 20px;
+
+  &:focus {
+    color: $black;
+  }
 }
 
 .heading {
-  color: #444;
+  color: $blue-grey-700;
   cursor: pointer;
   position: relative;
   text-transform: uppercase;

aio/src/styles/_constants.scss

@@ -34,6 +34,7 @@ $blue-400: #42A5F5;
 $blue-500: #2196F3;
 $blue-600: #1E88E5;
 $blue-800: #1565C0;
+$blue-900: #0D47A1;
 $blue-grey-50: #ECEFF1;
 $blue-grey-100: #CFD8DC;
 $blue-grey-200: #B0BEC5;