demo: add select a11y demo

Adds an a11y demo page for `md-select`.

Fixes #6119.

Author: crisbeto

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

@@ -15,6 +15,7 @@ import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {SelectAccessibilityDemo} from './select/select-a11y';
 
 
 @NgModule({
@@ -48,6 +49,7 @@ export class AccessibilityRoutingModule {}
     InputAccessibilityDemo,
     RadioAccessibilityDemo,
     SliderAccessibilityDemo,
+    SelectAccessibilityDemo,
   ]
 })
 export class AccessibilityDemoModule {}

src/demo-app/a11y/a11y.ts

@@ -27,5 +27,6 @@ export class AccessibilityDemo {
     {name: 'Input', route: 'input'},
     {name: 'Radio buttons', route: 'radio'},
     {name: 'Slider', route: 'slider'},
+    {name: 'Select', route: 'select'},
   ];
 }

src/demo-app/a11y/routes.ts

@@ -10,6 +10,7 @@ import {AccessibilityHome} from './a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {InputAccessibilityDemo} from './input/input-a11y';
 import {SliderAccessibilityDemo} from './slider/slider-a11y';
+import {SelectAccessibilityDemo} from './select/select-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
@@ -23,4 +24,5 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'input', component: InputAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
   {path: 'slider', component: SliderAccessibilityDemo},
+  {path: 'select', component: SelectAccessibilityDemo},
 ];

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

@@ -0,0 +1,72 @@
+<section>
+  <h2>Single selection</h2>
+  <p>Select your favorite color</p>
+
+  <md-select placeholder="Colors" [(ngModel)]="selectedColor">
+    <md-option *ngFor="let color of colors" [value]="color.value">
+      {{ color.label }}
+    </md-option>
+  </md-select>
+</section>
+
+<section>
+  <h2>Multiple selection</h2>
+  <p>Pick toppings for your pizza</p>
+
+  <md-select placeholder="Toppings" [(ngModel)]="selectedTopping" multiple>
+    <md-option *ngFor="let topping of toppings" [value]="topping.value">
+      {{ topping.label }}
+    </md-option>
+  </md-select>
+</section>
+
+<section>
+  <h2>Grouped options</h2>
+  <p>Pick your Pokemon</p>
+
+  <md-select placeholder="Pokemon" [(ngModel)]="selectedPokemon">
+    <md-optgroup *ngFor="let group of pokemon" [label]="group.label">
+      <md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
+        {{ creature.label }}
+      </md-option>
+    </md-optgroup>
+  </md-select>
+</section>
+
+<section>
+  <h2>Colors</h2>
+
+  <div class="select-a11y-spacer">
+    <md-select placeholder="Primary" color="primary">
+      <md-option value="one">One</md-option>
+      <md-option value="two">Two</md-option>
+    </md-select>
+
+    <md-select placeholder="Accent" color="accent">
+      <md-option value="one">One</md-option>
+      <md-option value="two">Two</md-option>
+    </md-select>
+
+    <md-select placeholder="Warn" color="warn">
+      <md-option value="one">One</md-option>
+      <md-option value="two">Two</md-option>
+    </md-select>
+  </div>
+
+  <div class="select-a11y-spacer">
+    <md-select placeholder="Primary" color="primary" multiple>
+      <md-option value="one">One</md-option>
+      <md-option value="two">Two</md-option>
+    </md-select>
+
+    <md-select placeholder="Accent" color="accent" multiple>
+      <md-option value="one">One</md-option>
+      <md-option value="two">Two</md-option>
+    </md-select>
+
+    <md-select placeholder="Warn" color="warn" multiple>
+      <md-option value="one">One</md-option>
+      <md-option value="two">Two</md-option>
+    </md-select>
+  </div>
+</section>

src/demo-app/a11y/select/select-a11y.scss

@@ -0,0 +1,3 @@
+.select-a11y-spacer {
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,72 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'select-a11y',
+  templateUrl: 'select-a11y.html',
+  styleUrls: ['select-a11y.css'],
+})
+export class SelectAccessibilityDemo {
+  selectedColor: string;
+  selectedTopping: string[];
+  selectedPokemon: string;
+
+  colors = [
+    {value: 'red', label: 'Red'},
+    {value: 'green', label: 'Green'},
+    {value: 'blue', label: 'Blue'},
+    {value: 'cyan', label: 'Cyan'},
+    {value: 'magenta', label: 'Magenta'},
+    {value: 'yellow', label: 'Yellow'},
+    {value: 'black', label: 'Black'},
+  ];
+
+  toppings = [
+    {value: 'pepperoni', label: 'Pepperoni'},
+    {value: 'mushrooms', label: 'Mushrooms'},
+    {value: 'onions', label: 'Onions'},
+    {value: 'sausage', label: 'Sausage'},
+    {value: 'bacon', label: 'Bacon'},
+    {value: 'cheese', label: 'Cheese'},
+    {value: 'olives', label: 'Olives'},
+    {value: 'peppers', label: 'Peppers'},
+    {value: 'pineapple', label: 'Pineapple'},
+    {value: 'spinach', label: 'Spinach'},
+  ];
+
+  pokemon = [
+    {
+      label: 'Grass',
+      pokemon: [
+        {value: 'bulbasaur', label: 'Bulbasaur'},
+        {value: 'oddish', label: 'Oddish'},
+        {value: 'bellsprout', label: 'Bellsprout'}
+      ]
+    },
+    {
+      label: 'Water',
+      pokemon: [
+        {value: 'squirtle', label: 'Squirtle'},
+        {value: 'psyduck', label: 'Psyduck'},
+        {value: 'horsea', label: 'Horsea'}
+      ]
+    },
+    {
+      label: 'Fire',
+      disabled: true,
+      pokemon: [
+        {value: 'charmander', label: 'Charmander'},
+        {value: 'vulpix', label: 'Vulpix'},
+        {value: 'flareon', label: 'Flareon'}
+      ]
+    },
+    {
+      label: 'Psychic',
+      pokemon: [
+        {value: 'mew', label: 'Mew'},
+        {value: 'mewtwo', label: 'Mewtwo'}
+      ]
+    }
+  ];
+}