Accessibility for tab component

src/tabs/docs/demo.html

@@ -10,8 +10,8 @@
   <hr />
 
   <tabset>
-    <tab heading="Static title">Static content</tab>
-    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
+    <tab heading="Static title" id="staticTab">Static content</tab>
+    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" id="{{tab.id}}">
       {{tab.content}}
     </tab>
     <tab select="alertMe()">
@@ -25,15 +25,15 @@
   <hr />
 
   <tabset vertical="true" type="pills">
-    <tab heading="Vertical 1">Vertical content 1</tab>
-    <tab heading="Vertical 2">Vertical content 2</tab>
+    <tab heading="Vertical 1" id="verticalTab01">Vertical content 1</tab>
+    <tab heading="Vertical 2" id="verticalTab02">Vertical content 2</tab>
   </tabset>
 
   <hr />
 
   <tabset justified="true">
-    <tab heading="Justified">Justified content</tab>
-    <tab heading="SJ">Short Labeled Justified content</tab>
-    <tab heading="Long Justified">Long Labeled Justified content</tab>
+    <tab heading="Justified" id="justifiedTab">Justified content</tab>
+    <tab heading="SJ" id="shortLabelJustifiedTab">Short Labeled Justified content</tab>
+    <tab heading="Long Justified" id="longJustifiedTab">Long Labeled Justified content</tab>
   </tabset>
 </div>

src/tabs/docs/demo.js

@@ -1,7 +1,7 @@
 angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
   $scope.tabs = [
-    { title:'Dynamic Title 1', content:'Dynamic content 1' },
-    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
+    { title:'Dynamic Title 1', content:'Dynamic content 1', id:'DynamicTab01'},
+    { title:'Dynamic Title 2', content:'Dynamic content 2', id:'DynamicTab02', disabled: true }
   ];
 
   $scope.alertMe = function() {

src/tabs/docs/readme.md

@@ -25,11 +25,15 @@ AngularJS version of the tabs directive.
  * `active` <i class="glyphicon glyphicon-eye-open"></i>
  	_(Defaults: false)_ :
  	Whether tab is currently selected.
-
+ 
  * `disable` <i class="glyphicon glyphicon-eye-open"></i>
- 	_(Defaults: false)_ :
- 	Whether tab is clickable and can be activated.
- 	Note that this was previously the `disabled` attribute, which is now deprecated.
+    _(Defaults: false)_ :
+    Whether tab is clickable and can be activated.
+    Note that this was previously the `disabled` attribute, which is now deprecated.
+
+ * `id` 
+ 	_(Defaults: null)_ :
+ 	An optional attribute to identify the tab and optimize accessibility 
 
  * `select()`
  	_(Defaults: null)_ :
@@ -38,3 +42,4 @@ AngularJS version of the tabs directive.
  * `deselect()`
  	_(Defaults: null)_ :
  	An optional expression called when tab is deactivated.
+

src/tabs/tabs.js

@@ -108,6 +108,7 @@ angular.module('ui.bootstrap.tabs', [])
  * @restrict EA
  *
  * @param {string=} heading The visible heading, or title, of the tab. Set HTML headings with {@link ui.bootstrap.tabs.directive:tabHeading tabHeading}.
+ * @param {string=} id The name of attribute used for refer to tab content.
  * @param {string=} select An expression to evaluate when the tab is selected.
  * @param {boolean=} active A binding, telling whether or not this tab is selected.
  * @param {boolean=} disabled A binding, telling whether or not this tab is disabled.
@@ -192,6 +193,7 @@ angular.module('ui.bootstrap.tabs', [])
     scope: {
       active: '=?',
       heading: '@',
+      id : '@',
       onSelect: '&select', //This callback is called in contentHeadingTransclude
                           //once it inserts the tab's content into the dom
       onDeselect: '&deselect'
@@ -224,17 +226,20 @@ angular.module('ui.bootstrap.tabs', [])
         });
       }
 
-      scope.select = function() {
-        if ( !scope.disabled ) {
-          scope.active = true;
-        }
-      };
-
       tabsetCtrl.addTab(scope);
       scope.$on('$destroy', function() {
         tabsetCtrl.removeTab(scope);
       });
+
+      if ( attrs.id ) {
+        elm.removeAttr('id');
+      }
 
+      scope.select = function() {
+        if ( !scope.disabled ) {
+          scope.active = true;
+        }
+      };
       //We need to transclude later, once the content container is ready.
       //when this link happens, we're inside a tab heading.
       scope.$transcludeFn = transclude;
@@ -263,7 +268,6 @@ angular.module('ui.bootstrap.tabs', [])
     require: '^tabset',
     link: function(scope, elm, attrs) {
       var tab = scope.$eval(attrs.tabContentTransclude);
-
       //Now our tab is ready to be transcluded: both the tab heading area
       //and the tab content area are loaded.  Transclude 'em both.
       tab.$transcludeFn(tab.$parent, function(contents) {
@@ -276,6 +280,7 @@ angular.module('ui.bootstrap.tabs', [])
           }
         });
       });
+      addNavigationHandler(elm);
     }
   };
   function isTabHeading(node) {
@@ -286,6 +291,47 @@ angular.module('ui.bootstrap.tabs', [])
       node.tagName.toLowerCase() === 'data-tab-heading'
     );
   }
+
+  function addNavigationHandler(tab) {
+    var aElements = tab.parent().parent().find('ul').find('a');
+    //set keydown events on tabList item for navigating and selection tabs
+    aElements.on('keyup', function (e) {
+      var aElement = e.target;
+      var tabElement = aElement.parentNode;
+      switch (e.which) {
+        case 37: case 38:
+          if (previousElementSibling(tabElement) != null) {
+            previousElementSibling(tabElement).querySelector('a').focus();
+          } else {
+            aElements[aElements.length - 1].focus();
+          }
+          break;
+        case 39: case 40:
+          if (nextElementSibling(tabElement) !== null) {
+            nextElementSibling(tabElement).querySelector('a').focus();
+          } else {
+            aElements[0].focus();
+          }
+          break;
+        case 13:
+          aElement.click();
+      }
+    });
+  }
+
+  function nextElementSibling(element) {
+    do {
+      element = element.nextSibling;
+    } while (element && element.nodeType !== 1);
+    return element;
+  }
+
+  function previousElementSibling(element) {
+    do {
+      element = element.previousSibling;
+    } while (element && element.nodeType !== 1);
+    return element;
+  }
 })
 
 ;

src/tabs/test/tabs.spec.js

@@ -98,6 +98,70 @@ describe('tabs', function() {
     });
   });
 
+  describe('accessibility', function() {
+    beforeEach(inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.tabs = [
+        { title:'Dynamic Title 1', content:'Dynamic content 1' , id:'DynamicTab01'},
+        { title:'Dynamic Title 2', content:'Dynamic content 2' , id:'DynamicTab02'}
+      ];
+      elm = $compile([
+        '<tabset>',
+        '  <tab heading="Static title" id="staticTab">Static content</tab>',
+        '  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" id="{{tab.id}}">',
+        '      {{tab.content}}',
+        '  </tab>',
+        '</tabset>',
+      ].join('\n'))(scope);
+
+      scope.$apply();
+      return elm;
+    }));
+
+    it('should have aria attributes in title', function() {
+      var tabTitles = titles().find('a');
+
+      expect(tabTitles.eq(0).attr('tabindex')).toBe('0');
+      expect(tabTitles.eq(0).attr('aria-selected')).toBe('true');
+
+      expect(tabTitles.eq(1).attr('tabindex')).toBe('-1');
+      expect(tabTitles.eq(1).attr('aria-selected')).toBe('false');
+
+      expect(tabTitles.eq(2).attr('tabindex')).toBe('-1');
+      expect(tabTitles.eq(2).attr('aria-selected')).toBe('false');
+    });
+
+    it('should have aria attributes in panels', function() {
+      var content = contents();
+
+      expect(content.eq(0).attr('tabindex')).toBe('0');
+      expect(content.eq(0).attr('aria-hidden')).toBe('false');
+
+      expect(content.eq(1).attr('tabindex')).toBe('-1');
+      expect(content.eq(1).attr('aria-hidden')).toBe('true');
+
+      expect(content.eq(2).attr('tabindex')).toBe('-1');
+      expect(content.eq(2).attr('aria-hidden')).toBe('true');
+    });
+
+    it('should have aria reference on content to the title', function() {
+      var tabTitles = titles().find('a');
+      var content = contents();
+
+      expect(tabTitles.eq(0).attr('id')).toBe('staticTab');
+      expect(tabTitles.eq(1).attr('id')).toBe('DynamicTab01');
+      expect(tabTitles.eq(2).attr('id')).toBe('DynamicTab02');
+
+      expect(content.eq(0).attr('aria-labelledby')).toBe('staticTab');
+      expect(content.eq(1).attr('aria-labelledby')).toBe('DynamicTab01');
+      expect(content.eq(2).attr('aria-labelledby')).toBe('DynamicTab02');
+    });
+
+    it('should preserve correct ordering', function() {
+
+    });
+  });
+
   describe('basics with initial active tab', function() {
 
     beforeEach(inject(function($compile, $rootScope) {

template/tabs/tab.html

@@ -1,3 +1,2 @@
-<li ng-class="{active: active, disabled: disabled}">
-  <a href ng-click="select()" tab-heading-transclude>{{heading}}</a>
-</li>
+<li ng-class="{active: active, disabled: disabled}" role="presentation">
+  <a href ng-click="$event.preventDefault(); select()" role="tab" tabindex="{{active ? 0 : -1}}" aria-selected="{{!!active}}" id="{{id}}" tab-heading-transclude>{{heading}}</a></li>

template/tabs/tabset.html

@@ -1,10 +1,14 @@
 <div>
-  <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
+  <ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" role="tablist" ng-transclude></ul>
   <div class="tab-content">
     <div class="tab-pane" 
-         ng-repeat="tab in tabs" 
-         ng-class="{active: tab.active}"
-         tab-content-transclude="tab">
+        ng-repeat="tab in tabs" 
+        ng-class="{active: tab.active}"
+        role="tabpanel" 
+        tabindex="{{tab.active ? 0 : -1}}" 
+        aria-hidden="{{!tab.active}}" 
+        aria-labelledby="{{tab.id}}"
+        tab-content-transclude="tab">
     </div>
   </div>
 </div>