docs: improve accessibility of form-validation example (#41283)

PR Close #41283

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')),

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>`
 })

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"
+          <input type="text" id="name" class="form-control"
-                formControlName="name" required >
+                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"
+          <input type="text" id="alterEgo" class="form-control"
-              formControlName="alterEgo"  >
+              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,7 +63,9 @@
         </div>
       </div>
 
-      <button type="submit" class="btn btn-default"
+      <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>

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;
+  border-left: 5px solid #a94442;
 }

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"
+          <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"
+        <select id="power"
-                required [(ngModel)]="hero.power" #power="ngModel" >
+                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>
 

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;
+}

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>
 

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").