fix(nav): landmarks with talkback and voiceover

- Fix bugs relating to landmarks that were preventing talkback and voiceover from reading content and/or navigation areas
- Remove completed TODO's
- Add aria-live to indicate to screen reader that the content area will change.

Fixes #1, #2, #3, #4

src/app/app.component.css

@@ -0,0 +1,5 @@
+/* Color palette https://coolors.co/75f4f4-ff5b5e-ec4067-a01a7d-311847 */
+header {
+  background-color: #A01A7D;
+}
+

src/app/app.component.html

@@ -1,11 +1,16 @@
-<app-nav></app-nav>
-
+<!--
+  We use aria-live to indicate to the screen reader that this body of content changes.
+  On Android Talkback, the navigation is no longer focusable on subsequent changes without this aria tag. See #4
+-->
+<header aria-live="off">
+  <app-nav></app-nav>
+</header>
 <!--
   We use tabindex="-1" so that we can move keyboard focus to the element when routing to a new page.
   We use aria-label so that it will speak the title of the page to a screen reader user.
+  We use aria-live to indicate to the screen reader that this body of content changes.
  -->
-<main [attr.aria-label]="getTitle()" #main tabindex="-1">
+<main [attr.aria-label]="getTitle()" #main tabindex="-1" aria-live="off">
   <h1>{{getTitle()}}</h1>
   <router-outlet></router-outlet>
 </main>
-

src/app/components/nav/nav.component.css

@@ -1,8 +1,4 @@
 /* Color palette https://coolors.co/75f4f4-ff5b5e-ec4067-a01a7d-311847 */
-header {
-  background-color: #A01A7D;
-}
-
 .main-level,
 .nested {
   list-style: none;

src/app/components/nav/nav.component.html

@@ -1,58 +1,48 @@
-<!--
-    TODO(bogusred): Selected/active state
-    TODO(bogusred): Check this against the aria specs
-    -->
-<header>
+<button aria-label="Open navigation" class="menu-button"
+        (click)="isNavShown = !isNavShown"
+        [attr.aria-expanded]="isNavShown">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+  </svg>
+</button>
 
-  <!--
-     TODO(bogusred): ensure not focusable on desktop.
-  -->
-  <button aria-label="Open navigation" class="menu-button"
-          (click)="isNavShown = !isNavShown"
-          [attr.aria-expanded]="isNavShown">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-      <path d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
-    </svg>
-  </button>
 
+<span class="logo">Cat-alog</span>
 
-  <h1 class="logo">Cat-alog</h1>
-
-  <!-- Label site wide navigation with aria-label.
-  Don't include "Navigation" or it will read "navigation" twice. -->
-  <nav [attr.aria-expanded]="isNavShown" aria-label="Site">
-    <ul class="main-level">
-      <li aria-level="1">
-        <a routerLink="/home" class="nav-item"
-           [attr.aria-describedby]="getDescribedBy(home)" #home>Home</a>
-      </li>
-      <li aria-level="1">
-        <button
-          (click)="isCatalogShown = !isCatalogShown"
-          [attr.aria-expanded]="isCatalogShown"
-          aria-controls="catalog-nested-nav"
-          class="nav-item">Cats</button>
-        <ul class="nested" [hidden]="!isCatalogShown" id="catalog-nested-nav">
-          <li aria-level="2">
-            <a routerLink="/catalog/browse" class="nav-item"
-               [attr.aria-describedby]="getDescribedBy(browse)" #browse>Browse</a>
-          </li>
-          <li aria-level="2">
-            <a routerLink="/catalog/search" class="nav-item"
-               [attr.aria-describedby]="getDescribedBy(search)" #search>Search</a>
-          </li>
-          <li aria-level="2">
-            <a routerLink="/catalog/add" class="nav-item"
-               [attr.aria-describedby]="getDescribedBy(add)" #add>Add</a>
-          </li>
-        </ul>
-      </li>
-      <li aria-level="1">
-        <a routerLink="/about" class="nav-item"
-           [attr.aria-describedby]="getDescribedBy(about)" #about>About</a>
-      </li>
-    </ul>
-    <div id="current-page" style="display: none;">Current page</div>
-  </nav>
-</header>
+<!-- Label site wide navigation with aria-label.
+Don't include "Navigation" or it will read "navigation" twice. -->
+<nav [attr.aria-expanded]="isNavShown" aria-label="Site">
+  <ul class="main-level">
+    <li aria-level="1">
+      <a routerLink="/home" class="nav-item"
+         [attr.aria-describedby]="getDescribedBy(home)" #home>Home</a>
+    </li>
+    <li aria-level="1">
+      <button
+        (click)="isCatalogShown = !isCatalogShown"
+        [attr.aria-expanded]="isCatalogShown"
+        aria-controls="catalog-nested-nav"
+        class="nav-item">Cats</button>
+      <ul class="nested" [hidden]="!isCatalogShown" id="catalog-nested-nav">
+        <li aria-level="2">
+          <a routerLink="/catalog/browse" class="nav-item"
+             [attr.aria-describedby]="getDescribedBy(browse)" #browse>Browse</a>
+        </li>
+        <li aria-level="2">
+          <a routerLink="/catalog/search" class="nav-item"
+             [attr.aria-describedby]="getDescribedBy(search)" #search>Search</a>
+        </li>
+        <li aria-level="2">
+          <a routerLink="/catalog/add" class="nav-item"
+             [attr.aria-describedby]="getDescribedBy(add)" #add>Add</a>
+        </li>
+      </ul>
+    </li>
+    <li aria-level="1">
+      <a routerLink="/about" class="nav-item"
+         [attr.aria-describedby]="getDescribedBy(about)" #about>About</a>
+    </li>
+  </ul>
+  <div id="current-page" style="display: none;">Current page</div>
+</nav>