(WIP) feat(tabs): make accessible

src/tabs/test/tabs.spec.js

@@ -96,6 +96,28 @@ describe('tabs', function() {
       titles().eq(1).find('a').click();
       expect(scope.deselectFirst).toHaveBeenCalled();
     });
+
+    it('should have aria markup for titles', function() {
+      var t = titles().find('a');
+
+      expect(t.eq(0).attr('tabindex')).toBe('0');
+      expect(t.eq(0).attr('aria-expanded')).toBe('true');
+      expect(t.eq(0).attr('aria-selected')).toBe('true');
+
+      expect(t.eq(1).attr('tabindex')).toBe('-1');
+      expect(t.eq(1).attr('aria-expanded')).toBe('false');
+      expect(t.eq(1).attr('aria-selected')).toBe('false');
+    });
+
+    it('should have aria markup for panes', function() {
+      var t = contents();
+
+      expect(t.eq(0).attr('tabindex')).toBe('0');
+      expect(t.eq(0).attr('aria-hidden')).toBe('false');
+
+      expect(t.eq(1).attr('tabindex')).toBe('-1');
+      expect(t.eq(1).attr('aria-hidden')).toBe('true');
+    });
   });
 
   describe('basics with initial active tab', function() {

template/tabs/tab.html

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

template/tabs/tabset.html

@@ -1,10 +1,8 @@
-
 <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}"
+    <div class="tab-pane" ng-repeat="tab in tabs" ng-class="{active: tab.active}"
+         role="tabpanel" tabindex="{{tab.active ? 0 : -1}}" aria-hidden="{{!tab.active}}"
          tab-content-transclude="tab">
     </div>
   </div>