From 8ea1927910e89f7b4aa2ec024e6bed73c664546a Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Mon, 22 Mar 2021 11:01:38 -0400
Subject: [PATCH] docs: improve accessibility of architecture example (#41314)

PR Close #41314
---
 .../architecture/e2e/src/app.e2e-spec.ts      |  2 +-
 .../architecture/src/app/app.component.ts     |  1 +
 .../src/app/hero-detail.component.html        | 16 ++++++-------
 .../src/app/hero-list.component.html          |  2 +-
 .../src/app/sales-tax.component.ts            |  9 ++++----
 .../architecture/src/assets/architecture.css  | 23 +++++++++++++++++++
 .../examples/architecture/src/index.html      |  3 ++-
 7 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 aio/content/examples/architecture/src/assets/architecture.css

diff --git a/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts b/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts
index 4be469461f9..4e3080b03c3 100644
--- a/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts
@@ -88,7 +88,7 @@ async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
   // Get hero id from the first <div>
   const id = await detail.all(by.css('div')).first().getText();
   // Get name from the h2
-  const name = await detail.element(by.css('h4')).getText();
+  const name = await detail.element(by.css('app-hero-detail h2')).getText();
   return {
     id: +id.substr(id.indexOf(' ') + 1),
     name: name.substr(0, name.lastIndexOf(' ')),
diff --git a/aio/content/examples/architecture/src/app/app.component.ts b/aio/content/examples/architecture/src/app/app.component.ts
index 95fc839cc24..c3b3518c2b9 100644
--- a/aio/content/examples/architecture/src/app/app.component.ts
+++ b/aio/content/examples/architecture/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
+    <h1>Architecture Example</h1>
     <app-hero-list></app-hero-list>
     <app-sales-tax></app-sales-tax>
   `
diff --git a/aio/content/examples/architecture/src/app/hero-detail.component.html b/aio/content/examples/architecture/src/app/hero-detail.component.html
index 8216ffb4f04..6881c4115ac 100644
--- a/aio/content/examples/architecture/src/app/hero-detail.component.html
+++ b/aio/content/examples/architecture/src/app/hero-detail.component.html
@@ -1,10 +1,10 @@
 <hr>
-<h4>{{hero.name}} Detail</h4>
+<h2>{{hero.name}} Detail</h2>
 <div>Id: {{hero.id}}</div>
-<label>Name:
-  <!-- #docregion ngModel -->
-  <input [(ngModel)]="hero.name">
-  <!-- #enddocregion ngModel -->
-</label>
-<br />
-<label>Power: <input [(ngModel)]="hero.power"></label>
+<label for="hero-name">Name: </label>
+<!-- #docregion ngModel -->
+<input type="text" id="hero-name" [(ngModel)]="hero.name">
+<!-- #enddocregion ngModel -->
+
+<label for="hero-power">Power: </label>
+<input type="text" for="hero-name" [(ngModel)]="hero.power">
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 8f0433fe54b..b4bccb6cdd7 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.html
+++ b/aio/content/examples/architecture/src/app/hero-list.component.html
@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h2>Hero List</h2>
 
-<p><i>Pick a hero from the list</i></p>
+<p><i>Select a hero from the list to see details.</i></p>
 <ul>
   <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
     {{hero.name}}
diff --git a/aio/content/examples/architecture/src/app/sales-tax.component.ts b/aio/content/examples/architecture/src/app/sales-tax.component.ts
index 9909c28ab80..3daeee49202 100644
--- a/aio/content/examples/architecture/src/app/sales-tax.component.ts
+++ b/aio/content/examples/architecture/src/app/sales-tax.component.ts
@@ -7,11 +7,12 @@ import { TaxRateService } from './tax-rate.service';
   selector:    'app-sales-tax',
   template: `
     <h2>Sales Tax Calculator</h2>
-    <label>Amount: <input #amountBox (change)="0"></label>
-
+    <p><i>Enter a number and press enter to calculate tax.</i></p>
+    <label for="amount-input">Amount: </label>
+    <input type="text" id="amount-input" #amountBox (change)="0">
     <div *ngIf="amountBox.value">
-    The sales tax is
-     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
+    <p>The sales tax is
+     {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}</p>
     </div>
   `,
   providers: [SalesTaxService, TaxRateService]
diff --git a/aio/content/examples/architecture/src/assets/architecture.css b/aio/content/examples/architecture/src/assets/architecture.css
new file mode 100644
index 00000000000..8fd83cfd935
--- /dev/null
+++ b/aio/content/examples/architecture/src/assets/architecture.css
@@ -0,0 +1,23 @@
+ul {
+  padding-left: 0;
+}
+
+li {
+  list-style-type: none;
+  padding: 1rem;
+  background-color: aliceblue;
+  border: 1px solid #444;
+  margin-bottom: .5rem;
+}
+
+li:hover {
+  background-color: #444;
+  color: white;
+  cursor: pointer;
+}
+
+label {
+  display: block;
+  padding-bottom: .4rem;
+  margin-top: 1rem;
+}
diff --git a/aio/content/examples/architecture/src/index.html b/aio/content/examples/architecture/src/index.html
index 93ea2e27dcc..6d0d7e09a53 100644
--- a/aio/content/examples/architecture/src/index.html
+++ b/aio/content/examples/architecture/src/index.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <base href="/">
-
+    <link rel="stylesheet" href="assets/architecture.css">
+  </head>
   <body>
     <app-root></app-root>
   </body>