demo(input): add input a11y examples (#6181)

* add input a11y examples

* address comments

src/demo-app/a11y/a11y-module.ts

@@ -4,7 +4,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
 import {DemoMaterialModule} from '../demo-material-module';
-import {AccessibilityHome, AccessibilityDemo} from './a11y';
+import {AccessibilityDemo, AccessibilityHome} from './a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
@@ -12,6 +12,7 @@ import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
+import {InputAccessibilityDemo} from './input/input-a11y';
 
 @NgModule({
   imports: [
@@ -40,6 +41,7 @@ export class AccessibilityRoutingModule {}
     ChipsAccessibilityDemo,
     DatepickerAccessibilityDemo,
     GridListAccessibilityDemo,
+    InputAccessibilityDemo,
     RadioAccessibilityDemo,
   ]
 })

src/demo-app/a11y/a11y.ts

@@ -23,6 +23,7 @@ export class AccessibilityDemo {
     {name: 'Chips', route: 'chips'},
     {name: 'Datepicker', route: 'datepicker'},
     {name: 'Grid list', route: 'grid-list'},
+    {name: 'Input', route: 'input'},
     {name: 'Radio buttons', route: 'radio'},
   ];
 }

src/demo-app/a11y/input/input-a11y.html

@@ -0,0 +1,57 @@
+<section>
+  <h2>Basic input box (e.g. name field)</h2>
+  <md-input-container floatPlaceholder="never">
+    <input mdInput placeholder="First name" [(ngModel)]="firstName">
+  </md-input-container>
+  <md-input-container floatPlaceholder="never">
+    <input mdInput placeholder="Last name" [(ngModel)]="lastName">
+  </md-input-container>
+</section>
+
+<section>
+  <h2>Input with hint (e.g. password field)</h2>
+  <md-input-container hideRequiredMarker>
+    <input mdInput [type]="passwordType" placeholder="Password" [(ngModel)]="password" required
+           #passwordModel="ngModel">
+    <button md-icon-button mdSuffix [attr.aria-label]="passwordToggleLabel"
+            (click)="showPassword = !showPassword">
+      <md-icon>{{passwordToggleIcon}}</md-icon>
+    </button>
+    <md-hint>Hint: favorite color</md-hint>
+    <md-error *ngIf="passwordModel.hasError('required')">You must enter your password.</md-error>
+  </md-input-container>
+</section>
+
+<section>
+  <h2>Input with error message (e.g. email field)</h2>
+  <md-input-container>
+    <input mdInput type="email" placeholder="Email" [(ngModel)]="email" required email
+           #emailModel="ngModel">
+    <md-error *ngIf="emailModel.hasError('required')">You must enter your email.</md-error>
+    <md-error *ngIf="emailModel.hasError('email')">Not a valid email address.</md-error>
+  </md-input-container>
+</section>
+
+<section>
+  <h2>Input with prefix & suffix (e.g. currency converter)</h2>
+  <md-input-container floatPlaceholder="always">
+    <input mdInput type="number" placeholder="USD" [(ngModel)]="usd">
+    <span mdPrefix>$</span>
+  </md-input-container>
+  =
+  <md-input-container floatPlaceholder="always">
+    <input mdInput type="number" placeholder="JPY" [(ngModel)]="jpy">
+    <span mdPrefix>‎¥‎</span>
+  </md-input-container>
+  (as of 7/31/2017)
+</section>
+
+<section>
+  <h2>Textarea input (e.g.  comment box)</h2>
+  <md-input-container>
+    <textarea mdInput aria-label="Comment" [(ngModel)]="comment" mdTextareaAutosize
+              [maxlength]="commentMax" #commentModel="ngModel"></textarea>
+    <md-hint>Leave us a comment!</md-hint>
+    <md-hint align="end">{{commentCount}}/{{commentMax}}</md-hint>
+  </md-input-container>
+</section>

src/demo-app/a11y/input/input-a11y.ts

@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+
+const USD_TO_JPY = 110.29;
+
+@Component({
+  moduleId: module.id,
+  selector: 'input-a11y',
+  templateUrl: 'input-a11y.html',
+})
+export class InputAccessibilityDemo {
+  firstName: string;
+  lastName: string;
+  password: string;
+  showPassword = false;
+  email: string;
+  usd: number;
+  comment: string;
+  commentMax = 200;
+
+  get passwordType() { return this.showPassword ? 'text' : 'password'; }
+
+  get passwordToggleLabel() { return this.showPassword ? 'Hide password' : 'Reveal password'; }
+
+  get passwordToggleIcon() { return this.showPassword ? 'visibility_off' : 'visibility'; }
+
+  get jpy() { return this.usd ? this.usd * USD_TO_JPY : this.usd; }
+  set jpy(value) { this.usd = value ? value / USD_TO_JPY : value; }
+
+  get commentCount() { return this.comment ? this.comment.length : 0; }
+}

src/demo-app/a11y/routes.ts

@@ -7,6 +7,7 @@ import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
+import {InputAccessibilityDemo} from './input/input-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
@@ -16,5 +17,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'chips', component: ChipsAccessibilityDemo},
   {path: 'datepicker', component: DatepickerAccessibilityDemo},
   {path: 'grid-list', component: GridListAccessibilityDemo},
+  {path: 'input', component: InputAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
 ];