Add another example for forms

Author: tinayuangao

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

@@ -12,6 +12,7 @@ import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {
   DialogAccessibilityDemo,
+  DialogAddressFormDialog,
   DialogFruitExampleDialog,
   DialogNeptuneExampleDialog,
   DialogNeptuneIFrameDialog,
@@ -56,6 +57,7 @@ export class AccessibilityRoutingModule {}
     ChipsAccessibilityDemo,
     DatepickerAccessibilityDemo,
     DialogAccessibilityDemo,
+    DialogAddressFormDialog,
     DialogFruitExampleDialog,
     DialogNeptuneExampleDialog,
     DialogNeptuneIFrameDialog,
@@ -70,6 +72,7 @@ export class AccessibilityRoutingModule {}
   ],
   entryComponents: [
     DialogAccessibilityDemo,
+    DialogAddressFormDialog,
     DialogFruitExampleDialog,
     DialogNeptuneExampleDialog,
     DialogNeptuneIFrameDialog,

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

@@ -21,3 +21,11 @@ <h2>Neptune</h2>
   </p>
   <button md-button (click)="openNeptuneDialog()">Learn Neptune</button>
 </section>
+
+<section>
+  <h2>Address form</h2>
+  <p>
+    Active the button to fill out shipping address information in a dialog.
+  </p>
+  <button md-button (click)="openAddressDialog()">Add address</button>
+</section>

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

@@ -27,6 +27,10 @@ export class DialogAccessibilityDemo {
   openNeptuneDialog() {
     this.dialog.open(DialogNeptuneExampleDialog);
   }
+
+  openAddressDialog() {
+    this.dialog.open(DialogAddressFormDialog);
+  }
 }
 
 @Component({
@@ -39,10 +43,7 @@ export class DialogFruitExampleDialog {}
 @Component({
   moduleId: module.id,
   selector: 'dialog-welcome-a11y',
-  template: `Welcome to Angular Material dialog demo page!
-  <md-dialog-actions>
-    <button md-raised-button color="primary" md-dialog-close>Close</button>
-  </md-dialog-actions>`
+  templateUrl: 'dialog-welcome-a11y.html'
 })
 export class DialogWelcomeExampleDialog {}
 
@@ -69,5 +70,11 @@ export class DialogNeptuneExampleDialog {
   ],
   templateUrl: './dialog-neptune-iframe-a11y.html'
 })
-export class DialogNeptuneIFrameDialog {
-}
+export class DialogNeptuneIFrameDialog {}
+
+@Component({
+  moduleId: module.id,
+  selector: 'dialog-address-form-a11y',
+  templateUrl: 'dialog-address-form-a11y.html'
+})
+export class DialogAddressFormDialog {}

src/demo-app/a11y/dialog/dialog-address-form-a11y.html

@@ -0,0 +1,45 @@
+<h2 md-dialog-title>Company</h2>
+
+<md-dialog-content>
+  <form class="example-form">
+    <md-form-field class="example-full-width">
+      <input mdInput placeholder="Company (disabled)" disabled value="Google">
+    </md-form-field>
+
+    <table class="example-full-width" cellspacing="0"><tr>
+      <td><md-form-field class="example-full-width">
+        <input mdInput placeholder="First name">
+      </md-form-field></td>
+      <td><md-form-field class="example-full-width">
+        <input mdInput placeholder="Long Last Name That Will Be Truncated">
+      </md-form-field></td>
+    </tr></table>
+
+    <p>
+      <md-form-field class="example-full-width">
+        <textarea mdInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
+      </md-form-field>
+      <md-form-field class="example-full-width">
+        <textarea mdInput placeholder="Address 2"></textarea>
+      </md-form-field>
+    </p>
+
+    <table class="example-full-width" cellspacing="0"><tr>
+      <td><md-form-field class="example-full-width">
+        <input mdInput placeholder="City">
+      </md-form-field></td>
+      <td><md-form-field class="example-full-width">
+        <input mdInput placeholder="State">
+      </md-form-field></td>
+      <td><md-form-field class="example-full-width">
+        <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
+        <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
+      </md-form-field></td>
+    </tr></table>
+  </form>
+</md-dialog-content>
+
+<md-dialog-actions>
+  <button md-raised-button color="primary" md-dialog-close>Submit</button>
+  <button md-raised-button md-dialog-close>Close</button>
+</md-dialog-actions>

src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html

@@ -5,8 +5,5 @@ <h2 md-dialog-title>Neptune</h2>
 </md-dialog-content>
 
 <md-dialog-actions>
-  <button
-          md-raised-button
-          color="primary"
-          md-dialog-close>Close</button>
+  <button md-raised-button color="primary" md-dialog-close>Close</button>
 </md-dialog-actions>

src/demo-app/a11y/dialog/dialog-welcome-a11y.html

@@ -1,3 +1,13 @@
-Welcome to Angular Material dialog demo page!
+<h2>Welcome to Angular Material dialog demo page!</h2>
+
+<p>
+  The Web is fundamentally designed to work for all people, whatever their hardware, software,
+  language, culture, location, or physical or mental ability. When the Web meets this goal, it is
+  accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
+</p>
+<p>
+  The mission of the Web Accessibility Initiative (WAI) is to lead the Web to its full potential to
+  be accessible, enabling people with disabilities to participate equally on the Web.
+</p>
 
 <button md-button color="primary" md-dialog-close>Close</button>

src/lib/dialog/dialog-config.ts

@@ -69,5 +69,6 @@ export class MdDialogConfig {
   /** ID of the element that describes the dialog.  */
   ariaDescribedBy?: string | null = null;
 
+
   // TODO(jelbourn): add configuration for lifecycle hooks, ARIA labelling.
 }