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/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;