Merge pull request #17 from Polymer/features/basic-keyboard-accessibi…

…lity Basic keyboard accessibility via core-a11y-keys.
googlearchive · Jan 14, 2015 · 9a20f28 · 9a20f28
2 parents 2fb6537 + 61c7aa7
commit 9a20f28
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 28 deletions.
diff --git a/bower.json b/bower.json
@@ -4,6 +4,7 @@
   "dependencies": {
     "core-selector": "Polymer/core-selector#master",
     "core-collapse": "Polymer/core-collapse#master",
+    "core-a11y-keys": "Polymer/core-a11y-keys#master",
     "core-item": "Polymer/core-item#master"
   }
 }
diff --git a/core-menu.html b/core-menu.html
@@ -15,7 +15,7 @@
       <core-item icon="dialog" label="Dialog"></core-item>
       <core-item icon="search" label="Search"></core-item>
     </core-menu>
-    
+
 When an item is selected the `core-selected` class is added to it.  The user can
 use the class to add more stylings to the selected item.
 
@@ -56,13 +56,18 @@
 -->
 
 <link rel="import" href="../core-selector/core-selector.html">
+<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
 
-<polymer-element name="core-menu" extends="core-selector" noscript>
+<polymer-element name="core-menu" extends="core-selector" tabindex="0" noscript>
 <template>
 
   <link rel="stylesheet" href="core-menu.css">
-
+
+  <core-a11y-keys target="{{}}" keys="up" on-keys-pressed="{{ selectPrevious }}"></core-a11y-keys>
+  <core-a11y-keys target="{{}}" keys="down" on-keys-pressed="{{ selectNext }}"></core-a11y-keys>
+  <core-a11y-keys target="{{}}" keys="enter" on-keys-pressed="{{ validateSelected }}"></core-a11y-keys>
+
   <shadow></shadow>
-  
+
 </template>
 </polymer-element>
diff --git a/demo.html b/demo.html
@@ -20,7 +20,7 @@
   <link rel="import" href="../core-item/core-item.html">
 
   <style>
-  
+
     body {
       font-family: sans-serif;
       margin: 20px;
@@ -29,7 +29,7 @@
     section {
       width: 300px;
     }
-    
+
     .dark {
       background-color: #333;
     }
@@ -45,57 +45,57 @@
 <body>
 
   <h2>simple menu:</h2>
-  
+
   <section>
-  
+
     <core-menu selected="0">
-    
+
       <core-item icon="settings" label="Settings"></core-item>
       <core-item icon="favorite" label="Favorite"></core-item>
       <core-item icon="account-box" label="Account"></core-item>
-      
+
     </core-menu>
-  
+
   </section>
-  
+
   <h2>simple menu:</h2>
-  
+
   <section class="dark">
-  
+
     <core-menu selected="0">
-    
+
       <core-item icon="settings" label="Settings"></core-item>
       <core-item icon="favorite" label="Favorite"></core-item>
       <core-item icon="account-box" label="Account"></core-item>
-      
+
     </core-menu>
-  
+
   </section>
 
   <h2>submenu:</h2>
-  
+
   <section>
-  
+
     <core-menu selected="0">
-    
+
       <core-submenu icon="settings" label="Topics">
-      
+
         <core-item label="Topic 1"></core-item>
         <core-item label="Topic 2"></core-item>
-        
+
       </core-submenu>
-      
+
       <core-submenu icon="settings" label="Favorites">
-      
+
         <core-item label="Favorite 1"></core-item>
         <core-item label="Favorite 2"></core-item>
         <core-item label="Favorite 3"></core-item>
-        
+
       </core-submenu>
-      
+
     </core-menu>
-    
+
   </section>
-  
+
 </body>
 </html>