docs: improve accessibility of toh-pt5 example (#40632)

PR Close #40632

aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts

@@ -46,7 +46,7 @@ describe('Tutorial part 5', () => {
 
       appDashboardHref: navElts.get(0),
       appDashboard: element(by.css('app-root app-dashboard')),
-      topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
+      topHeroes: element.all(by.css('app-root app-dashboard > div a')),
 
       appHeroesHref: navElts.get(1),
       appHeroes: element(by.css('app-root app-heroes')),

aio/content/examples/toh-pt5/src/app/app.component.css

@@ -1,23 +1,21 @@
 /* AppComponent's private CSS styles */
 h1 {
-  font-size: 1.2em;
   margin-bottom: 0;
 }
 nav a {
-  padding: 5px 10px;
+  padding: 1rem;
   text-decoration: none;
   margin-top: 10px;
   display: inline-block;
-  background-color: #eee;
+  background-color: #e8e8e8;
+  color: #3d3d3d;
   border-radius: 4px;
 }
-nav a:visited, a:link {
+
-  color: #334953;
-}
 nav a:hover {
-  color: #039be5;
+  color: white;
-  background-color: #cfd8dc;
+  background-color: #42545C;
 }
 nav a.active {
-  color: #039be5;
+  background-color: black;
 }

aio/content/examples/toh-pt5/src/app/app.component.html

@@ -1,6 +1,6 @@
 <!-- #docplaster -->
 <!-- #docregion, heroes, outlet -->
-<h1>{{title}}</h1>
+<h1 id="main-content-header">{{title}}</h1>
 <!-- #enddocregion outlet -->
 <nav>
   <!-- #enddocregion heroes -->

aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html

@@ -1,8 +1,6 @@
-<h3>Top Heroes</h3>
+<h2>Top Heroes</h2>
-<div class="grid grid-pad">
+<div class="heroes-menu">
-  <a *ngFor="let hero of heroes" class="col-1-4">
+  <a *ngFor="let hero of heroes">
-    <div class="module hero">
+    {{hero.name}}
-      <h4>{{hero.name}}</h4>
-    </div>
   </a>
 </div>

aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css

@@ -1,61 +1,50 @@
 /* DashboardComponent's private CSS styles */
-[class*='col-'] {
+
-  float: left;
+h2 {
-  padding-right: 20px;
+  text-align: center;
-  padding-bottom: 20px;
 }
-[class*='col-']:last-of-type {
+
-  padding-right: 0;
+.heroes-menu {
+  padding: 0;
+  margin: auto;
+  max-width: 1000px;
+
+  /* flexbox */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: flex-start;
+  align-items: flex-start;
 }
+
 a {
-  text-decoration: none;
-}
-*, *::after, *::before {
-  box-sizing: border-box;
-}
-h3 {
-  text-align: center;
-  margin-bottom: 0;
-}
-h4 {
-  position: relative;
-}
-.grid {
-  margin: 0;
-}
-.col-1-4 {
-  width: 25%;
-}
-.module {
-  padding: 20px;
-  text-align: center;
-  color: #eee;
-  max-height: 120px;
-  min-width: 120px;
   background-color: #3f525c;
   border-radius: 2px;
+  padding: 1rem;
+  font-size: 1.2rem;
+  text-decoration: none;
+  display: inline-block;
+  color: #fff;
+  text-align: center;
+  width: 100%;
+  min-width: 70px;
+  margin: .5rem auto;
+  box-sizing: border-box;
+
+  /* flexbox */
+  order: 0;
+  flex: 0 1 auto;
+  align-self: auto;
 }
-.module:hover {
+
-  background-color: #eee;
+@media (min-width: 600px) {
-  cursor: pointer;
+  a {
-  color: #607d8b;
+    width: 18%;
-}
+    box-sizing: content-box;
-.grid-pad {
-  padding: 10px 0;
-}
-.grid-pad > [class*='col-']:last-of-type {
-  padding-right: 20px;
-}
-@media (max-width: 600px) {
-  .module {
-    font-size: 10px;
-    max-height: 75px; }
-}
-@media (max-width: 1024px) {
-  .grid {
-    margin: 0;
-  }
-  .module {
-    min-width: 60px;
   }
 }
+
+a:hover {
+  background-color: #000;
+}

aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html

@@ -1,11 +1,9 @@
-<h3>Top Heroes</h3>
+<h2>Top Heroes</h2>
-<div class="grid grid-pad">
+<div class="heroes-menu">
   <!-- #docregion click -->
-  <a *ngFor="let hero of heroes" class="col-1-4"
+  <a *ngFor="let hero of heroes"
-      routerLink="/detail/{{hero.id}}">
+    routerLink="/detail/{{hero.id}}">
-    <div class="module hero">
+    {{hero.name}}
-      <h4>{{hero.name}}</h4>
-    </div>
   </a>
-   <!-- #enddocregion click -->
+  <!-- #enddocregion click -->
 </div>

aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css

@@ -1,24 +1,18 @@
 /* HeroDetailComponent's private CSS styles */
 label {
-  display: inline-block;
+  color: #435960;
-  width: 3em;
-  margin: .5em 0;
-  color: #607D8B;
   font-weight: bold;
 }
 input {
-  height: 2em;
   font-size: 1em;
-  padding-left: .4em;
+  padding: .5rem;
 }
 button {
   margin-top: 20px;
-  font-family: Arial, sans-serif;
   background-color: #eee;
-  border: none;
+  padding: 1rem;
-  padding: 5px 10px;
   border-radius: 4px;
-  cursor: pointer;
+  font-size: 1rem;
 }
 button:hover {
   background-color: #cfd8dc;

aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html

@@ -2,9 +2,8 @@
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
-    <label>name:
+    <label for="hero-name">Hero name: </label>
-      <input [(ngModel)]="hero.name" placeholder="name"/>
+    <input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/>
-    </label>
   </div>
   <!-- #docregion back-button -->
   <button (click)="goBack()">go back</button>

aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css

@@ -8,29 +8,32 @@
 .heroes li {
   position: relative;
   cursor: pointer;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
 }
 
 .heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
   left: .1em;
 }
 
 .heroes a {
   color: #333;
   text-decoration: none;
-  position: relative;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
   display: block;
-  width: 250px;
+  width: 100%;
 }
 
 .heroes a:hover {
-  color:#607D8B;
+  color: #2c3a41;
+  background-color: #e6e6e6;
+}
+
+.heroes a:active {
+  background-color: #525252;
+  color: #fafafa;
 }
 
 .heroes .badge {

aio/content/examples/toh-pt5/src/app/messages/messages.component.css

@@ -1,20 +1,19 @@
 /* MessagesComponent's private CSS styles */
 h2 {
-  color: red;
+  color: #A80000;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
 }
 
-button.clear {
+.clear {
-  font-family: Arial, sans-serif;
   color: #333;
   background-color: #eee;
   margin-bottom: 12px;
-  border: none;
+  padding: 1rem;
-  padding: 5px 10px;
   border-radius: 4px;
-  cursor: pointer;
+  font-size: 1rem;
 }
-button:hover {
+.clear:hover {
-  background-color: #cfd8dc;
+  color: #fff;
+  background-color: #42545C;
 }

aio/content/examples/toh-pt5/src/app/messages/messages.component.html

@@ -2,7 +2,7 @@
 
   <h2>Messages</h2>
   <button class="clear"
-          (click)="messageService.clear()">clear</button>
+          (click)="messageService.clear()">Clear messages</button>
   <div *ngFor="let message of messageService.messages"> {{message}} </div>
 
 </div>

aio/content/navigation.json

@@ -567,7 +567,7 @@
             },
             {
               "url": "tutorial/toh-pt5",
-              "title": "5. Add In-app Navigation",
+              "title": "5. Add Navigation",
               "tooltip": "Part 5: Add the Angular router and navigate among the views."
             },
             {

aio/content/tutorial/toh-pt5.md

@@ -1,4 +1,4 @@
-# Add in-app navigation with routing
+# Add navigation with routing
 
 There are new requirements for the Tour of Heroes app:
 
@@ -9,11 +9,11 @@ There are new requirements for the Tour of Heroes app:
 
 <div class="alert is-helpful">
 
-  For the sample app that this page describes, see the <live-example></live-example>.
+  For the sample application that this page describes, see the <live-example></live-example>.
 
 </div>
 
-When you’re done, users will be able to navigate the app like this:
+When you’re done, users will be able to navigate the application like this:
 
 <div class="lightbox">
   <img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
@@ -48,7 +48,7 @@ Replace it with the following:
 <code-example path="toh-pt5/src/app/app-routing.module.1.ts" header="src/app/app-routing.module.ts (updated)">
 </code-example>
 
-First, the `app-routing.module.ts` file imports `RouterModule` and `Routes` so the app can have routing functionality. The next import, `HeroesComponent`, will give the Router somewhere to go once you configure the routes.
+First, the `app-routing.module.ts` file imports `RouterModule` and `Routes` so the application can have routing functionality. The next import, `HeroesComponent`, will give the Router somewhere to go once you configure the routes.
 
 Notice that the `CommonModule` references and `declarations` array are unnecessary, so are no
 longer part of `AppRoutingModule`. The following sections explain the rest of the `AppRoutingModule` in more detail.
@@ -105,7 +105,7 @@ Open the `AppComponent` template and replace the `<app-heroes>` element with a `
 <code-example path="toh-pt5/src/app/app.component.html" region="outlet" header="src/app/app.component.html (router-outlet)">
 </code-example>
 
-The `AppComponent` template no longer needs `<app-heroes>` because the app will only display the `HeroesComponent` when the user navigates to it.
+The `AppComponent` template no longer needs `<app-heroes>` because the application will only display the `HeroesComponent` when the user navigates to it.
 
 The `<router-outlet>` tells the router where to display routed views.
 
@@ -124,7 +124,7 @@ You should still be running with this CLI command.
   ng serve
 </code-example>
 
-The browser should refresh and display the app title but not the list of heroes.
+The browser should refresh and display the application title but not the list of heroes.
 
 Look at the browser's address bar.
 The URL ends in `/`.
@@ -153,7 +153,7 @@ The `routerLink` is the selector for the [`RouterLink` directive](/api/router/Ro
 that turns user clicks into router navigations.
 It's another of the public directives in the `RouterModule`.
 
-The browser refreshes and displays the app title and heroes link,
+The browser refreshes and displays the application title and heroes link,
 but not the heroes list.
 
 Click the link.
@@ -228,11 +228,11 @@ Add a route to the `routes` array that matches a path to the `DashboardComponent
 
 ### Add a default route
 
-When the app starts, the browser's address bar points to the web site's root.
+When the application starts, the browser's address bar points to the web site's root.
 That doesn't match any existing route so the router doesn't navigate anywhere.
 The space below the `<router-outlet>` is blank.
 
-To make the app navigate to the dashboard automatically, add the following
+To make the application navigate to the dashboard automatically, add the following
 route to the `routes` array.
 
 <code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts" region="redirect-route">
@@ -274,7 +274,7 @@ and liberate it from the `HeroesComponent`.
 ### Delete _hero details_ from `HeroesComponent`
 
 When the user clicks a hero item in the `HeroesComponent`,
-the app should navigate to the `HeroDetailComponent`,
+the application should navigate to the `HeroDetailComponent`,
 replacing the heroes list view with the hero detail view.
 The heroes list view should no longer show hero details as it does now.
 
@@ -409,7 +409,7 @@ Route parameters are always strings.
 The JavaScript (+) operator converts the string to a number,
 which is what a hero `id` should be.
 
-The browser refreshes and the app crashes with a compiler error.
+The browser refreshes and the application crashes with a compiler error.
 `HeroService` doesn't have a `getHero()` method.
 Add it now.
 
@@ -435,7 +435,7 @@ without having to change the `HeroDetailComponent` that calls it.
 
 #### Try it
 
-The browser refreshes and the app is working again.
+The browser refreshes and the application is working again.
 You can click a hero in the dashboard or in the heroes list and navigate to that hero's detail view.
 
 If you paste `localhost:4200/detail/11` in the browser address bar,
@@ -566,7 +566,7 @@ Here are the code files discussed on this page.
 * You added the Angular router to navigate among different components.
 * You turned the `AppComponent` into a navigation shell with `<a>` links and a `<router-outlet>`.
 * You configured the router in an `AppRoutingModule`
-* You defined simple routes, a redirect route, and a parameterized route.
+* You defined routes, a redirect route, and a parameterized route.
 * You used the `routerLink` directive in anchor elements.
 * You refactored a tightly-coupled master/detail view into a routed detail view.
 * You used router link parameters to navigate to the detail view of a user-selected hero.