From 5498a3578972cd00a58322f8fd3698d33bef87cd Mon Sep 17 00:00:00 2001
From: Dario Piotrowicz <dario.piotrowicz@gmail.com>
Date: Thu, 23 Dec 2021 11:28:40 +0100
Subject: [PATCH] refactor(docs-infra): fix template eslint issues in aio
 examples (#44557)

the aio examples have various eslint issues regarding template rules, those
are currently turned off and TODO comments have been added to them in the
examples eslintrc, fix such issues and remove the respective TODO comments

this also includes examples refactoring to use buttons for better accessibility,
this change tries to make the smallest amound of changes to the examples' behaviors
and designs/UI

PR Close #44557
---
 aio/content/examples/.eslintrc.json           |  8 +--
 .../src/app/app.component.html                |  2 +-
 .../src/app/movie-list.component.html         |  1 +
 .../src/app/hero-list-auto.component.html     | 10 +--
 .../app/hero-list-enter-leave.component.ts    |  8 +--
 .../src/app/hero-list-groups.component.ts     | 13 ++--
 .../src/app/hero-list-page.component.css      | 65 ++++++++++++++-----
 .../src/app/hero-list-page.component.html     |  2 +-
 .../src/app/hero-list.component.1.html        |  5 +-
 .../src/app/hero-list.component.html          |  6 +-
 .../architecture/src/assets/architecture.css  | 14 +++-
 .../src/app/app.component.css                 | 61 +++++++++++------
 .../src/app/app.component.html                | 16 +++--
 .../event-binding/src/app/app.component.html  |  5 ++
 .../item-detail/item-detail.component.html    |  2 +-
 .../e2e/src/app.e2e-spec.ts                   |  2 +-
 .../src/app/hero-tax-return.component.html    |  4 +-
 .../src/app/heroes-list.component.ts          | 12 +++-
 .../http/src/app/heroes/heroes.component.css  | 23 ++++---
 .../http/src/app/heroes/heroes.component.html |  4 +-
 .../i18n/doc-files/app.component.html         |  4 +-
 .../examples/i18n/src/app/app.component.html  |  2 +-
 .../interpolation/src/app/app.component.html  |  4 +-
 .../src/app/app.component.html                | 24 +++----
 .../src/app/do-check-parent.component.html    |  2 +-
 .../observables-in-angular/src/main.ts        |  2 +-
 .../examples/pipes/src/app/app.component.html | 36 ++++------
 .../src/app/app.component.html                |  6 +-
 .../reactive-forms/e2e/src/app.e2e-spec.ts    | 10 +--
 .../reactive-forms/src/app/app.component.css  |  3 +-
 .../reactive-forms/src/app/app.component.html |  4 +-
 .../admin-dashboard.component.2.html          |  5 --
 .../admin-dashboard.component.html            |  2 +-
 .../src/app/app.component.ts                  |  6 +-
 .../src/05-04/app/heroes/heroes.component.css | 48 ++++++++++++--
 .../05-04/app/heroes/heroes.component.html    |  7 +-
 .../src/app/app.component.html                | 32 +++++----
 .../src/app/hero-detail.component.ts          |  4 +-
 .../src/app/sizer.component.ts                |  2 +-
 .../dashboard/dashboard-hero.component.css    |  1 +
 .../app/dashboard/dashboard-hero.component.ts |  4 +-
 .../examples/testing/src/app/demo/demo.ts     |  2 +-
 .../src/app/hero/hero-detail.component.html   |  2 +-
 .../src/app/hero/hero-list.component.css      | 61 ++++++++++-------
 .../src/app/hero/hero-list.component.html     |  9 +--
 .../src/app/hero/hero-list.component.spec.ts  |  8 +--
 .../examples/toh-pt2/e2e/src/app.e2e-spec.ts  | 10 +--
 .../src/app/heroes/heroes.component.1.html    |  3 +-
 .../src/app/heroes/heroes.component.css       | 39 +++++++----
 .../src/app/heroes/heroes.component.html      | 11 ++--
 .../examples/toh-pt3/e2e/src/app.e2e-spec.ts  | 10 +--
 .../src/app/heroes/heroes.component.css       | 38 ++++++++---
 .../src/app/heroes/heroes.component.html      |  9 +--
 .../examples/toh-pt4/e2e/src/app.e2e-spec.ts  |  8 +--
 .../src/app/heroes/heroes.component.css       | 36 ++++++----
 .../src/app/heroes/heroes.component.html      |  9 +--
 .../src/app/heroes/heroes.component.css       |  2 +-
 .../src/app/heroes/heroes.component.css       |  3 +-
 .../two-way-binding/e2e/src/app.e2e-spec.ts   |  8 +--
 .../src/app/sizer/sizer.component.html        |  2 +-
 .../universal/e2e/src/app.e2e-spec.ts         |  5 +-
 .../src/app/heroes/heroes.component.css       |  9 ++-
 .../app/downgrade-io/hero-detail.component.ts |  2 +-
 .../downgrade-static/hero-detail.component.ts |  2 +-
 .../phone-detail/phone-detail.template.html   |  4 +-
 .../phone-detail/phone-detail.template.html   |  9 +--
 .../phone-detail/phone-detail.template.html   |  9 +--
 aio/content/guide/architecture-components.md  |  6 +-
 aio/content/guide/binding-syntax.md           |  2 +-
 aio/content/tutorial/toh-pt2.md               | 19 ++++--
 70 files changed, 501 insertions(+), 307 deletions(-)
 delete mode 100644 aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.2.html

diff --git a/aio/content/examples/.eslintrc.json b/aio/content/examples/.eslintrc.json
index b1b25254dc0..e77999f90ac 100644
--- a/aio/content/examples/.eslintrc.json
+++ b/aio/content/examples/.eslintrc.json
@@ -13,12 +13,12 @@
         "plugin:@angular-eslint/template/recommended"
       ],
       "rules": {
-        "@angular-eslint/template/accessibility-alt-text": "off", // TODO: Fix the code violating this rule and enable it.
-        "@angular-eslint/template/accessibility-elements-content": "off", // TODO: Fix the code violating this rule and enable it.
-        "@angular-eslint/template/accessibility-label-has-associated-control": "off", // TODO: Fix the code violating this rule and enable it.
+        "@angular-eslint/template/accessibility-alt-text": "error",
+        "@angular-eslint/template/accessibility-elements-content": "error",
+        "@angular-eslint/template/accessibility-label-has-associated-control": "error",
         "@angular-eslint/template/accessibility-table-scope": "error",
         "@angular-eslint/template/accessibility-valid-aria": "error",
-        "@angular-eslint/template/click-events-have-key-events": "off", // TODO: Fix the code violating this rule and enable it.
+        "@angular-eslint/template/click-events-have-key-events": "error",
         "@angular-eslint/template/eqeqeq": "off",
         "@angular-eslint/template/mouse-events-have-key-events": "error",
         "@angular-eslint/template/no-autofocus": "error",
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.component.html b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
index 82eaf9339b2..25f5c72ecf2 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/app.component.html
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
@@ -51,7 +51,7 @@
 <p></p>
 <div *ngIf="showImage">
   <!-- #docregion src -->
-  <img [src]="movie.imageurl">
+  <img [src]="movie.imageurl" [alt]="movie.title">
   <!-- #enddocregion src -->
 </div>
 
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
index e1ee6d62c5a..e7d736eba0c 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
@@ -61,6 +61,7 @@
                 [style.height.px]="50"
                 [style.margin.px]="2"
                 [src]="movie.imageurl"
+                [alt]="movie.title"
                 [title]="movie.title">
         </td>
         <td>{{movie.title}}</td>
diff --git a/aio/content/examples/animations/src/app/hero-list-auto.component.html b/aio/content/examples/animations/src/app/hero-list-auto.component.html
index bb99794f0c0..72624e54858 100644
--- a/aio/content/examples/animations/src/app/hero-list-auto.component.html
+++ b/aio/content/examples/animations/src/app/hero-list-auto.component.html
@@ -1,9 +1,9 @@
 <ul class="heroes">
   <li *ngFor="let hero of heroes"
-      [@shrinkOut]="'in'" (click)="removeHero(hero.id)">
-      <div class="inner">
+      [@shrinkOut]="'in'">
+      <button class="inner" (click)="removeHero(hero.id)">
         <span class="badge">{{ hero.id }}</span>
-        <span>{{ hero.name }}</span>
-      </div>
+        <span class="name">{{ hero.name }}</span>
+      </button>
   </li>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
index 769bb6db303..a867c5edb90 100644
--- a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
@@ -19,11 +19,11 @@ import { Hero } from './hero';
   template: `
     <ul class="heroes">
       <li *ngFor="let hero of heroes"
-          [@flyInOut]="'in'" (click)="removeHero(hero.id)">
-          <div class="inner">
+          [@flyInOut]="'in'">
+          <button class="inner" (click)="removeHero(hero.id)">
             <span class="badge">{{ hero.id }}</span>
-            <span>{{ hero.name }}</span>
-          </div>
+            <span class="name">{{ hero.name }}</span>
+          </button>
       </li>
     </ul>
   `,
diff --git a/aio/content/examples/animations/src/app/hero-list-groups.component.ts b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
index a07cd813208..f08e2fa7da5 100644
--- a/aio/content/examples/animations/src/app/hero-list-groups.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
@@ -19,12 +19,11 @@ import { Hero } from './hero';
   selector: 'app-hero-list-groups',
   template: `
     <ul class="heroes">
-      <li *ngFor="let hero of heroes"
-          [@flyInOut]="'in'" (click)="removeHero(hero.id)">
-          <div class="inner">
+      <li *ngFor="let hero of heroes" [@flyInOut]="'in'">
+          <button class="inner" (click)="removeHero(hero.id)">
             <span class="badge">{{ hero.id }}</span>
-            <span>{{ hero.name }}</span>
-          </div>
+            <span class="name">{{ hero.name }}</span>
+          </button>
       </li>
     </ul>
   `,
@@ -33,7 +32,7 @@ import { Hero } from './hero';
   animations: [
     trigger('flyInOut', [
       state('in', style({
-        width: 120,
+        width: '*',
         transform: 'translateX(0)', opacity: 1
       })),
       transition(':enter', [
@@ -41,7 +40,7 @@ import { Hero } from './hero';
         group([
           animate('0.3s 0.1s ease', style({
             transform: 'translateX(0)',
-            width: 120
+            width: '*'
           })),
           animate('0.3s ease', style({
             opacity: 1
diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.css b/aio/content/examples/animations/src/app/hero-list-page.component.css
index 3a3e603cbce..d06d58bf148 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.css
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.css
@@ -1,25 +1,56 @@
 .heroes {
+  margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
+  width: 15em;
 }
 
 .heroes li {
-  overflow:hidden;
-  margin: .5em 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
 }
 
-.heroes li > .inner {
-  cursor: pointer;
+.heroes .inner {
+  flex: 1;
   background-color: #EEE;
-  padding: .3rem 0;
-  height: 1.6rem;
+  margin: .5em;
+  padding: 0;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
 }
 
-.heroes li:hover > .inner {
-  color: black;
-  background-color: #DDD;
-  transform: translateX(.1em);
+.heroes button.inner {
+  cursor: pointer;
+  font-size: inherit;
+}
+
+.heroes button.inner:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
+  left: .1em;
+}
+
+.heroes button.inner:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.inner.selected {
+  background-color: black;
+  color: white;
+}
+
+.heroes button.inner.selected:hover {
+  background-color: #505050;
+  color: white;
+}
+
+.heroes button.inner.selected:active {
+  background-color: black;
+  color: white;
 }
 
 .heroes .badge {
@@ -27,17 +58,17 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #3d5157;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  min-width: 16px;
-  text-align: right;
+  background-color: #405061;
+  line-height: 1em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
 
+.heroes .name {
+  min-width: max-content;
+  padding: 0.5rem 0;
+}
+
 label {
   display: block;
   padding-bottom: .5rem;
diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.html b/aio/content/examples/animations/src/app/hero-list-page.component.html
index d8b718e597e..b6b2af8e426 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.html
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.html
@@ -11,7 +11,7 @@
   <li *ngFor="let hero of heroes" class="hero">
     <div class="inner">
       <span class="badge">{{ hero.id }}</span>
-      <span>{{ hero.name }}</span>
+      <span class="name">{{ hero.name }}</span>
     </div>
   </li>
 </ul>
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.1.html b/aio/content/examples/architecture/src/app/hero-list.component.1.html
index 9533a287bc7..dd62ae56cdb 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.1.html
+++ b/aio/content/examples/architecture/src/app/hero-list.component.1.html
@@ -1,7 +1,8 @@
 <!--#docregion binding  -->
-<li>{{hero.name}}</li>
 <app-hero-detail [hero]="selectedHero"></app-hero-detail>
-<li (click)="selectHero(hero)"></li>
+<button (click)="selectHero(hero)">
+  {{hero.name}}
+</button>
 <!--#enddocregion binding -->
 
 <!--#docregion structural  -->
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.html b/aio/content/examples/architecture/src/app/hero-list.component.html
index a14717ca7f6..e673ba18a8b 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.html
+++ b/aio/content/examples/architecture/src/app/hero-list.component.html
@@ -3,8 +3,10 @@
 
 <p><em>Select a hero from the list to see details.</em></p>
 <ul>
-  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
-    {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button (click)="selectHero(hero)">
+      {{hero.name}}
+    </button>
   </li>
 </ul>
 
diff --git a/aio/content/examples/architecture/src/assets/architecture.css b/aio/content/examples/architecture/src/assets/architecture.css
index 8fd83cfd935..9e8651ad075 100644
--- a/aio/content/examples/architecture/src/assets/architecture.css
+++ b/aio/content/examples/architecture/src/assets/architecture.css
@@ -4,13 +4,21 @@ ul {
 
 li {
   list-style-type: none;
-  padding: 1rem;
-  background-color: aliceblue;
   border: 1px solid #444;
   margin-bottom: .5rem;
+  display: flex;
 }
 
-li:hover {
+li button {
+  background-color: aliceblue;
+  flex: 1;
+  padding: 1rem;
+  margin: 0;
+  text-align: left;
+  border-radius: 0;
+}
+
+li button:hover, li button:active {
   background-color: #444;
   color: white;
   cursor: pointer;
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.css b/aio/content/examples/docs-style-guide/src/app/app.component.css
index cc999f8458a..64a67e026fa 100644
--- a/aio/content/examples/docs-style-guide/src/app/app.component.css
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.css
@@ -7,45 +7,68 @@
 }
 /* #enddocregion heroes */
 
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC !important;
-  color: white;
-}
-.heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+
+.heroes button:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
-.heroes .text {
-  position: relative;
-  top: -3px;
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
 }
+
+.heroes button.selected {
+  background-color: black;
+  color: white;
+}
+
+.heroes button.selected:hover {
+  background-color: #505050;
+  color: white;
+}
+
+.heroes button.selected:active {
+  background-color: black;
+  color: white;
+}
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
 
-.selected {
-  background-color: #CFD8DC !important;
-  color: white;
+.heroes .name {
+  align-self: center;
 }
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.html b/aio/content/examples/docs-style-guide/src/app/app.component.html
index 9a96640214c..c0ca206e5cd 100644
--- a/aio/content/examples/docs-style-guide/src/app/app.component.html
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.html
@@ -1,17 +1,19 @@
 <h1>{{title}}</h1>
 <h2>My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="let hero of heroes"
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
 </ul>
 <div *ngIf="selectedHero">
   <h2>{{selectedHero.name}} details!</h2>
-  <div><label>id: </label>{{selectedHero.id}}</div>
+  <div>id: {{selectedHero.id}}</div>
   <div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+    <label>
+      name: <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+    </label>
   </div>
 </div>
diff --git a/aio/content/examples/event-binding/src/app/app.component.html b/aio/content/examples/event-binding/src/app/app.component.html
index f5387f6f2ab..c9b4f6a9235 100644
--- a/aio/content/examples/event-binding/src/app/app.component.html
+++ b/aio/content/examples/event-binding/src/app/app.component.html
@@ -34,6 +34,9 @@
 
 
   <h4>Click to see event target class:</h4>
+
+<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
+
 <div class="parent-div" (click)="onClickMe($event)" clickable>Click me (parent)
   <div class="child-div">Click me too! (child) </div>
 </div>
@@ -47,3 +50,5 @@
 <div (click)="onSave()" clickable>
   <button (click)="onSave()">Save with propagation</button>
 </div>
+
+<!-- eslint-enable @angular-eslint/template/click-events-have-key-events -->
diff --git a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
index 0cd2c197207..314d4a902c0 100644
--- a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
+++ b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
@@ -1,7 +1,7 @@
 <div class="detail">
   <p>This is the ItemDetailComponent</p>
   <!-- #docregion line-through -->
-  <img src="{{itemImageUrl}}" [style.display]="displayNone">
+  <img src="{{itemImageUrl}}" alt="{{item.name}}" [style.display]="displayNone">
   <span [style.text-decoration]="lineThrough">{{ item.name }}
   </span>
   <button (click)="delete()">Delete</button>
diff --git a/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts b/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
index 438adeb81b7..ccf31b92f7d 100644
--- a/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
@@ -10,7 +10,7 @@ describe('Hierarchical dependency injection', () => {
       income: '',
 
       // queries
-      heroEl: element.all(by.css('app-heroes-list li')).get(0), // first hero
+      heroEl: element.all(by.css('app-heroes-list li button')).get(0), // first hero
       heroCardEl: element(by.css('app-heroes-list app-hero-tax-return')), // first hero tax-return
       taxReturnNameEl: element.all(by.css('app-heroes-list app-hero-tax-return #name')).get(0),
       incomeInputEl: element.all(by.css('app-heroes-list app-hero-tax-return input')).get(0),
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
index ebf2dcbaaa7..50bbff9ab46 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
@@ -2,7 +2,7 @@
   <div class="msg" [class.canceled]="message==='Canceled'">{{message}}</div>
   <fieldset>
     <span  id=name>{{taxReturn.name}}</span>
-    <label id=tid>TID: {{taxReturn.tid}}</label>
+    <span id=tid>TID: {{taxReturn.tid}}</span>
   </fieldset>
   <fieldset>
     <label>
@@ -10,7 +10,7 @@
     </label>
   </fieldset>
   <fieldset>
-    <label>Tax: {{taxReturn.tax}}</label>
+    <span>Tax: {{taxReturn.tax}}</span>
   </fieldset>
   <fieldset>
     <button (click)="onSaved()">Save</button>
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
index 093e8a0dac7..1a0f852b9a3 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
@@ -11,8 +11,8 @@ import { HeroesService } from './heroes.service';
     <div>
       <h3>Hero Tax Returns</h3>
       <ul>
-        <li *ngFor="let hero of heroes | async"
-            (click)="showTaxReturn(hero)">{{hero.name}}
+        <li *ngFor="let hero of heroes | async">
+          <button (click)="showTaxReturn(hero)">{{hero.name}}</button>
         </li>
       </ul>
       <app-hero-tax-return
@@ -22,7 +22,13 @@ import { HeroesService } from './heroes.service';
       </app-hero-tax-return>
     </div>
     `,
-  styles: [ 'li {cursor: pointer;}' ]
+  styles: [`
+    li button {
+      font-size: inherit;
+      margin: 0.3rem;
+      padding: 0.5rem;
+    }
+  `]
 })
 export class HeroesListComponent {
   heroes: Observable<Hero[]>;
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.css b/aio/content/examples/http/src/app/heroes/heroes.component.css
index a728e26746f..d5a402a0397 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.css
@@ -9,21 +9,20 @@
 }
 
 .heroes li {
-  position: relative;
+  display: flex;
+  width: 100%;
 }
 
 .heroes li:hover {
   left: .1em;
 }
 
-.heroes a {
+.heroes button.delete {
   color: black;
   display: block;
   font-size: 1.2rem;
   background-color: #eee;
-  margin: .5em 0;
-  padding: .5em 0;
-  border-radius: 4px;
+  border-radius: 0 4px 4px 0;
 }
 
 .heroes a:hover {
@@ -40,8 +39,18 @@
   border-radius: 4px 0 0 4px;
 }
 
+.heroes button.edit {
+  flex: 1;
+  text-align: left;
+  padding: 0;
+  margin-right: 0;
+  display: flex;
+  align-items: center;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 button.delete {
-  position: absolute;
   right: -8px;
   top: 5px;
   background-color: gray;
@@ -53,6 +62,4 @@ button.delete {
 .heroes input {
   max-width: 12rem;
   padding: .25rem;
-  position: absolute;
-  top: 8px;
 }
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.html b/aio/content/examples/http/src/app/heroes/heroes.component.html
index bc470badae7..4d7d602e032 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.html
@@ -14,7 +14,7 @@
 
 <ul class="heroes">
   <li *ngFor="let hero of heroes">
-    <a (click)="edit(hero)">
+    <button class="edit" (click)="edit(hero)">
       <span class="badge">{{ hero.id || -1 }}</span>
       <span *ngIf="hero!==editHero">{{hero.name}}</span>
       <input type="text"
@@ -22,7 +22,7 @@
              [(ngModel)]="hero.name"
              (blur)="update()"
              (keyup.enter)="update()">
-    </a>
+    </button>
     <button class="delete" title="delete hero"
     (click)="delete(hero)">x</button>
   </li>
diff --git a/aio/content/examples/i18n/doc-files/app.component.html b/aio/content/examples/i18n/doc-files/app.component.html
index 5e7db6b4b26..1e5da1744cc 100644
--- a/aio/content/examples/i18n/doc-files/app.component.html
+++ b/aio/content/examples/i18n/doc-files/app.component.html
@@ -27,11 +27,11 @@
 <!--#enddocregion i18n-attribute-solo-id-->
 
 <!--#docregion i18n-title-->
-<img [src]="logo" title="Angular logo">
+<img [src]="logo" title="Angular logo" alt="Angular logo">
 <!--#enddocregion i18n-title-->
 
 <!--#docregion i18n-duplicate-custom-id-->
 <h3 i18n="@@myId">Hello</h3>
 <!-- ... -->
 <p i18n="@@myId">Good bye</p>
-<!--#enddocregion i18n-duplicate-custom-id-->
\ No newline at end of file
+<!--#enddocregion i18n-duplicate-custom-id-->
diff --git a/aio/content/examples/i18n/src/app/app.component.html b/aio/content/examples/i18n/src/app/app.component.html
index f7b68a9f761..4ccad73250f 100644
--- a/aio/content/examples/i18n/src/app/app.component.html
+++ b/aio/content/examples/i18n/src/app/app.component.html
@@ -10,7 +10,7 @@
 <br />
 
 <!--#docregion i18n-title-translate-->
-<img [src]="logo" i18n-title title="Angular logo" />
+<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo"/>
 <!--#enddocregion i18n-title-translate-->
 <br>
 <button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button>
diff --git a/aio/content/examples/interpolation/src/app/app.component.html b/aio/content/examples/interpolation/src/app/app.component.html
index 4a0ed186f28..f9540c31d2a 100644
--- a/aio/content/examples/interpolation/src/app/app.component.html
+++ b/aio/content/examples/interpolation/src/app/app.component.html
@@ -11,7 +11,7 @@
 
     <!-- #docregion component-property -->
     <p>{{title}}</p>
-    <div><img src="{{itemImageUrl}}"></div>
+    <div><img alt="item" src="{{itemImageUrl}}"></div>
     <!-- #enddocregion component-property -->
 
     <h3>Evaluating template expressions </h3>
@@ -35,7 +35,7 @@
   <h3>Component context, properties of app.component.ts:</h3>
   <!-- #docregion component-context -->
   <h4>{{recommended}}</h4>
-  <img [src]="itemImageUrl2">
+  <img alt="item 2" [src]="itemImageUrl2">
   <!-- #enddocregion component-context -->
 </div>
 
diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.component.html b/aio/content/examples/lifecycle-hooks/src/app/app.component.html
index 93309da4fd9..c0fb2da8ffc 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/app.component.html
+++ b/aio/content/examples/lifecycle-hooks/src/app/app.component.html
@@ -1,5 +1,4 @@
-<a id="top"></a>
-<h1>Lifecycle Hooks</h1>
+<h1 id="top">Lifecycle Hooks</h1>
 <a href="#hooks">Peek-a-boo: (most) lifecycle hooks</a>
 <a href="#spy">Spy: directive with OnInit & OnDestroy</a>
 <a href="#onchanges">OnChanges</a>
@@ -8,36 +7,29 @@
 <a href="#after-content">AfterContentInit & AfterContentChecked</a>
 <a href="#counter">Counter: OnChanges + Spy directive</a>
 
-<a id="hooks"></a>
-<peek-a-boo-parent></peek-a-boo-parent>
+<peek-a-boo-parent id="hooks"></peek-a-boo-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="spy"></a>
-<spy-parent></spy-parent>
+<spy-parent id="spy"></spy-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="onchanges"></a>
-<on-changes-parent></on-changes-parent>
+<on-changes-parent id="onchanges"></on-changes-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="docheck"></a>
-<do-check-parent></do-check-parent>
+<do-check-parent id="docheck"></do-check-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="after-view"></a>
-<after-view-parent></after-view-parent>
+<after-view-parent id="after-view"></after-view-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="after-content"></a>
-<after-content-parent></after-content-parent>
+<after-content-parent id="after-content"></after-content-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="counter"></a>
-<counter-parent></counter-parent>
+<counter-parent id="counter"></counter-parent>
 <a href="#top">back to top</a>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
index c29c6fb7a79..334c1f83dd8 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
+++ b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
@@ -1,5 +1,5 @@
 <h2>{{title}}</h2>
-<label for="power-input"><label>Power: </label>
+<label for="power-input">Power: </label>
 <input type="text" id="power-input" [(ngModel)]="power">
 <label for="hero-name">Hero.name: </label>
 <input type="text" id="hero-name" [(ngModel)]="hero.name">
diff --git a/aio/content/examples/observables-in-angular/src/main.ts b/aio/content/examples/observables-in-angular/src/main.ts
index fecd968f17f..97f8a8ecfcf 100644
--- a/aio/content/examples/observables-in-angular/src/main.ts
+++ b/aio/content/examples/observables-in-angular/src/main.ts
@@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
   selector: 'app-zippy',
   template: `
     <div class="zippy">
-      <div (click)="toggle()">Toggle</div>
+      <button (click)="toggle()">Toggle</button>
       <div [hidden]="!visible">
         <ng-content></ng-content>
       </div>
diff --git a/aio/content/examples/pipes/src/app/app.component.html b/aio/content/examples/pipes/src/app/app.component.html
index 09212360761..fd88f9232b5 100644
--- a/aio/content/examples/pipes/src/app/app.component.html
+++ b/aio/content/examples/pipes/src/app/app.component.html
@@ -1,5 +1,4 @@
-<a id="toc"></a>
-<h1>Pipes</h1>
+<h1 id="toc">Pipes</h1>
 <a href="#happy-birthday1">Happy Birthday v1</a>
 <a href="#birthday-date-pipe">Birthday DatePipe</a>
 <a href="#happy-birthday2">Happy Birthday v2</a>
@@ -14,13 +13,11 @@
 
 
 <hr>
-<a id="happy-birthday1"></a>
-<h2>Hero Birthday v1</h2>
+<h2 id="happy-birthday1">Hero Birthday v1</h2>
 <app-hero-birthday></app-hero-birthday>
 
 <hr>
-<a id="birthday-date-pipe"></a>
-<h2>Birthday DatePipe</h2>
+<h2 id="birthday-date-pipe">Birthday DatePipe</h2>
 <!-- #docregion hero-birthday-template -->
 <p>The hero's birthday is {{ birthday | date }}</p>
 <!-- #enddocregion hero-birthday-template-->
@@ -30,13 +27,11 @@
 <!-- #enddocregion format-birthday-->
 
 <hr>
-<a id="happy-birthday2"></a>
-<h2>Hero Birthday v2</h2>
+<h2 id="happy-birthday2">Hero Birthday v2</h2>
 <app-hero-birthday2></app-hero-birthday2>
 
 <hr>
-<a id="birthday-pipe-chaining"></a>
-<h2>Birthday Pipe Chaining</h2>
+<h2 id="birthday-pipe-chaining">Birthday Pipe Chaining</h2>
 <p>
 <!-- #docregion chained-birthday -->
   The chained hero's birthday is
@@ -55,31 +50,24 @@
   {{ ( birthday | date:'fullDate' ) | uppercase}}
 </p>
 <hr>
-<a id="power-booster"></a>
-<app-power-booster></app-power-booster>
+<app-power-booster id="power-booster"></app-power-booster>
 
 <hr>
-<a id="power-boost-calc"></a>
-<app-power-boost-calculator>loading</app-power-boost-calculator>
+<app-power-boost-calculator id="power-boost-calc">loading</app-power-boost-calculator>
 
 <hr>
-<a id="flying-heroes"></a>
-<app-flying-heroes></app-flying-heroes>
+<app-flying-heroes id="flying-heroes"></app-flying-heroes>
 
 <hr>
-<a id="flying-heroes-impure"></a>
-<app-flying-heroes-impure></app-flying-heroes-impure>
+<app-flying-heroes-impure id="flying-heroes-impure"></app-flying-heroes-impure>
 
 <hr>
-<a id="hero-message"></a>
 <!-- async examples at the top so can see them in action -->
-<app-hero-async-message></app-hero-async-message>
+<app-hero-async-message id="hero-message"></app-hero-async-message>
 
 <hr>
-<a id="hero-list"></a>
-<app-hero-list></app-hero-list>
+<app-hero-list id="hero-list"></app-hero-list>
 
 <hr>
-<a id="pipe-precedence"></a>
-<app-precedence></app-precedence>
+<app-precedence id="pipe-precedence"></app-precedence>
 <hr>
diff --git a/aio/content/examples/property-binding/src/app/app.component.html b/aio/content/examples/property-binding/src/app/app.component.html
index e91b4ee6ee5..8b48e942e12 100644
--- a/aio/content/examples/property-binding/src/app/app.component.html
+++ b/aio/content/examples/property-binding/src/app/app.component.html
@@ -4,7 +4,7 @@
   <h1>Property Binding with Angular</h1>
   <h2>Binding the src property of an image:</h2>
   <!-- #docregion property-binding -->
-  <img [src]="itemImageUrl">
+  <img alt="item" [src]="itemImageUrl">
   <!-- #enddocregion property-binding -->
   <hr />
 
@@ -47,8 +47,8 @@
 
   <h2>Property binding and interpolation</h2>
   <!-- #docregion property-binding-interpolation -->
-  <p><img src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
-  <p><img [src]="itemImageUrl"> is the <i>property bound</i> image.</p>
+  <p><img alt="Interpolated item" src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
+  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <i>property bound</i> image.</p>
 
   <p><span>"{{interpolationTitle}}" is the <i>interpolated</i> title.</span></p>
   <p>"<span [innerHTML]="propertyTitle"></span>" is the <i>property bound</i> title.</p>
diff --git a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
index cc0f4cfd0df..f4944a7115a 100644
--- a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
@@ -3,8 +3,8 @@ import { browser, element, by } from 'protractor';
 describe('Reactive forms', () => {
   const nameEditor = element(by.css('app-name-editor'));
   const profileEditor = element(by.css('app-profile-editor'));
-  const nameEditorLink = element(by.cssContainingText('app-root > nav > a', 'Name Editor'));
-  const profileEditorLink = element(by.cssContainingText('app-root > nav > a', 'Profile Editor'));
+  const nameEditorButton = element(by.cssContainingText('app-root > nav > button', 'Name Editor'));
+  const profileEditorButton = element(by.cssContainingText('app-root > nav > button', 'Profile Editor'));
 
   beforeAll(() => browser.get(''));
 
@@ -14,7 +14,7 @@ describe('Reactive forms', () => {
     const nameText = 'John Smith';
 
     beforeAll(async () => {
-      await nameEditorLink.click();
+      await nameEditorButton.click();
     });
 
     beforeEach(async () => {
@@ -66,12 +66,12 @@ describe('Reactive forms', () => {
     };
 
     beforeAll(async () => {
-      await profileEditorLink.click();
+      await profileEditorButton.click();
     });
 
     beforeEach(async () => {
       await browser.get('');
-      await profileEditorLink.click();
+      await profileEditorButton.click();
     });
 
     it('should be invalid by default', async () => {
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.css b/aio/content/examples/reactive-forms/src/app/app.component.css
index 0befc361b91..9336f8f4200 100644
--- a/aio/content/examples/reactive-forms/src/app/app.component.css
+++ b/aio/content/examples/reactive-forms/src/app/app.component.css
@@ -1,3 +1,4 @@
-nav a {
+nav button {
   padding: 1rem;
+  font-size: inherit;
 }
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.html b/aio/content/examples/reactive-forms/src/app/app.component.html
index d3d69112bca..bc1d2fd7b14 100644
--- a/aio/content/examples/reactive-forms/src/app/app.component.html
+++ b/aio/content/examples/reactive-forms/src/app/app.component.html
@@ -1,8 +1,8 @@
 <h1>Reactive Forms</h1>
 
 <nav>
-  <a (click)="toggleEditor('name')">Name Editor</a>
-  <a (click)="toggleEditor('profile')">Profile Editor</a>
+  <button (click)="toggleEditor('name')">Name Editor</button>
+  <button (click)="toggleEditor('profile')">Profile Editor</button>
 </nav>
 
 <app-name-editor *ngIf="showNameEditor"></app-name-editor>
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.2.html b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.2.html
deleted file mode 100644
index 70bcaeb1d30..00000000000
--- a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.2.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<h3>Dashboard</h3>
-
-<p>Session ID: {{ sessionId | async }}</p>
-<a id="anchor"></a>
-<p>Token: {{ token | async }}</p>
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html
index 4ba685bc14c..04ff184a5f4 100644
--- a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html
@@ -1,7 +1,7 @@
 <h3>Dashboard</h3>
 
 <p>Session ID: {{ sessionId | async }}</p>
-<a id="anchor"></a>
+<div id="anchor"></div>
 <p>Token: {{ token | async }}</p>
 
 Preloaded Modules
diff --git a/aio/content/examples/set-document-title/src/app/app.component.ts b/aio/content/examples/set-document-title/src/app/app.component.ts
index e4d6671a477..e6e8e2fbc11 100644
--- a/aio/content/examples/set-document-title/src/app/app.component.ts
+++ b/aio/content/examples/set-document-title/src/app/app.component.ts
@@ -12,9 +12,9 @@ import { Title } from '@angular/platform-browser';
     </p>
 
     <ul>
-      <li><a (click)="setTitle('Good morning!')">Good morning</a>.</li>
-      <li><a (click)="setTitle('Good afternoon!')">Good afternoon</a>.</li>
-      <li><a (click)="setTitle('Good evening!')">Good evening</a>.</li>
+      <li><button (click)="setTitle('Good morning!')">Good morning</button></li>
+      <li><button (click)="setTitle('Good afternoon!')">Good afternoon</button></li>
+      <li><button (click)="setTitle('Good evening!')">Good evening</button></li>
     </ul>
   `,
 })
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
index f042cd85f73..6a85fc8cb2c 100644
--- a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
@@ -5,27 +5,63 @@
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
+
+.heroes button:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
+  left: .1em;
+}
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.selected {
+  background-color: black;
+  color: white;
+}
+
+.heroes button.selected:hover {
+  background-color: #505050;
+  color: white;
+}
+
+.heroes button.selected:active {
+  background-color: black;
+  color: white;
+}
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
+
+.heroes .name {
+  align-self: center;
+}
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
index bab05ceb2b2..090451c6168 100644
--- a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
@@ -2,8 +2,11 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="let hero of heroes | async" (click)="selectedHero=hero">
-      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    <li *ngFor="let hero of heroes | async">
+      <button (click)="selectedHero=hero">
+        <span class="badge">{{hero.id}}</span>
+        <span class="name">{{hero.name}}</span>
+      </button>
     </li>
   </ul>
   <div *ngIf="selectedHero">
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
index 5eb77f58836..0e8519ed1ea 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -1,6 +1,5 @@
 <!-- #docplaster -->
-<a id="toc"></a>
-<h1>Template Syntax</h1>
+<h1 id="toc">Template Syntax</h1>
 <a href="#interpolation">Interpolation</a><br>
 <a href="#expression-context">Expression context</a><br>
 <a href="#statement-context">Statement context</a><br>
@@ -47,7 +46,7 @@
 
 <h3>
   {{title}}
-  <img src="{{heroImageUrl}}" style="height:30px">
+  <img alt="{{hero.name}}" src="{{heroImageUrl}}" style="height:30px">
 </h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
@@ -120,7 +119,7 @@
 <!--<img src="https://wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
 <!-- Public Domain terms of use: https://wpclipart.com/terms.html -->
 <div class="special">Mental Model</div>
-<img src="assets/images/hero.png">
+<img [alt]="hero.name" src="assets/images/hero.png">
 <button disabled>Save</button>
 <br><br>
 
@@ -140,7 +139,7 @@
 
 <div>
   <!-- #docregion property-binding-syntax-1 -->
-  <img [src]="heroImageUrl">
+  <img [alt]="hero.name" [src]="heroImageUrl">
   <app-hero-detail [hero]="currentHero"></app-hero-detail>
   <div [ngClass]="{'special': isSpecial}"></div>
   <!-- #enddocregion property-binding-syntax-1 -->
@@ -181,6 +180,7 @@ button</button>
 
 <a class="to-toc" href="#toc">top</a>
 
+<!-- eslint-disable @angular-eslint/template/accessibility-alt-text -->
 <!-- property vs. attribute -->
 <hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
 <!-- examine the following <img> tag in the browser tools -->
@@ -191,7 +191,7 @@ button</button>
 
 <img [src]="iconUrl"/>
 <img [attr.src]="villainImageUrl"/>
-
+<!-- eslint-enable @angular-eslint/template/accessibility-alt-text -->
 <a class="to-toc" href="#toc">top</a>
 
 <!-- buttons -->
@@ -211,7 +211,7 @@ button</button>
 <!-- property binding -->
 <hr><h2 id="property-binding">Property Binding</h2>
 
-<img [src]="heroImageUrl">
+<img [alt]="hero.name" [src]="heroImageUrl">
 <button [disabled]="isUnchanged">Cancel is disabled</button>
 <div [ngClass]="classes">[ngClass] binding to the classes property</div>
 <app-hero-detail [hero]="currentHero"></app-hero-detail>
@@ -221,8 +221,14 @@ button</button>
 
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
-<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
-<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
+<p>
+  <img src="{{heroImageUrl}}" alt="interpolated image of {{currentHero.name}}">
+  is the <i>interpolated</i> image.
+</p>
+<p>
+  <img [src]="heroImageUrl" [alt]="'property bounded image of ' + currentHero.name">
+  is the <i>property bound</i> image.
+</p>
 
 <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
@@ -320,6 +326,8 @@ button</button>
     [hero]="currentHero">
 </app-big-hero-detail>
 
+<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
+
 <div class="parent-div" (click)="onClickMe($event)" clickable>Click me
   <div class="child-div">Click me too!</div>
 </div>
@@ -334,6 +342,8 @@ button</button>
   <button (click)="onSave()">Save w/ propagation</button>
 </div>
 
+<!-- eslint-enable @angular-eslint/template/click-events-have-key-events -->
+
 <a class="to-toc" href="#toc">top</a>
 
 <hr><h2 id="two-way">Two-way Binding</h2>
@@ -577,7 +587,7 @@ without NgModel
 <!-- inputs and output -->
 <hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
 
-<img [src]="iconUrl"/>
+<img alt="icon" [src]="iconUrl"/>
 <button (click)="onSave()">Save</button>
 
 <app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
@@ -608,7 +618,7 @@ without NgModel
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product.price | currency:'USD':'symbol'}}
+  <span>Price: </span>{{product.price | currency:'USD':'symbol'}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
diff --git a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
index f3c7139acd5..df6b936cb77 100644
--- a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
@@ -10,7 +10,7 @@ import { Hero } from './hero';
   styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
   template: `
   <div>
-    <img src="{{heroImageUrl}}">
+    <img src="{{heroImageUrl}}" alt="{{hero.name}}">
     <span [style.text-decoration]="lineThrough">
       {{prefix}} {{hero.name}}
     </span>
@@ -38,7 +38,7 @@ export class HeroDetailComponent {
   selector: 'app-big-hero-detail',
   template: `
   <div class="detail">
-    <img src="{{heroImageUrl}}">
+    <img src="{{heroImageUrl}}" alt="{{hero.name}}">
     <div><b>{{hero.name}}</b></div>
     <div>Name: {{hero.name}}</div>
     <div>Emotion: {{hero.emotion}}</div>
diff --git a/aio/content/examples/template-syntax/src/app/sizer.component.ts b/aio/content/examples/template-syntax/src/app/sizer.component.ts
index c4443ede515..942ce094206 100644
--- a/aio/content/examples/template-syntax/src/app/sizer.component.ts
+++ b/aio/content/examples/template-syntax/src/app/sizer.component.ts
@@ -7,7 +7,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   <div>
     <button (click)="dec()" title="smaller">-</button>
     <button (click)="inc()" title="bigger">+</button>
-    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+    <span [style.font-size.px]="size">FontSize: {{size}}px</span>
   </div>`
 })
 export class SizerComponent {
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
index eb54d181d82..d4046cd988e 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
@@ -4,6 +4,7 @@
 	text-align: center;
 	color: #eee;
 	max-height: 120px;
+	width: 100%;
 	min-width: 120px;
 	background-color: #607D8B;
 	border-radius: 2px;
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
index 8c55735555c..faf9f17acb7 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
@@ -7,9 +7,9 @@ import { Hero } from '../model/hero';
 @Component({
   selector: 'dashboard-hero',
   template: `
-    <div (click)="click()" class="hero">
+    <button (click)="click()" class="hero">
       {{hero.name | uppercase}}
-    </div>
+    </button>
   `,
   styleUrls: [ './dashboard-hero.component.css' ]
 })
diff --git a/aio/content/examples/testing/src/app/demo/demo.ts b/aio/content/examples/testing/src/app/demo/demo.ts
index 5e375e8e1b5..57107bc8caf 100644
--- a/aio/content/examples/testing/src/app/demo/demo.ts
+++ b/aio/content/examples/testing/src/app/demo/demo.ts
@@ -184,7 +184,7 @@ export class ParentComponent { }
 
 @Component({
   selector: 'io-comp',
-  template: '<div class="hero" (click)="click()">Original {{hero.name}}</div>'
+  template: '<button class="hero" (click)="click()">Original {{hero.name}}</button>'
 })
 export class IoComponent {
   @Input() hero!: Hero;
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.html b/aio/content/examples/testing/src/app/hero/hero-detail.component.html
index 7e86a668f6a..aaa8eaae2ae 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.html
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.html
@@ -2,7 +2,7 @@
 <div *ngIf="hero">
   <h2><span>{{hero.name | titlecase}}</span> Details</h2>
   <div>
-    <label>id: </label>{{hero.id}}</div>
+    <span>id: </span>{{hero.id}}</div>
   <div>
     <label for="name">name: </label>
     <input id="name" [(ngModel)]="hero.name" placeholder="name" />
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css
index bb24cf0cd6f..ffd66ab8d6f 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.css
@@ -2,57 +2,70 @@
   background-color: #CFD8DC !important;
   color: white;
 }
+
 .heroes {
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+
+.heroes button:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC !important;
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.selected {
+  background-color: black;
   color: white;
 }
-.heroes .text {
-  position: relative;
-  top: -3px;
+
+.heroes button.selected:hover {
+  background-color: #505050;
+  color: white;
 }
+
+.heroes button.selected:active {
+  background-color: black;
+  color: white;
+}
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
-button {
-  font-family: Arial, sans-serif;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-button:hover {
-  background-color: #cfd8dc;
+
+.heroes .name {
+  align-self: center;
 }
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.html b/aio/content/examples/testing/src/app/hero/hero-list.component.html
index cd37301fd6b..dda92c3609f 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.html
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.html
@@ -1,8 +1,9 @@
 <h2 highlight="gold">My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="let hero of heroes | async "
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes | async ">
+    <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
 </ul>
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
index 23d88cd9a79..38048773b55 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
@@ -56,11 +56,11 @@ describe('HeroListComponent', () => {
 
   it('should select hero on click', fakeAsync(() => {
        const expectedHero = HEROES[1];
-       const li = page.heroRows[1];
+       const btn = page.heroRows[1].querySelector('button');
 
        // In older browsers, such as IE, you might need a CustomEvent instead. See
        // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
-       li.dispatchEvent(new Event('click'));
+       btn!.dispatchEvent(new Event('click'));
        tick();
        // `.toEqual` because selectedHero is clone of expectedHero; see FakeHeroService
        expect(comp.selectedHero).toEqual(expectedHero);
@@ -68,11 +68,11 @@ describe('HeroListComponent', () => {
 
   it('should navigate to selected hero detail on click', fakeAsync(() => {
        const expectedHero = HEROES[1];
-       const li = page.heroRows[1];
+       const btn = page.heroRows[1].querySelector('button');
 
        // In older browsers, such as IE, you might need a CustomEvent instead. See
        // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
-       li.dispatchEvent(new Event('click'));
+       btn!.dispatchEvent(new Event('click'));
        tick();
 
        // should have navigated
diff --git a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
index 9a25932f367..48571bd8af5 100644
--- a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
@@ -66,7 +66,7 @@ function initialPageTests() {
 
 function selectHeroTests() {
   it(`selects ${targetHero.name} from hero list`, async () => {
-    const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    const hero = element(by.cssContainingText('button span.badge', targetHero.id.toString()));
     await hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
@@ -74,7 +74,7 @@ function selectHeroTests() {
   it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(await page.selected.getText()).toBe(expectedText);
+    expect((await page.selected.getText()).replace('\n', ' ')).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
@@ -101,7 +101,7 @@ function updateHeroTests() {
 
   it(`shows updated hero name in list`, async () => {
     const page = getPageElts();
-    const hero = Hero.fromString(await page.selected.getText());
+    const hero = Hero.fromString((await page.selected.getText()).replace('\n', ' '));
     const newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(newName);
@@ -122,8 +122,8 @@ async function expectHeading(hLevel: number, expectedText: string): Promise<void
 
 function getPageElts() {
   return {
-    heroes: element.all(by.css('app-root li')),
-    selected: element(by.css('app-root li.selected')),
+    heroes: element.all(by.css('app-root li button')),
+    selected: element(by.css('app-root li button.selected')),
     heroDetail: element(by.css('app-root > div, app-root > app-heroes > div'))
   };
 }
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
index fe140484f54..3b77cd1689c 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
@@ -12,7 +12,8 @@
 <!-- #enddocregion li -->
 
 <!-- #docregion selectedHero-click -->
-<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+<li *ngFor="let hero of heroes">
+  <button (click)="onSelect(hero)">
 <!-- #enddocregion selectedHero-click -->
 
 <!-- #docregion class-selected -->
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
index 7a6a8dfd03f..8535c72e244 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
@@ -5,48 +5,63 @@
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li:hover {
+
+.heroes button:hover {
   color: #2c3a41;
   background-color: #e6e6e6;
   left: .1em;
 }
-.heroes li.selected {
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.selected {
   background-color: black;
   color: white;
 }
-.heroes li.selected:hover {
+
+.heroes button.selected:hover {
   background-color: #505050;
   color: white;
 }
-.heroes li.selected:active {
+
+.heroes button.selected:active {
   background-color: black;
   color: white;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
 
-input {
-  padding: .5rem;
+.heroes .name {
+  align-self: center;
 }
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
index 4a00357290b..a87fcfc39bb 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
@@ -2,10 +2,11 @@
 <h2>My Heroes</h2>
 <ul class="heroes">
   <!-- #docregion li -->
-  <li *ngFor="let hero of heroes"
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
   <!-- #enddocregion li -->
 </ul>
@@ -15,7 +16,7 @@
 
   <!-- #docregion selectedHero-details -->
   <h2>{{selectedHero.name | uppercase}} Details</h2>
-  <div><span>id: </span>{{selectedHero.id}}</div>
+  <div>id: {{selectedHero.id}}</div>
   <div>
     <label for="hero-name">Hero name: </label>
     <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
diff --git a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
index bcc7dee50d5..6a797b59674 100644
--- a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
@@ -66,7 +66,7 @@ function initialPageTests() {
 
 function selectHeroTests() {
   it(`selects ${targetHero.name} from hero list`, async () => {
-    const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    const hero = element(by.cssContainingText('li button', targetHero.id.toString() + targetHero.name.toString()));
     await hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
@@ -74,7 +74,7 @@ function selectHeroTests() {
   it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(await page.selected.getText()).toBe(expectedText);
+    expect((await page.selected.getText()).replace('\n', ' ')).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
@@ -101,7 +101,7 @@ function updateHeroTests() {
 
   it(`shows updated hero name in list`, async () => {
     const page = getPageElts();
-    const hero = Hero.fromString(await page.selected.getText());
+    const hero = Hero.fromString(await (await page.selected.getText()).replace('\n', ' '));
     const newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(newName);
@@ -122,8 +122,8 @@ async function expectHeading(hLevel: number, expectedText: string): Promise<void
 
 function getPageElts() {
   return {
-    heroes: element.all(by.css('app-root li')),
-    selected: element(by.css('app-root li.selected')),
+    heroes: element.all(by.css('app-root li button')),
+    selected: element(by.css('app-root li button.selected')),
     heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > 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 9ace14f8261..34b52b089ee 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
@@ -6,43 +6,61 @@
   width: 15em;
 }
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li:hover {
+
+.heroes button:hover {
   color: #2c3a41;
   background-color: #e6e6e6;
   left: .1em;
 }
-.heroes li.selected {
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.selected {
   background-color: black;
   color: white;
 }
-.heroes li.selected:hover {
+
+.heroes button.selected:hover {
   background-color: #505050;
   color: white;
 }
-.heroes li.selected:active {
+
+.heroes button.selected:active {
   background-color: black;
   color: white;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
+
+.heroes .name {
+  align-self: center;
+}
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
index 2a78dbaa336..83207f7bea9 100644
--- a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
@@ -1,10 +1,11 @@
 <h2>My Heroes</h2>
 
 <ul class="heroes">
-  <li *ngFor="let hero of heroes"
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
 </ul>
 
diff --git a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
index eba88f27002..8c87c0d0e56 100644
--- a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
@@ -74,7 +74,7 @@ function selectHeroTests() {
   it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(await page.selected.getText()).toBe(expectedText);
+    expect((await page.selected.getText()).replace('\n', ' ')).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
@@ -106,7 +106,7 @@ function updateHeroTests() {
 
   it(`shows updated hero name in list`, async () => {
     const page = getPageElts();
-    const hero = Hero.fromString(await page.selected.getText());
+    const hero = Hero.fromString((await page.selected.getText()).replace('\n', ' '));
     const newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(newName);
@@ -127,8 +127,8 @@ async function expectHeading(hLevel: number, expectedText: string): Promise<void
 
 function getPageElts() {
   return {
-    heroes: element.all(by.css('app-root li')),
-    selected: element(by.css('app-root li.selected')),
+    heroes: element.all(by.css('app-root li button')),
+    selected: element(by.css('app-root li button.selected')),
     heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
   };
 }
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
index 94f075e7eab..8535c72e244 100644
--- a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
@@ -5,49 +5,63 @@
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li:hover {
+
+.heroes button:hover {
   color: #2c3a41;
   background-color: #e6e6e6;
   left: .1em;
 }
-.heroes li:active {
+
+.heroes button:active {
   background-color: #525252;
   color: #fafafa;
 }
-.heroes li.selected {
+
+.heroes button.selected {
   background-color: black;
   color: white;
 }
-.heroes li.selected:hover {
+
+.heroes button.selected:hover {
   background-color: #505050;
   color: white;
 }
-.heroes li.selected:active {
+
+.heroes button.selected:active {
   background-color: black;
   color: white;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
 
+.heroes .name {
+  align-self: center;
+}
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
index a4676a9f2a1..70b8970eb0b 100644
--- a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
@@ -1,10 +1,11 @@
 <h2>My Heroes</h2>
 <!-- #docregion list -->
 <ul class="heroes">
-  <li *ngFor="let hero of heroes"
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
 </ul>
 <!-- #enddocregion list -->
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
index d54f7a290c6..6dbba03504b 100644
--- a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
@@ -41,7 +41,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
   position: relative;
   left: -1px;
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index 62760d9fd1c..8dfcefb76ef 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -50,7 +50,7 @@ input {
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
   position: relative;
   left: -1px;
@@ -80,6 +80,7 @@ button.delete {
   background-color: white;
   color:  #525252;
   font-size: 1.1rem;
+  margin: 0;
   padding: 1px 10px 3px 10px;
 }
 
diff --git a/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts b/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts
index c0a29c9b6a6..d24588b6416 100644
--- a/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts
@@ -20,17 +20,17 @@ describe('Two-way binding e2e tests', () => {
     expect(await plus2Button.getText()).toBe('+');
   });
 
-  it('should change font size labels', async () => {
+  it('should change font size texts', async () => {
     await minusButton.click();
-    expect(await element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 15px');
+    expect(await element.all(by.css('span')).get(0).getText()).toEqual('FontSize: 15px');
     expect(await element.all(by.css('input')).get(0).getAttribute('value')).toEqual('15');
 
     await plusButton.click();
-    expect(await element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 16px');
+    expect(await element.all(by.css('span')).get(0).getText()).toEqual('FontSize: 16px');
     expect(await element.all(by.css('input')).get(0).getAttribute('value')).toEqual('16');
 
     await minus2Button.click();
-    expect(await element.all(by.css('label')).get(2).getText()).toEqual('FontSize: 15px');
+    expect(await element.all(by.css('span')).get(1).getText()).toEqual('FontSize: 15px');
   });
 
   it('should display De-sugared two-way binding', async () => {
diff --git a/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.html b/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.html
index c635935aa03..c8fbcb78808 100644
--- a/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.html
+++ b/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.html
@@ -1,5 +1,5 @@
 <div>
   <button (click)="dec()" title="smaller">-</button>
   <button (click)="inc()" title="bigger">+</button>
-  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+  <span [style.font-size.px]="size">FontSize: {{size}}px</span>
 </div>
diff --git a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
index d8c0a226e5c..e92d1ba637a 100644
--- a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
@@ -176,8 +176,9 @@ describe('Universal', () => {
         expect(await button.getCssValue('padding')).toBe('5px 10px');
         expect(await button.getCssValue('border-radius')).toBe('4px');
         // Styles defined in heroes.component.css
-        expect(await button.getCssValue('left')).toBe('194px');
-        expect(await button.getCssValue('top')).toBe('-32px');
+        expect(await button.getCssValue('right')).toBe('0px');
+        expect(await button.getCssValue('top')).toBe('0px');
+        expect(await button.getCssValue('bottom')).toBe('0px');
       }
 
       const addButton = element(by.buttonText('add'));
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.css b/aio/content/examples/universal/src/app/heroes/heroes.component.css
index a081f6ce78c..ccb1e57e352 100644
--- a/aio/content/examples/universal/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.css
@@ -5,6 +5,7 @@
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
   position: relative;
   cursor: pointer;
@@ -64,10 +65,12 @@ button:hover {
 }
 
 button.delete {
-  position: relative;
-  left: 194px;
-  top: -32px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
   background-color: gray !important;
   color: white;
+  margin: 0;
 }
 
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
index f3fe755f312..a1e8b76392f 100644
--- a/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
@@ -6,7 +6,7 @@ import { Hero } from '../hero';
   selector: 'hero-detail',
   template: `
     <h2>{{hero.name}} details!</h2>
-    <div><label>id: </label>{{hero.id}}</div>
+    <div>id: {{hero.id}}</div>
     <button (click)="onDelete()">Delete</button>
   `
 })
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts
index df4a705f37c..fae7b9d5dac 100644
--- a/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts
@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
   selector: 'hero-detail',
   template: `
     <h2>Windstorm details!</h2>
-    <div><label>id: </label>1</div>
+    <div>id: 1</div>
   `
 })
 export class HeroDetailComponent { }
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html
index f48657803cf..9495a46b366 100644
--- a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html
@@ -1,5 +1,5 @@
 <div class="phone-images">
-  <img ng-src="{{img}}" class="phone"
+  <img ng-src="{{img}}" class="phone" alt="Phone {{$ctrl.phone.name}} - thumbnail {{$index}}"
       ng-class="{selected: img === $ctrl.mainImageUrl}"
       ng-repeat="img in $ctrl.phone.images" />
 </div>
@@ -10,7 +10,7 @@
 
 <ul class="phone-thumbs">
   <li ng-repeat="img in $ctrl.phone.images">
-    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
+    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" alt="Phone {{$ctrl.phone.name}} - thumbnail {{$index}}"/>
   </li>
 </ul>
 
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
index 4068532de99..1c2a8740655 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
@@ -1,9 +1,9 @@
 <!-- #docregion -->
 <div *ngIf="phone">
   <div class="phone-images">
-    <img [src]="img" class="phone"
+    <img [src]="img" class="phone" alt="Phone {{ phone.name }} - thumbnail {{ index }}"
         [ngClass]="{'selected': img === mainImageUrl}"
-        *ngFor="let img of phone.images" />
+        *ngFor="let img of phone.images; let index = index;" />
   </div>
 
   <h1>{{phone.name}}</h1>
@@ -11,8 +11,9 @@
   <p>{{phone.description}}</p>
 
   <ul class="phone-thumbs">
-    <li *ngFor="let img of phone.images">
-      <img [src]="img" (click)="setImage(img)" />
+    <li *ngFor="let img of phone.images; let index = index">
+      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
+      <img [src]="img" (click)="setImage(img)" alt="Phone {{ phone.name }} - thumbnail {{ index }}"/>
     </li>
   </ul>
 
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
index 4068532de99..1396dbc4714 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
@@ -1,9 +1,9 @@
 <!-- #docregion -->
 <div *ngIf="phone">
   <div class="phone-images">
-    <img [src]="img" class="phone"
+    <img [src]="img" class="phone" [alt]="'phone' + index"
         [ngClass]="{'selected': img === mainImageUrl}"
-        *ngFor="let img of phone.images" />
+        *ngFor="let img of phone.images; let index = index" />
   </div>
 
   <h1>{{phone.name}}</h1>
@@ -11,8 +11,9 @@
   <p>{{phone.description}}</p>
 
   <ul class="phone-thumbs">
-    <li *ngFor="let img of phone.images">
-      <img [src]="img" (click)="setImage(img)" />
+    <li *ngFor="let img of phone.images let index = index">
+      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
+      <img [src]="img" [alt]="'phone thumb' + index" (click)="setImage(img)" />
     </li>
   </ul>
 
diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md
index c754c42e4d9..490a6fdd345 100644
--- a/aio/content/guide/architecture-components.md
+++ b/aio/content/guide/architecture-components.md
@@ -89,14 +89,14 @@ This example from the `HeroListComponent` template uses three of these forms.
 
 <code-example path="architecture/src/app/hero-list.component.1.html" header="src/app/hero-list.component.html (binding)" region="binding"></code-example>
 
-* The `{{hero.name}}` [*interpolation*](guide/interpolation)
-displays the component's `hero.name` property value within the `<li>` element.
-
 * The `[hero]` [*property binding*](guide/property-binding) passes the value of
 `selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
 
 * The `(click)` [*event binding*](guide/user-input#binding-to-user-input-events) calls the component's `selectHero` method when the user clicks a hero's name.
 
+* The `{{hero.name}}` [*interpolation*](guide/interpolation)
+displays the component's `hero.name` property value within the `<button>` element.
+
 Two-way data binding (used mainly in [template-driven forms](guide/forms))
 combines property and event binding in a single notation.
 Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive.
diff --git a/aio/content/guide/binding-syntax.md b/aio/content/guide/binding-syntax.md
index 96addfec739..e7bb2e627db 100644
--- a/aio/content/guide/binding-syntax.md
+++ b/aio/content/guide/binding-syntax.md
@@ -237,7 +237,7 @@ The following table summarizes the targets for the different binding types.
       Directive&nbsp;property
     </td>
     <td>
-      <code>src</code>, <code>hero</code>, and <code>ngClass</code> in the following:
+      <code>alt</code>, <code>src</code>, <code>hero</code>, and <code>ngClass</code> in the following:
       <code-example path="template-syntax/src/app/app.component.html" region="property-binding-syntax-1"></code-example>
       <!-- For more information, see [Property Binding](guide/property-binding). -->
     </td>
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
index 310e0da7220..ac060d3f85f 100644
--- a/aio/content/tutorial/toh-pt2.md
+++ b/aio/content/tutorial/toh-pt2.md
@@ -117,15 +117,26 @@ and update the hero detail.
 
 ### Add a click event binding
 
-Add a click event binding to the `<li>` like this:
+Add a `<button>` with a click event binding in the `<li>` like this:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example>
 
 This is an example of Angular's [event binding](guide/event-binding) syntax.
 
-The parentheses around `click` tell Angular to listen for the `<li>` element's  `click` event.
-When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
+The parentheses around `click` tell Angular to listen for the `<button>` element's `click` event.
+When the user clicks in the `<button>`, Angular executes the `onSelect(hero)` expression.
 
+<div class="callout is-helpful">
+
+  <header>Clickable elements</header>
+
+  Note that we added the click event binding on a new `<button>` element. While we could have added
+  the event binding on the `<li>` element directly, it is better for accessibility purposes to use
+  the native `<button>` element to handle clicks.
+
+  For more details on accessibility, see [Accessibility in Angular](guide/accessibility).
+
+</div>
 
 In the next section, define an `onSelect()` method in `HeroesComponent` to
 display the hero that was defined in the `*ngFor` expression.
@@ -207,7 +218,7 @@ To apply the `.selected` class to the `<li>` when the user clicks it, use class
 Angular's [class binding](guide/attribute-binding#class-binding) can add and remove a CSS class conditionally.
 Add `[class.some-css-class]="some-condition"` to the element you want to style.
 
-Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:
+Add the following `[class.selected]` binding to the `<button>` in the `HeroesComponent` template:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example>