From 253ed5d4844cc6233d76ad32416f99a57b1a48c0 Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Fri, 19 Mar 2021 12:52:16 -0400
Subject: [PATCH] docs: improve accessibility of form-validation example
 (#41283)

PR Close #41283
---
 .../form-validation/e2e/src/app.e2e-spec.ts   |  2 +-
 .../form-validation/src/app/app.component.ts  |  3 +-
 .../hero-form-reactive.component.html         | 18 +++++----
 .../template/hero-form-template.component.css |  4 +-
 .../hero-form-template.component.html         | 39 +++++++++++--------
 .../form-validation/src/assets/forms.css      | 21 ++++++++++
 .../examples/form-validation/src/index.html   |  1 -
 aio/content/guide/form-validation.md          |  2 +-
 8 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts b/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts
index f81c63b253..ffc49351df 100644
--- a/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts
@@ -54,7 +54,7 @@ function getPage(sectionTag: string) {
   page = {
     section,
     form: section.element(by.css('form')),
-    title: section.element(by.css('h1')),
+    title: section.element(by.css('h2')),
     nameInput: section.element(by.css('#name')),
     alterEgoInput: section.element(by.css('#alterEgo')),
     powerSelect: section.element(by.css('#power')),
diff --git a/aio/content/examples/form-validation/src/app/app.component.ts b/aio/content/examples/form-validation/src/app/app.component.ts
index dd7141f45e..14e9cd805e 100644
--- a/aio/content/examples/form-validation/src/app/app.component.ts
+++ b/aio/content/examples/form-validation/src/app/app.component.ts
@@ -3,7 +3,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: `<app-hero-form-template></app-hero-form-template>
+  template: `<h1>Form validation example</h1>
+             <app-hero-form-template></app-hero-form-template>
              <hr>
              <app-hero-form-reactive></app-hero-form-reactive>`
 })
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
index 0878c76073..4589ece3de 100644
--- a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
@@ -1,7 +1,7 @@
  <!-- #docregion -->
 <div class="container">
 
-  <h1>Reactive Form</h1>
+  <h2>Reactive Form</h2>
 
   <form [formGroup]="heroForm" #formDir="ngForm">
 
@@ -12,8 +12,8 @@
 
           <label for="name">Name</label>
           <!-- #docregion name-with-error-msg -->
-          <input id="name" class="form-control"
-                formControlName="name" required >
+          <input type="text" id="name" class="form-control"
+                formControlName="name" required>
 
           <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="alert alert-danger">
@@ -33,8 +33,8 @@
 
         <div class="form-group">
           <label for="alterEgo">Alter Ego</label>
-          <input id="alterEgo" class="form-control"
-              formControlName="alterEgo"  >
+          <input type="text" id="alterEgo" class="form-control"
+              formControlName="alterEgo">
 
           <div *ngIf="alterEgo.pending">Validating...</div>
           <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
@@ -54,7 +54,7 @@
       <div class="form-group">
         <label for="power">Hero Power</label>
         <select id="power" class="form-control"
-            formControlName="power" required >
+            formControlName="power" required>
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
 
@@ -63,8 +63,10 @@
         </div>
       </div>
 
-      <button type="submit" class="btn btn-default"
-             [disabled]="heroForm.invalid">Submit</button>
+      <p>Complete the form to enable the Submit button.</p>
+      <button type="submit"
+              class="btn btn-default"
+              [disabled]="heroForm.invalid">Submit</button>
       <button type="button" class="btn btn-default"
              (click)="formDir.resetForm({})">Reset</button>
     </div>
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.css b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.css
index 9699072894..28b0db1992 100644
--- a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.css
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.css
@@ -1,4 +1,4 @@
 /* #docregion */
 .cross-validation-error input {
-  border-left: 5px solid red;
-}
\ No newline at end of file
+  border-left: 5px solid #a94442;
+}
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
index ff7dd31981..9f5f62d640 100644
--- a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
@@ -1,7 +1,7 @@
  <!-- #docregion -->
-<div class="container">
+<div>
 
-  <h1>Template-Driven Form</h1>
+  <h2>Template-Driven Form</h2>
   <!-- #docregion cross-validation-register-validator -->
   <form #heroForm="ngForm" appIdentityRevealed>
   <!-- #enddocregion cross-validation-register-validator -->
@@ -11,13 +11,13 @@
           <label for="name">Name</label>
           <!-- #docregion name-with-error-msg -->
           <!-- #docregion name-input -->
-          <input id="name" name="name" class="form-control"
+          <input type="text" id="name" name="name" class="form-control"
                 required minlength="4" appForbiddenName="bob"
-                [(ngModel)]="hero.name" #name="ngModel" >
+                [(ngModel)]="hero.name" #name="ngModel">
           <!-- #enddocregion name-input -->
 
           <div *ngIf="name.invalid && (name.dirty || name.touched)"
-              class="alert alert-danger">
+              class="alert">
 
             <div *ngIf="name.errors.required">
               Name is required.
@@ -35,14 +35,16 @@
 
         <div class="form-group">
           <label for="alterEgo">Alter Ego</label>
-          <input id="alterEgo" class="form-control" name="alterEgo"
-                #alterEgo="ngModel"
-                [(ngModel)]="hero.alterEgo"
-                [ngModelOptions]="{ updateOn: 'blur' }"
-                appUniqueAlterEgo>
+          <input type="text"
+                 id="alterEgo"
+                 name="alterEgo"
+                 #alterEgo="ngModel"
+                 [(ngModel)]="hero.alterEgo"
+                 [ngModelOptions]="{ updateOn: 'blur' }"
+                 appUniqueAlterEgo>
 
           <div *ngIf="alterEgo.pending">Validating...</div>
-          <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
+          <div *ngIf="alterEgo.invalid" class="alert alter-ego-errors">
             <div *ngIf="alterEgo.errors?.uniqueAlterEgo">
               Alter ego is already taken.
             </div>
@@ -50,7 +52,7 @@
         </div>
 
         <!-- #docregion cross-validation-error-message -->
-        <div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
+        <div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert">
             Name cannot match alter ego.
         </div>
         <!-- #enddocregion cross-validation-error-message -->
@@ -58,19 +60,22 @@
 
       <div class="form-group">
         <label for="power">Hero Power</label>
-        <select id="power" name="power" class="form-control"
-                required [(ngModel)]="hero.power" #power="ngModel" >
+        <select id="power"
+                name="power"
+                required [(ngModel)]="hero.power"
+                #power="ngModel">
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
 
-        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
+        <div *ngIf="power.errors && power.touched" class="alert">
           <div *ngIf="power.errors.required">Power is required.</div>
         </div>
       </div>
 
-      <button type="submit" class="btn btn-default"
+      <p>Complete the form to enable the Submit button.</p>
+      <button type="submit"
               [disabled]="heroForm.invalid">Submit</button>
-      <button type="button" class="btn btn-default"
+      <button type="button"
               (click)="heroForm.resetForm({})">Reset</button>
     </div>
 
diff --git a/aio/content/examples/form-validation/src/assets/forms.css b/aio/content/examples/form-validation/src/assets/forms.css
index 1d388f656d..51cc24d82f 100644
--- a/aio/content/examples/form-validation/src/assets/forms.css
+++ b/aio/content/examples/form-validation/src/assets/forms.css
@@ -6,3 +6,24 @@
 .ng-invalid:not(form)  {
   border-left: 5px solid #a94442; /* red */
 }
+
+.alert div {
+  background-color: #fed3d3;
+  color: #820000;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: .5rem;
+}
+
+select {
+  width: 100%;
+  padding: .5rem;
+}
diff --git a/aio/content/examples/form-validation/src/index.html b/aio/content/examples/form-validation/src/index.html
index 859ac12299..96aad18ffe 100644
--- a/aio/content/examples/form-validation/src/index.html
+++ b/aio/content/examples/form-validation/src/index.html
@@ -4,7 +4,6 @@
     <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="assets/forms.css">
   </head>
 
diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md
index 4de47d8ab7..a66c2a9150 100644
--- a/aio/content/guide/form-validation.md
+++ b/aio/content/guide/form-validation.md
@@ -10,7 +10,7 @@ Before reading about form validation, you should have a basic understanding of t
 
 * [TypeScript](https://www.typescriptlang.org/ "The TypeScript language") and HTML5  programming.
 
-* Fundamental concepts of [Angular app design](guide/architecture "Introduction to Angular app-design concepts").
+* Fundamental concepts of [Angular application design](guide/architecture "Introduction to Angular application-design concepts").
 
 * The [two types of forms that Angular supports](guide/forms-overview "Introduction to Angular forms").