docs: improve accessibility of tohpt4 (#40622)

PR Close #40622

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

@@ -0,0 +1,3 @@
+input {
+  padding: .5rem;
+}

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

@@ -2,8 +2,7 @@
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
-    <label>name:
-      <input [(ngModel)]="hero.name" placeholder="name"/>
-    </label>
+    <label for="hero-name">Hero name: </label>
+    <input id="hero-name" [(ngModel)]="hero.name" placeholder="name"/>
   </div>
 </div>

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

@@ -16,16 +16,24 @@
   border-radius: 4px;
 }
 .heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
+.heroes li:active {
+  background-color: #525252;
+  color: #fafafa;
+}
 .heroes li.selected {
-  background-color: #CFD8DC;
+  background-color: black;
   color: white;
 }
 .heroes li.selected:hover {
-  background-color: #BBD8DC;
+  background-color: #505050;
+  color: white;
+}
+.heroes li.selected:active {
+  background-color: black;
   color: white;
 }
 .heroes .badge {
@@ -42,3 +50,4 @@
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
+

aio/content/examples/toh-pt4/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 {
-  font-family: Arial, sans-serif;
+.clear {
   color: #333;
   background-color: #eee;
   margin-bottom: 12px;
-  border: none;
-  padding: 5px 10px;
+  padding: 1rem;
   border-radius: 4px;
-  cursor: pointer;
+  font-size: 1rem;
 }
-button:hover {
-  background-color: #cfd8dc;
+.clear:hover {
+  color: white;
+  background-color: #42545C;
 }

aio/content/examples/toh-pt4/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/tutorial/toh-pt4.md

@@ -7,7 +7,7 @@ It will also be easier to unit-test with a mock service.
 
 <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>
 
@@ -79,7 +79,7 @@ before Angular can _inject_ it into the `HeroesComponent` by registering a _prov
 
 To make sure that the `HeroService` can provide this service, register it
 with the _injector_, which is the object that is responsible for choosing
-and injecting the provider where the app requires it.
+and injecting the provider where the application requires it.
 
 By default, the Angular CLI command `ng generate service` registers a provider with the _root injector_ for your service by including provider metadata, that is `providedIn: 'root'` in the `@Injectable()` decorator.
 
@@ -90,7 +90,7 @@ By default, the Angular CLI command `ng generate service` registers a provider w
 ```
 
 When you provide the service at the root level, Angular creates a single, shared instance of `HeroService` and injects into any class that asks for it.
-Registering the provider in the `@Injectable` metadata also allows Angular to optimize an app by removing the service if it turns out not to be used after all.
+Registering the provider in the `@Injectable` metadata also allows Angular to optimize an application by removing the service if it turns out not to be used after all.
 
 <div class="alert is-helpful">
 
@@ -118,7 +118,7 @@ Import the `HeroService` instead.
 <code-example path="toh-pt4/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts (import HeroService)" region="hero-service-import">
 </code-example>
 
-Replace the definition of the `heroes` property with a simple declaration.
+Replace the definition of the `heroes` property with a declaration.
 
 <code-example path="toh-pt4/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="heroes">
 </code-example>
@@ -150,7 +150,7 @@ Create a method to retrieve the heroes from the service.
 
 While you could call `getHeroes()` in the constructor, that's not the best practice.
 
-Reserve the constructor for simple initialization such as wiring constructor parameters to properties.
+Reserve the constructor for minimal initialization such as wiring constructor parameters to properties.
 The constructor shouldn't _do anything_.
 It certainly shouldn't call a function that makes HTTP requests to a remote server as a _real_ data service would.
 
@@ -162,7 +162,7 @@ let Angular call `ngOnInit()` at an appropriate time _after_ constructing a `Her
 
 ### See it run
 
-After the browser refreshes, the app should run as before,
+After the browser refreshes, the application should run as before,
 showing a list of heroes and a hero detail view when you click on a hero name.
 
 ## Observable data
@@ -177,7 +177,7 @@ as if heroes could be fetched synchronously.
 
 This will not work in a real app.
 You're getting away with it now because the service currently returns _mock heroes_.
-But soon the app will fetch heroes from a remote server,
+But soon the application will fetch heroes from a remote server,
 which is an inherently _asynchronous_ operation.
 
 The `HeroService` must wait for the server to respond,
@@ -256,7 +256,7 @@ the `HeroService` requests heroes from the server.
 
 This section guides you through the following:
 
-* adding a `MessagesComponent` that displays app messages at the bottom of the screen
+* adding a `MessagesComponent` that displays application messages at the bottom of the screen
 * creating an injectable, app-wide `MessageService` for sending messages to be displayed
 * injecting `MessageService` into the `HeroService`
 * displaying a message when `HeroService` fetches heroes successfully
@@ -387,7 +387,7 @@ path="toh-pt4/src/app/heroes/heroes.component.ts">
 
 Refresh the browser to see the list of heroes, and scroll to the bottom to see the
 messages from the HeroService. Each time you click a hero, a new message appears to record
-the selection. Use the "clear" button to clear the message history.
+the selection. Use the **Clear messages** button to clear the message history.
 
 {@a final-code-review}