From 06d3267824c9af1448874f215cbb4d88588b1d6a Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Mon, 25 Jan 2021 14:07:13 -0500
Subject: [PATCH] docs: improve accessibility for toh-pt1 example (#40560)

PR Close #40560
---
 .../toh-pt1/src/app/heroes/heroes.component.1.html       | 9 ++++-----
 .../examples/toh-pt1/src/app/heroes/heroes.component.css | 3 +++
 .../toh-pt1/src/app/heroes/heroes.component.html         | 5 ++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
index 2879760218..c97ee53681 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
@@ -1,17 +1,16 @@
 <!-- #docregion show-hero-1 -->
-{{hero}}
+<h2>{{hero}}</h2>
 <!-- #enddocregion show-hero-1 -->
 
 <!-- #docregion show-hero-2 -->
-<h2>{{hero.name}} Details</h2>
+<h3>{{hero.name}} Details</h3>
 <div><span>id: </span>{{hero.id}}</div>
 <div><span>name: </span>{{hero.name}}</div>
 <!-- #enddocregion show-hero-2 -->
 
 <!-- #docregion name-input -->
 <div>
-  <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name"/>
-  </label>
+  <label for='name'>Hero name: </label>
+  <input id='name' [(ngModel)]="hero.name" placeholder="name">
 </div>
 <!-- #enddocregion name-input -->
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
index e69de29bb2..73592eb3a6 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
@@ -0,0 +1,3 @@
+input {
+  padding: .5rem;
+}
diff --git a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
index 9a5af7e30c..39935996f5 100644
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
@@ -4,7 +4,6 @@
 <!-- #enddocregion pipe -->
 <div><span>id: </span>{{hero.id}}</div>
 <div>
-  <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name"/>
-  </label>
+  <label for='name'>Hero name: </label>
+  <input id='name' [(ngModel)]="hero.name" placeholder="name">
 </div>