docs: improve accessibility of tohpt3 (#40617)

PR Close #40617

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

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

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

@@ -3,9 +3,8 @@
   <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-pt3/src/app/heroes/heroes.component.css

@@ -16,16 +16,20 @@
   border-radius: 4px;
 }
 .heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
 .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 {

aio/content/tutorial/toh-pt3.md

@@ -12,7 +12,7 @@ The `HeroDetailComponent` will present details of a selected hero.
 
 <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,13 +79,12 @@ Add a `hero` property, preceded by the `@Input()` decorator.
 
 That's the only change you should make to the `HeroDetailComponent` class.
 There are no more properties. There's no presentation logic.
-This component simply receives a hero object through its `hero` property and displays it.
+This component only receives a hero object through its `hero` property and displays it.
 
 ## Show the `HeroDetailComponent`
 
-The `HeroesComponent` is still a master/detail view.
-
-It used to display the hero details on its own, before you cut that portion of the template. Now it will delegate to the `HeroDetailComponent`.
+The `HeroesComponent` used to display the hero details on its own, before you removed that portion of the template.
+This section guides you through delegating logic to the `HeroDetailComponent`.
 
 The two components will have a parent/child relationship.
 The parent `HeroesComponent` will control the child `HeroDetailComponent`
@@ -121,7 +120,7 @@ The revised `HeroesComponent` template should look like this:
 <code-example path="toh-pt3/src/app/heroes/heroes.component.html"
   header="heroes.component.html"></code-example>
 
-The browser refreshes and the app starts working again as it did before.
+The browser refreshes and the application starts working again as it did before.
 
 ## What changed?
 
@@ -131,7 +130,7 @@ Now the `HeroDetailComponent` is presenting those details instead of the `Heroes
 
 Refactoring the original `HeroesComponent` into two components yields benefits, both now and in the future:
 
-1. You simplified the `HeroesComponent` by reducing its responsibilities.
+1. You reduced the `HeroesComponent` responsibilities.
 
 1. You can evolve the `HeroDetailComponent` into a rich hero editor
 without touching the parent `HeroesComponent`.