feat(pagination): disable tabbing when disabled

- Add directive for toggling `tabindex="-1"` when ngDisabled is true, and removing tabindex when false

Closes #5984

Author: wesleycho

src/pagination/index.js

@@ -1,4 +1,5 @@
 require('../paging');
+require('../tabindex');
 require('../../template/pagination/pagination.html.js');
 require('./pagination');
 

src/pagination/pagination.js

@@ -1,4 +1,4 @@
-angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging'])
+angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging', 'ui.bootstrap.tabindex'])
 .controller('UibPaginationController', ['$scope', '$attrs', '$parse', 'uibPaging', 'uibPaginationConfig', function($scope, $attrs, $parse, uibPaging, uibPaginationConfig) {
   var ctrl = this;
   // Setup configuration parameters

src/tabindex/index.js

@@ -0,0 +1,7 @@
+require('./tabindex');
+
+var MODULE_NAME = 'ui.bootstrap.module.tabindex';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.tabindex']);
+
+module.exports = MODULE_NAME;

src/tabindex/tabindex.js

@@ -0,0 +1,12 @@
+angular.module('ui.bootstrap.tabindex', [])
+
+.directive('uibTabindexToggle', function() {
+  return {
+    restrict: 'A',
+    link: function(scope, elem, attrs) {
+      attrs.$observe('disabled', function(disabled) {
+        attrs.$set('tabindex', disabled ? -1 : null);
+      });
+    }
+  };
+});

src/tabindex/test/tabindex.spec.js

@@ -0,0 +1,23 @@
+describe('tabindex toggle directive', function() {
+  var $rootScope, element;
+  beforeEach(module('ui.bootstrap.tabindex'));
+  beforeEach(inject(function($compile, _$rootScope_) {
+    $rootScope = _$rootScope_;
+    element = $compile('<a href uib-tabindex-toggle ng-disabled="disabled">foo</a>')($rootScope);
+    $rootScope.$digest();
+  }));
+
+  it('should toggle the tabindex on disabled toggle', function() {
+    expect(element.prop('tabindex')).toBe(0);
+
+    $rootScope.disabled = true;
+    $rootScope.$digest();
+
+    expect(element.prop('tabindex')).toBe(-1);
+
+    $rootScope.disabled = false;
+    $rootScope.$digest();
+
+    expect(element.prop('tabindex')).toBe(0);
+  });
+});

template/pagination/pagination.html

@@ -1,7 +1,7 @@
 <ul class="pagination">
-  <li ng-if="::boundaryLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-first"><a href ng-click="selectPage(1, $event)">{{::getText('first')}}</a></li>
-  <li ng-if="::directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-prev"><a href ng-click="selectPage(page - 1, $event)">{{::getText('previous')}}</a></li>
-  <li ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" class="pagination-page"><a href ng-click="selectPage(page.number, $event)">{{page.text}}</a></li>
-  <li ng-if="::directionLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-next"><a href ng-click="selectPage(page + 1, $event)">{{::getText('next')}}</a></li>
-  <li ng-if="::boundaryLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-last"><a href ng-click="selectPage(totalPages, $event)">{{::getText('last')}}</a></li>
+  <li ng-if="::boundaryLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-first"><a href ng-click="selectPage(1, $event)" ng-disabled="noPrevious()||ngDisabled" uib-tabindex-toggle>{{::getText('first')}}</a></li>
+  <li ng-if="::directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="pagination-prev"><a href ng-click="selectPage(page - 1, $event)" ng-disabled="noPrevious()||ngDisabled" uib-tabindex-toggle>{{::getText('previous')}}</a></li>
+  <li ng-repeat="page in pages track by $index" ng-class="{active: page.active,disabled: ngDisabled&&!page.active}" class="pagination-page"><a href ng-click="selectPage(page.number, $event)" ng-disabled="ngDisabled&&!page.active" uib-tabindex-toggle>{{page.text}}</a></li>
+  <li ng-if="::directionLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-next"><a href ng-click="selectPage(page + 1, $event)" ng-disabled="noNext()||ngDisabled" uib-tabindex-toggle>{{::getText('next')}}</a></li>
+  <li ng-if="::boundaryLinks" ng-class="{disabled: noNext()||ngDisabled}" class="pagination-last"><a href ng-click="selectPage(totalPages, $event)" ng-disabled="noNext()||ngDisabled" uib-tabindex-toggle>{{::getText('last')}}</a></li>
 </ul>