demo(input): make character counters aria-live=polite

Author: mmalerba

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

@@ -39,10 +39,11 @@
         </td>
         <td>
           <md-input-container class="demo-full-width">
-            <input mdInput #postalCode maxLength="5" placeholder="Postal Code" value="94043">
+            <input mdInput #postalCode maxLength="5" placeholder="Postal Code" value="94043"
+                   pattern="[0-9]{5}" aria-controls="zipChars">
             <md-hint align="end">
               <md-icon>mode_edit</md-icon>
-              {{postalCode.value.length}} / 5
+              <span id="zipChars" aria-live="polite">{{postalCode.value.length}} / 5</span>
             </md-hint>
           </md-input-container>
         </td>
@@ -152,8 +153,11 @@ <h4>Input</h4>
                #characterCountInputHintExample
                placeholder="Character count (100 max)"
                maxLength="100"
+               aria-controls="helloInputChars"
                value="Hello world. How are you?">
-        <md-hint align="end">{{characterCountInputHintExample.value.length}} / 100</md-hint>
+        <md-hint align="end" id="helloInputChars" aria-live="polite">
+          {{characterCountInputHintExample.value.length}} / 100
+        </md-hint>
       </md-input-container>
     </p>
 
@@ -163,8 +167,11 @@ <h4>Textarea</h4>
         <textarea mdInput
                   #characterCountTextareaHintExample
                   placeholder="Character count (100 max)"
+                  aria-controls="helloTextareaChars"
                   maxLength="100">Hello world. How are you?</textarea>
-        <md-hint align="end">{{characterCountTextareaHintExample.value.length}} / 100</md-hint>
+        <md-hint align="end" id="helloTextareaChars" aria-live="polite">
+          {{characterCountTextareaHintExample.value.length}} / 100
+        </md-hint>
       </md-input-container>
     </p>
   </md-card-content>
@@ -194,8 +201,11 @@ <h4>Textarea</h4>
     </p>
     <p>
       <md-input-container style="width: 100%">
-        <input mdInput #input placeholder="Character count (100 max)" maxLength="100">
-        <md-hint align="end">{{input.value.length}} / 100</md-hint>
+        <input mdInput #input placeholder="Character count (100 max)" maxLength="100"
+               aria-controls="inputChars">
+        <md-hint align="end" id="inputChars" aria-live="polite">
+          {{input.value.length}} / 100
+        </md-hint>
       </md-input-container>
     </p>
     <p>
@@ -217,17 +227,24 @@ <h4>Textarea</h4>
     </p>
     <p>
       <md-input-container hintLabel="Hint label" style="width: 100%">
-        <input mdInput #hintLabelWithCharCount placeholder="Show Hint Label With Character Count">
-        <md-hint align="end">{{hintLabelWithCharCount.value.length}}</md-hint>
+        <input mdInput #hintLabelWithCharCount placeholder="Show Hint Label With Character Count"
+               aria-controls="inputChars2">
+        <md-hint align="end" id="inputChars2" aria-live="polite">
+          {{hintLabelWithCharCount.value.length}}
+        </md-hint>
       </md-input-container>
     </p>
     <p>
       <md-input-container style="margin-bottom: 4em">
-        <textarea mdInput #longHint placeholder="Enter text to count"></textarea>
+        <textarea mdInput #longHint placeholder="Enter text to count"
+                  aria-controls="counterChars"></textarea>
         <md-hint>
-          Enter some text to count how many characters are in it. The character count is shown on the right.
+          Enter some text to count how many characters are in it. The character count is shown on
+          the right.
+        </md-hint>
+        <md-hint align="end" style="white-space: nowrap" id="counterChars" aria-live="polite">
+          Length: {{longHint.value.length}}
         </md-hint>
-        <md-hint align="end" style="white-space: nowrap">Length: {{longHint.value.length}}</md-hint>
       </md-input-container>
     </p>
     <p>
@@ -249,7 +266,8 @@ <h4>Textarea</h4>
       <md-input-container [hideRequiredMarker]="hideRequiredMarker" style="width: 300px">
         <input mdInput
                required
-               [placeholder]="hideRequiredMarker ? 'Required Without Marker' : 'Required With Marker'">
+               [placeholder]="hideRequiredMarker ?
+                   'Required Without Marker' : 'Required With Marker'">
       </md-input-container>
     </p>
     <p>
@@ -327,11 +345,13 @@ <h4>Textarea</h4>
 <md-card class="demo-card demo-basic">
   <md-toolbar color="primary">Forms</md-toolbar>
   <md-card-content>
-    <md-input-container><input mdInput placeholder="reactive" [formControl]="formControl"></md-input-container>
+    <md-input-container><input mdInput placeholder="reactive" [formControl]="formControl">
+    </md-input-container>
     <md-input-container>
       <input mdInput placeholder="template" [(ngModel)]="model" required [disabled]="ctrlDisabled">
     </md-input-container>
-    <button md-raised-button color="primary" (click)="formControl.enabled ? formControl.disable() : formControl.enable()">
+    <button md-raised-button color="primary"
+            (click)="formControl.enabled ? formControl.disable() : formControl.enable()">
       DISABLE REACTIVE CTRL
     </button>
     <button md-raised-button color="primary" (click)="ctrlDisabled = !ctrlDisabled">