a11y: add autocomplete accessibility demo (#6254)

Adds a demo page for testing the autocomplete accessibility.

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

@@ -13,6 +13,7 @@ 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';
+import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 
 @NgModule({
   imports: [
@@ -43,6 +44,7 @@ export class AccessibilityRoutingModule {}
     GridListAccessibilityDemo,
     InputAccessibilityDemo,
     RadioAccessibilityDemo,
+    AutocompleteAccessibilityDemo,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -17,6 +17,7 @@ export class AccessibilityHome {}
 export class AccessibilityDemo {
   navItems = [
     {name: 'Home', route: '.'},
+    {name: 'Autocomplete', route: 'autocomplete'},
     {name: 'Button', route: 'button'},
     {name: 'Button toggle', route: 'button-toggle'},
     {name: 'Checkbox', route: 'checkbox'},

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

@@ -0,0 +1,16 @@
+<section>
+  <h2>Filtering and selection</h2>
+  <p>Select your favorite state</p>
+  <md-input-container>
+    <input mdInput placeholder="Search for a state" [mdAutocomplete]="autocomplete"
+      [(ngModel)]="value" (ngModelChange)="filteredStates = filter(value)">
+  </md-input-container>
+
+  <p>Selected value: {{ value }}</p>
+</section>
+
+<md-autocomplete #autocomplete="mdAutocomplete">
+  <md-option *ngFor="let state of filteredStates" [value]="state.name">
+    <span>{{ state.name }}</span>
+  </md-option>
+</md-autocomplete>

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

@@ -0,0 +1,74 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'autocomplete-a11y',
+  templateUrl: 'autocomplete-a11y.html',
+  styleUrls: ['autocomplete-a11y.css'],
+})
+export class AutocompleteAccessibilityDemo {
+  states = [
+    {code: 'AL', name: 'Alabama'},
+    {code: 'AK', name: 'Alaska'},
+    {code: 'AZ', name: 'Arizona'},
+    {code: 'AR', name: 'Arkansas'},
+    {code: 'CA', name: 'California'},
+    {code: 'CO', name: 'Colorado'},
+    {code: 'CT', name: 'Connecticut'},
+    {code: 'DE', name: 'Delaware'},
+    {code: 'FL', name: 'Florida'},
+    {code: 'GA', name: 'Georgia'},
+    {code: 'HI', name: 'Hawaii'},
+    {code: 'ID', name: 'Idaho'},
+    {code: 'IL', name: 'Illinois'},
+    {code: 'IN', name: 'Indiana'},
+    {code: 'IA', name: 'Iowa'},
+    {code: 'KS', name: 'Kansas'},
+    {code: 'KY', name: 'Kentucky'},
+    {code: 'LA', name: 'Louisiana'},
+    {code: 'ME', name: 'Maine'},
+    {code: 'MD', name: 'Maryland'},
+    {code: 'MA', name: 'Massachusetts'},
+    {code: 'MI', name: 'Michigan'},
+    {code: 'MN', name: 'Minnesota'},
+    {code: 'MS', name: 'Mississippi'},
+    {code: 'MO', name: 'Missouri'},
+    {code: 'MT', name: 'Montana'},
+    {code: 'NE', name: 'Nebraska'},
+    {code: 'NV', name: 'Nevada'},
+    {code: 'NH', name: 'New Hampshire'},
+    {code: 'NJ', name: 'New Jersey'},
+    {code: 'NM', name: 'New Mexico'},
+    {code: 'NY', name: 'New York'},
+    {code: 'NC', name: 'North Carolina'},
+    {code: 'ND', name: 'North Dakota'},
+    {code: 'OH', name: 'Ohio'},
+    {code: 'OK', name: 'Oklahoma'},
+    {code: 'OR', name: 'Oregon'},
+    {code: 'PA', name: 'Pennsylvania'},
+    {code: 'RI', name: 'Rhode Island'},
+    {code: 'SC', name: 'South Carolina'},
+    {code: 'SD', name: 'South Dakota'},
+    {code: 'TN', name: 'Tennessee'},
+    {code: 'TX', name: 'Texas'},
+    {code: 'UT', name: 'Utah'},
+    {code: 'VT', name: 'Vermont'},
+    {code: 'VA', name: 'Virginia'},
+    {code: 'WA', name: 'Washington'},
+    {code: 'WV', name: 'West Virginia'},
+    {code: 'WI', name: 'Wisconsin'},
+    {code: 'WY', name: 'Wyoming'},
+  ];
+
+  value: string;
+  filteredStates = this.states;
+
+  filter(value: string) {
+    if (value) {
+      return this.states.filter(state => state.name.toLowerCase().startsWith(value.toLowerCase()));
+    }
+
+    return this.states;
+  }
+}

src/demo-app/a11y/routes.ts

@@ -8,9 +8,11 @@ import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
+import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
+  {path: 'autocomplete', component: AutocompleteAccessibilityDemo},
   {path: 'button', component: ButtonAccessibilityDemo},
   {path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
   {path: 'checkbox', component: CheckboxAccessibilityDemo},