+ Colors
+
+
+
+ 2000
+ 2100
+
+
+
+ Alaska
+ Alabama
+
+
+
+ English
+ Spanish
+
+
+
+
+
+ Mihiramon
+ Sandiramon
+
+
+
+ Water
+ Coke
+
+
+
+ Light
+ Dark
+
+
+
diff --git a/src/demo-app/a11y/select/select-a11y.scss b/src/demo-app/a11y/select/select-a11y.scss
new file mode 100644
index 00000000000..a47025104e5
--- /dev/null
+++ b/src/demo-app/a11y/select/select-a11y.scss
@@ -0,0 +1,3 @@
+.select-a11y-spacer {
+ margin-bottom: 10px;
+}
diff --git a/src/demo-app/a11y/select/select-a11y.ts b/src/demo-app/a11y/select/select-a11y.ts
new file mode 100644
index 00000000000..21e4fd72744
--- /dev/null
+++ b/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'}
+ ]
+ }
+ ];
+}