docs: improve accessibility for toh-pt1 example (#40560)

PR Close #40560

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 -->

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

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

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>