docs: improve accessibility of router example (#40914)

PR Close #40914

aio/content/examples/router/e2e/src/app.e2e-spec.ts

@@ -9,36 +9,36 @@ describe('Router', () => {
   beforeAll(() => browser.get(''));
 
   function getPageStruct() {
-    const hrefEles = element.all(by.css('app-root > nav a'));
-    const crisisDetail = element.all(by.css('app-root > div > app-crisis-center > app-crisis-list > app-crisis-detail > div')).first();
-    const heroDetail = element(by.css('app-root > div > app-hero-detail'));
+    const hrefEles = element.all(by.css('nav a'));
+    const crisisDetail = element.all(by.css('app-crisis-center > app-crisis-list > app-crisis-detail > div')).first();
+    const heroDetail = element(by.css('app-hero-detail'));
 
     return {
       hrefs: hrefEles,
-      activeHref: element(by.css('app-root > nav a.active')),
+      activeHref: element(by.css('nav a.active')),
 
       crisisHref: hrefEles.get(0),
-      crisisList: element.all(by.css('app-root > div > app-crisis-center > app-crisis-list li')),
+      crisisList: element.all(by.css('app-crisis-center app-crisis-list li')),
       crisisDetail,
       crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')),
 
       heroesHref: hrefEles.get(1),
-      heroesList: element.all(by.css('app-root > div > app-hero-list li')),
+      heroesList: element.all(by.css('app-hero-list li')),
       heroDetail,
       heroDetailTitle: heroDetail.element(by.xpath('*[2]')),
 
       adminHref: hrefEles.get(2),
-      adminPage: element(by.css('app-root > div > app-admin')),
-      adminPreloadList: element.all(by.css('app-root > div > app-admin > app-admin-dashboard > ul > li')),
+      adminPage: element(by.css('app-admin')),
+      adminPreloadList: element.all(by.css('app-admin > app-admin-dashboard > ul > li')),
 
       loginHref: hrefEles.get(3),
-      loginButton: element.all(by.css('app-root > div > app-login > p > button')),
+      loginButton: element.all(by.css('app-login > p > button')),
 
       contactHref: hrefEles.get(4),
       contactCancelButton: element.all(by.buttonText('Cancel')),
 
-      primaryOutlet: element.all(by.css('app-root > div > app-hero-list')),
-      secondaryOutlet: element.all(by.css('app-root > app-compose-message'))
+      primaryOutlet: element.all(by.css('app-hero-list')),
+      secondaryOutlet: element.all(by.css('app-compose-message'))
     };
   }
 

aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.html

@@ -1 +1 @@
-<p>Dashboard</p>
+<h3>Dashboard</h3>

aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.2.html

@@ -1,5 +1,5 @@
-<p>Dashboard</p>
+<h3>Dashboard</h3>
 
 <p>Session ID: {{ sessionId | async }}</p>
 <a id="anchor"></a>
-<p>Token: {{ token | async }}</p>
+<p>Token: {{ token | async }}</p>

aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html

@@ -1,4 +1,4 @@
-<p>Dashboard</p>
+<h3>Dashboard</h3>
 
 <p>Session ID: {{ sessionId | async }}</p>
 <a id="anchor"></a>
@@ -7,4 +7,4 @@
 Preloaded Modules
 <ul>
   <li *ngFor="let module of modules">{{ module }}</li>
-</ul>
+</ul>

aio/content/examples/router/src/app/admin/admin/admin.component.css

@@ -0,0 +1,22 @@
+nav a {
+  padding: 1rem;
+  font-size: 1rem;
+  background-color: #e8e8e8;
+  color: #3d3d3d;
+}
+
+@media (min-width: 400px) {
+  nav a {
+    font-size: 1.2rem;
+  }
+}
+
+nav a:hover {
+  color: white;
+  background-color: #42545C;
+ }
+
+nav a.active {
+  background-color: black;
+  color: white;
+}

aio/content/examples/router/src/app/admin/admin/admin.component.html

@@ -1,8 +1,8 @@
-<h3>ADMIN</h3>
+<h2>Admin</h2>
 <nav>
   <a routerLink="./" routerLinkActive="active"
     [routerLinkActiveOptions]="{ exact: true }">Dashboard</a>
   <a routerLink="./crises" routerLinkActive="active">Manage Crises</a>
   <a routerLink="./heroes" routerLinkActive="active">Manage Heroes</a>
 </nav>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

aio/content/examples/router/src/app/app.component.css

@@ -0,0 +1,3 @@
+nav a {
+  padding: 1rem;
+}

aio/content/examples/router/src/app/app.component.html

@@ -1,13 +1,15 @@
 <!-- #docregion -->
-<h1 class="title">Angular Router</h1>
-<nav>
-  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
-  <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
-  <a routerLink="/admin" routerLinkActive="active">Admin</a>
-  <a routerLink="/login" routerLinkActive="active">Login</a>
-  <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
-</nav>
-<div [@routeAnimation]="getAnimationData(routerOutlet)">
-  <router-outlet #routerOutlet="outlet"></router-outlet>
+<div class="wrapper">
+  <h1 class="title">Angular Router</h1>
+  <nav>
+    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+    <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
+    <a routerLink="/admin" routerLinkActive="active">Admin</a>
+    <a routerLink="/login" routerLinkActive="active">Login</a>
+    <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+  </nav>
+  <div [@routeAnimation]="getAnimationData(routerOutlet)">
+    <router-outlet #routerOutlet="outlet"></router-outlet>
+  </div>
+  <router-outlet name="popup"></router-outlet>
 </div>
-<router-outlet name="popup"></router-outlet>

aio/content/examples/router/src/app/auth/login/login.component.html

@@ -1,6 +1,6 @@
-<h2>LOGIN</h2>
+<h2>Login</h2>
 <p>{{message}}</p>
 <p>
   <button (click)="login()"  *ngIf="!authService.isLoggedIn">Login</button>
   <button (click)="logout()" *ngIf="authService.isLoggedIn">Logout</button>
-</p>
+</p>

aio/content/examples/router/src/app/compose-message/compose-message.component.css

@@ -1,3 +1,6 @@
-:host {
-  position: relative; bottom: 10%;
-}
+textarea {
+  width: 100%;
+  margin-top: 1rem;
+  font-size: 1.2rem;
+  box-sizing: border-box;
+}

aio/content/examples/router/src/app/compose-message/compose-message.component.html

@@ -5,10 +5,10 @@
 </div>
 <div>
   <div>
-    <label>Message: </label>
+    <label for="message">Enter your message: </label>
   </div>
   <div>
-    <textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
+    <textarea id="message" [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
   </div>
 </div>
 <p *ngIf="!sending">

aio/content/examples/router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.html

@@ -1 +1 @@
-<p>Welcome to the Crisis Center</p>
+<h3>Welcome to the Crisis Center</h3>

aio/content/examples/router/src/app/crisis-center/crisis-center/crisis-center.component.html

@@ -1,2 +1,2 @@
-<h2>CRISIS CENTER</h2>
-<router-outlet></router-outlet>
+<h2>Crisis Center</h2>
+<router-outlet></router-outlet>

aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.css

@@ -1,3 +1,8 @@
+h2 {
+  font-size: 1.5rem;
+}
+
 input {
-  width: 20em
-}
+  font-size: 1rem;
+  margin-top: 1rem;
+}

aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.html

@@ -1,13 +1,10 @@
 <div *ngIf="crisis">
-  <h3>"{{ editName }}"</h3>
+  <h3>{{ editName }}</h3>
+  <p>Id: {{ crisis.id }}</p>
+  <label for="crisis-name">Crisis name: </label>
+  <input type="text" id="crisis-name" [(ngModel)]="editName" placeholder="name"/>
   <div>
-    <label>Id: </label>{{ crisis.id }}</div>
-  <div>
-    <label>Name: </label>
-    <input [(ngModel)]="editName" placeholder="name"/>
-  </div>
-  <p>
     <button (click)="save()">Save</button>
     <button (click)="cancel()">Cancel</button>
-  </p>
-</div>
+  </div>
+</div>

aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css

@@ -3,76 +3,54 @@
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 24em;
 }
+
 .crises li {
   position: relative;
   cursor: pointer;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
 }
 
 .crises li:hover {
-  color: #607D8B;
-  background-color: #DDD;
   left: .1em;
 }
 
 .crises a {
-  color: #888;
+  color: black;
   text-decoration: none;
   display: block;
+  background-color: #EEE;
+  margin: .5em 0;
+  border-radius: 4px;
+  line-height: 2rem;
+}
+
+@media (min-width: 600px) {
+  .crises a {
+    font-size: 1.2rem;
+    padding: .5em 0;
+    line-height: 1.4rem;
+  }
 }
 
 .crises a:hover {
-  color:#607D8B;
+  color: #2c3a41;
+  background-color: #e6e6e6;
+  left: .1em;
+}
+
+.heroes .selected a {
+  background-color: #d6e6f7;
+}
+
+.heroes .selected a:hover {
+  background-color: #bdd7f5;
 }
 
 .crises .badge {
-  display: inline-block;
-  font-size: small;
+  padding: .5em .6em;
   color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
+  background-color: #435B60;
   min-width: 16px;
-  text-align: right;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
-
-button {
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: Arial, sans-serif;
-}
-
-button:hover {
-  background-color: #cfd8dc;
-}
-
-button.delete {
-  position: relative;
-  left: 194px;
-  top: -32px;
-  background-color: gray !important;
-  color: white;
-}
-
-.crises li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.crises li.selected:hover {
-  background-color: #BBD8DC;
-}

aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.html

@@ -1,6 +1,5 @@
 <ul class="crises">
-  <li *ngFor="let crisis of crises$ | async"
-    [class.selected]="crisis.id === selectedId">
+  <li *ngFor="let crisis of crises$ | async" [class.selected]="crisis.id === selectedId">
     <a [routerLink]="[crisis.id]">
       <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
     </a>

aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.css

@@ -0,0 +1,8 @@
+button {
+  margin-top: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: .5rem;
+}

aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.html

@@ -1,13 +1,8 @@
-<h2>HEROES</h2>
+<h2>Heroes</h2>
 <div *ngIf="hero$ | async as hero">
-  <h3>"{{ hero.name }}"</h3>
-  <div>
-    <label>Id: </label>{{ hero.id }}</div>
-  <div>
-    <label>Name: </label>
-    <input [(ngModel)]="hero.name" placeholder="name"/>
-  </div>
-  <p>
-    <button (click)="gotoHeroes(hero)">Back</button>
-  </p>
-</div>
+  <h3>{{ hero.name }}</h3>
+  <p>Id: {{ hero.id }}</p>
+  <label for="hero-name">Hero name: </label>
+  <input type="text" id="hero-name" [(ngModel)]="hero.name" placeholder="name"/>
+  <button (click)="gotoHeroes(hero)">Back</button>
+</div>

aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html

@@ -1,4 +1,4 @@
-<h2>HEROES</h2>
+<h2>Heroes</h2>
 <ul class="items">
   <li *ngFor="let hero of heroes$ | async">
     <!-- #docregion nav-to-detail -->

aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css

@@ -3,79 +3,53 @@
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
-  width: 15em;
+  width: 100%;
 }
 .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: #888;
+  color: black;
   text-decoration: none;
-  position: relative;
   display: block;
+  font-size: 1.2rem;
+  background-color: #eee;
+  margin: .5rem .5rem .5rem 0;
+  padding: .5rem 0;
+  border-radius: 4px;
 }
 
 .heroes a:hover {
-  color:#607D8B;
+  color: #2c3a41;
+  background-color: #e6e6e6;
 }
 
-.heroes .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  min-width: 16px;
-  text-align: right;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-
-button {
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: Arial, sans-serif;
-}
-
-button:hover {
-  background-color: #cfd8dc;
-}
-
-button.delete {
-  position: relative;
-  left: 194px;
-  top: -32px;
-  background-color: gray !important;
-  color: white;
+.heroes a:active {
+  background-color: #525252;
+  color: #fafafa;
 }
 
 /* #docregion selected */
-.heroes li.selected {
-  background-color: #CFD8DC;
-  color: white;
+.heroes .selected a {
+  background-color: #d6e6f7;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC;
+
+.heroes .selected a:hover {
+  background-color: #bdd7f5;
 }
 /* #enddocregion selected */
+
+.heroes .badge {
+  padding: .5em .6em;
+  color: white;
+  background-color: #435b60;
+  min-width: 16px;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}

aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.html

@@ -1,11 +1,10 @@
-<h2>HEROES</h2>
+<h2>Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="let hero of heroes$ | async"
-    [class.selected]="hero.id === selectedId">
+  <li *ngFor="let hero of heroes$ | async" [class.selected]="hero.id === selectedId">
     <a [routerLink]="['/hero', hero.id]">
       <span class="badge">{{ hero.id }}</span>{{ hero.name }}
     </a>
   </li>
 </ul>
 
-<button routerLink="/sidekicks">Go to sidekicks</button>
+<button routerLink="/sidekicks">Go to sidekicks</button>

aio/content/guide/router-tutorial-toh.md

@@ -56,7 +56,7 @@ The application renders with a row of navigation buttons and the *Heroes* view w
 
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/hero-list.png' alt="Hero List">
+  <img src='generated/images/guide/router/hero-list.gif' alt="Example application with a row of navigation buttons and a list of heroes">
 </div>
 
 
@@ -64,7 +64,7 @@ The application renders with a row of navigation buttons and the *Heroes* view w
 Select one hero and the application takes you to a hero editing screen.
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail">
+  <img src='generated/images/guide/router/hero-detail.png' alt="Detail view of hero with additional information, input, and back button">
 </div>
 
 
@@ -73,14 +73,14 @@ Alter the name.
 Click the "Back" button and the application returns to the heroes list which displays the changed hero name.
 Notice that the name change took effect immediately.
 
-Had you clicked the browser's back button instead of the application's "Back" button, the app would have returned you to the heroes list as well.
+Had you clicked the browser's back button instead of the application's "Back" button, the application would have returned you to the heroes list as well.
 Angular application navigation updates the browser history as normal web navigation does.
 
 Now click the *Crisis Center* link for a list of ongoing crises.
 
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/crisis-center-list.png' alt="Crisis Center List">
+  <img src='generated/images/guide/router/crisis-center-list.gif' alt="Crisis Center list of crises">
 </div>
 
 Select a crisis and the application takes you to a crisis editing screen.
@@ -91,7 +91,7 @@ Notice that the corresponding name in the crisis list does _not_ change.
 
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail">
+  <img src='generated/images/guide/router/crisis-center-detail.gif' alt="Crisis Center detail of a crisis with data, an input, and save and cancel buttons.">
 </div>
 
 
@@ -102,7 +102,7 @@ Click the browser back button or the "Heroes" link to activate a dialog.
 
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog">
+  <img src='generated/images/guide/router/confirm-dialog.png' alt="Alert that asks user to confirm discarding changes">
 </div>
 
 
@@ -123,7 +123,7 @@ Begin with a basic version of the application that navigates between two empty v
 
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/router-1-anim.gif' alt="App in action">
+  <img src='generated/images/guide/router/router-1-anim.gif' alt="Animated image of application with a Crisis Center button and a Heroes button. The pointer clicks each button to show a view for each.">
 </div>
 
 {@a import}
@@ -206,7 +206,7 @@ Registering the `RouterModule.forRoot()` in the `AppModule` `imports` array make
 The root `AppComponent` is the application shell. It has a title, a navigation bar with two links, and a router outlet where the router renders components.
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell">
+  <img src='generated/images/guide/router/shell-and-outlet.gif' alt="A nav, made of two navigation buttons, with the first button active and its associated view displayed">
 </div>
 
 The router outlet serves as a placeholder where the routed components are rendered.
@@ -529,10 +529,10 @@ The Routing Module has several characteristics:
 ### Integrate routing with your app
 
 The sample routing application does not include routing by default.
-When you use the [Angular CLI](cli) to create a project that does use routing, set the `--routing` option for the project or app, and for each NgModule.
+When you use the [Angular CLI](cli) to create a project that does use routing, set the `--routing` option for the project or application, and for each NgModule.
 When you create or initialize a new project (using the CLI [`ng new`](cli/new) command) or a new application (using the [`ng generate app`](cli/generate) command), specify the `--routing` option.
 This tells the CLI to include the `@angular/router` npm package and create a file named `app-routing.module.ts`.
-You can then use routing in any NgModule that you add to the project or app.
+You can then use routing in any NgModule that you add to the project or application.
 
 For example, the following command generates an NgModule that can use routing.
 
@@ -604,14 +604,6 @@ This milestone covers the following:
 
 This sample application recreates the heroes feature in the "Services" section of the [Tour of Heroes tutorial](tutorial/toh-pt4 "Tour of Heroes: Services"), and reuses much of the code from the <live-example name="toh-pt4" title="Tour of Heroes: Services example code"></live-example>.
 
-<!-- KW - this gif isn't ideal for accessibility. Would like to remove it.-->
-<!-- Here's how the user will experience this version of the app:
-
-
-<div class="lightbox">
-  <img src='generated/images/guide/router/router-2-anim.gif' alt="App in action">
-</div> -->
-
 A typical application has multiple feature areas, each dedicated to a particular business purpose with its own folder.
 
 This section shows you how refactor the application into different feature modules, import them into the main module and navigate among them.
@@ -1001,8 +993,8 @@ Since `ngOnInit()` is only called once per component instantiation, you can dete
 When subscribing to an observable in a component, you almost always unsubscribe when the component is destroyed.
 
 However, `ActivatedRoute` observables are among the exceptions because `ActivatedRoute` and its observables are insulated from the `Router` itself.
-The `Router` destroys a routed component when it is no longer needed. This means all the component's members will also be destroyed, 
-including the injected `ActivatedRoute` and the subscriptions to its `Observable` properties. 
+The `Router` destroys a routed component when it is no longer needed. This means all the component's members will also be destroyed,
+including the injected `ActivatedRoute` and the subscriptions to its `Observable` properties.
 
 The `Router` does not `complete` any `Observable` of the `ActivatedRoute` so any `finalize` or `complete` blocks will not run.
 If you need to handle something in a `finalize`, you will still need to unsubscribe in `ngOnDestroy`. You will also have to
@@ -1180,14 +1172,14 @@ Look for it within the repeated `<li>` tag as shown here:
 
 <code-example path="router/src/app/heroes/hero-list/hero-list.component.html" header="src/app/heroes/hero-list/hero-list.component.html"></code-example>
 
-Add some styles to apply when the list item is selected.
+Add some styles to apply when the hero is selected.
 
 <code-example path="router/src/app/heroes/hero-list/hero-list.component.css" region="selected" header="src/app/heroes/hero-list/hero-list.component.css"></code-example>
 
 When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/selected-hero.png' alt="Selected List">
+  <img src='generated/images/guide/router/selected-hero.png' alt="Selected hero in list has different background color">
 </div>
 
 The optional `foo` route parameter is harmless and the router continues to ignore it.
@@ -1552,13 +1544,7 @@ This section shows you how to organize the crisis center to conform to the follo
 * Each area root component has its own router outlet and child routes.
 * Feature area routes rarely (if ever) cross with routes of other features.
 
-If your application had many feature areas, the app component trees might look like this:
-
-
-<div class="lightbox">
-  <img src='generated/images/guide/router/component-tree.png' alt="Component Tree">
-</div>
-
+If your application had many feature areas, the component trees might consist of multiple components for those features, each with branches of other, related, components.
 
 
 {@a child-routing-component}
@@ -1776,23 +1762,26 @@ It displays a short form with a header, an input box for the message,
 and two buttons, "Send" and "Cancel".
 
 <div class="lightbox">
-  <img src='generated/images/guide/router/contact-popup.png' alt="Contact popup">
+  <img src='generated/images/guide/router/contact-form.png' alt="Contact textarea with send and cancel buttons">
 </div>
 
-Here's the component, its template and styles:
+Here's the component, its template, and styles:
 
 <code-tabs>
 
-  <code-pane header="src/app/compose-message/compose-message.component.css" path="router/src/app/compose-message/compose-message.component.css">
-
+  <code-pane
+      header="src/app/compose-message/compose-message.component.html"
+      path="router/src/app/compose-message/compose-message.component.html">
   </code-pane>
 
-  <code-pane header="src/app/compose-message/compose-message.component.html" path="router/src/app/compose-message/compose-message.component.html">
-
+  <code-pane
+      header="src/app/compose-message/compose-message.component.ts"
+      path="router/src/app/compose-message/compose-message.component.ts">
   </code-pane>
 
-  <code-pane header="src/app/compose-message/compose-message.component.ts" path="router/src/app/compose-message/compose-message.component.ts">
-
+  <code-pane
+      header="src/app/compose-message/compose-message.component.css"
+      path="router/src/app/compose-message/compose-message.component.css">
   </code-pane>
 
 </code-tabs>
@@ -1901,7 +1890,7 @@ Setting the popup `RouterOutlet` to `null` clears the outlet and removes the sec
 
 ## Milestone 5: Route guards
 
-At the moment, any user can navigate anywhere in the application any time, but sometimes you need to control access to different parts of your app for various reasons. Some of which may include the following:
+At the moment, any user can navigate anywhere in the application any time, but sometimes you need to control access to different parts of your application for various reasons. Some of which may include the following:
 
 * Perhaps the user is not authorized to navigate to the target component.
 * Maybe the user must login (authenticate) first.
@@ -2895,8 +2884,8 @@ to see the finished route configuration.
 
 {@a final-app}
 
-## Final app
+## Final application
 
-For the completed router app, see the <live-example name="router"></live-example> for the final source code.
+For the completed router application, see the <live-example name="router"></live-example> for the final source code.
 
 {@a link-parameters-array}

aio/content/guide/router.md

@@ -5,14 +5,14 @@ This topic describes how to implement many of the common tasks associated with a
 {@a basics}
 ## Generate an application with routing enabled
 
-The following command uses the Angular CLI to generate a basic Angular application with an app routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes.
+The following command uses the Angular CLI to generate a basic Angular application with an application routing module, called `AppRoutingModule`, which is an NgModule where you can configure your routes.
 The application name in the following example is `routing-app`.
 
 <code-example language="sh">
   ng new routing-app --routing
 </code-example>
 
-When generating a new app, the CLI prompts you to select CSS or a CSS preprocessor.
+When generating a new application, the CLI prompts you to select CSS or a CSS preprocessor.
 For this example, accept the default of `CSS`.
 
 ### Adding components for routing
@@ -79,7 +79,7 @@ The following is the default `AppModule` using the CLI with the `--routing` flag
   The Angular CLI performs this step automatically.
   The CLI also sets up a `Routes` array for your routes and configures the `imports` and `exports` arrays for `@NgModule()`.
 
-  <code-example path="router/src/app/app-routing.module.7.ts" header="CLI app routing module">
+  <code-example path="router/src/app/app-routing.module.7.ts" header="CLI application routing module">
 
   </code-example>
 
@@ -496,8 +496,8 @@ This option is only available if application URLs look like normal web URLs with
 ## `<base href>`
 
 The router uses the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries" title="HTML5 browser history push-state">history.pushState</a> for navigation.
-`pushState` allows you to customize in-app URL paths; for example, `localhost:4200/crisis-center`.
-The in-app URLs can be indistinguishable from server URLs.
+`pushState` allows you to customize in-application URL paths; for example, `localhost:4200/crisis-center`.
+The in-application URLs can be indistinguishable from server URLs.
 
 Modern HTML5 browsers were the first to support `pushState` which is why many people refer to these URLs as "HTML5 style" URLs.