From 1f7921be335fdafd1fcb68f6dcdc635ed629772e Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Tue, 26 Jan 2021 13:15:13 -0500
Subject: [PATCH] docs: improve accessibility of tohpt3 (#40617)

PR Close #40617
---
 .../src/app/hero-detail/hero-detail.component.css   |  3 +++
 .../src/app/hero-detail/hero-detail.component.html  |  5 ++---
 .../toh-pt3/src/app/heroes/heroes.component.css     | 12 ++++++++----
 aio/content/tutorial/toh-pt3.md                     | 13 ++++++-------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
index e69de29bb2..73592eb3a6 100644
--- a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css
@@ -0,0 +1,3 @@
+input {
+  padding: .5rem;
+}
diff --git a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
index a495e1a84b..86403ce04e 100644
--- a/aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html
+++ b/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>
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
index 9759a4211b..9ace14f826 100644
--- a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
+++ b/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 {
diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md
index f7dcaac523..00ccccb0ab 100644
--- a/aio/content/tutorial/toh-pt3.md
+++ b/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`.