feat(tabIndex): make w11k-select accessible via keyboard with the tab…

… key Closes #19
w11k · Feb 2, 2016 · a3196bc · a3196bc
1 parent 797aff0
commit a3196bc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/w11k-select.js b/src/w11k-select.js
@@ -397,6 +397,16 @@ angular.module('w11k.select').directive('w11kSelect', [
           jqWindow.off('resize', adjustHeight);
         });
 
+        scope.onKeyPressedOnDropDownToggle = function ($event) {
+          // enter or space
+          if ($event.keyCode === 13 || $event.keyCode === 32) {
+            $event.preventDefault();
+            $event.stopPropagation();
+
+            scope.dropdown.toggle();
+          }
+        };
+
         function updateHeader() {
           if (angular.isDefined(scope.config.header.text)) {
             jqHeaderText.text(scope.$parent.$eval(scope.config.header.text));

diff --git a/src/w11k-select.tpl.html b/src/w11k-select.tpl.html
@@ -7,7 +7,7 @@
       <span class="header-placeholder text-muted" ng-show="isEmpty()">Filter</span>
       <span class="header-text" ng-hide="isEmpty()"></span>
     </div>
-    <div class="input-group-addon">
+    <div class="input-group-addon" tabindex="0" ng-keypress="onKeyPressedOnDropDownToggle($event)">
       <i class="fa" ng-class="{ 'fa-chevron-down': !dropdown.isOpen(), 'fa-chevron-up': dropdown.isOpen(), 'icon-dropdown-open': !dropdown.isOpen(), 'icon-dropdown-closed': dropdown.isOpen() }"></i>
     </div>
   </div>