Skip to content

Commit ee04132

Browse files
JLLeitschuhJLLeitschuh
committed
feat(pagination): Accessibiliy & Keyboard Support to Pagination Controls
 - Adds appropriate aria labels to the pagination controls. - Styles Pagination Buttons using Bootstrap. - Adds focus managment on the buttons so that when they are disabled focus shifts to the center input box.
1 parent 377485a commit ee04132

File tree

3 files changed

+139
-14
lines changed

3 files changed

+139
-14
lines changed

‎src/features/pagination/js/pagination.js

+32
Original file line numberDiff line numberDiff line change
@@ -343,10 +343,14 @@
343343
scope: true,
344344
require: '^uiGrid',
345345
link: function ($scope, $elm, $attr, uiGridCtrl) {
346+
var defaultFocusElementSelector = '.ui-grid-pager-control-input';
347+
$scope.aria = i18nService.getSafeText('pagination.aria'); //Returns an object with all of the aria labels
348+
346349
$scope.paginationApi = uiGridCtrl.grid.api.pagination;
347350
$scope.sizesLabel = i18nService.getSafeText('pagination.sizes');
348351
$scope.totalItemsLabel = i18nService.getSafeText('pagination.totalItems');
349352
$scope.paginationOf = i18nService.getSafeText('pagination.of');
353+
$scope.paginationThrough = i18nService.getSafeText('pagination.through');
350354

351355
var options = uiGridCtrl.grid.options;
352356

@@ -414,6 +418,34 @@
414418
$scope.cantPageBackward = function () {
415419
return options.paginationCurrentPage <= 1;
416420
};
421+
422+
var focusToInputIf = function(condition){
423+
if (condition){
424+
gridUtil.focus.bySelector($elm, defaultFocusElementSelector);
425+
}
426+
};
427+
428+
//Takes care of setting focus to the middle element when focus is lost
429+
$scope.pageFirstPageClick = function () {
430+
$scope.paginationApi.seek(1);
431+
focusToInputIf($scope.cantPageBackward());
432+
};
433+
434+
$scope.pagePreviousPageClick = function () {
435+
$scope.paginationApi.previousPage();
436+
focusToInputIf($scope.cantPageBackward());
437+
};
438+
439+
$scope.pageNextPageClick = function () {
440+
$scope.paginationApi.nextPage();
441+
focusToInputIf($scope.cantPageForward());
442+
};
443+
444+
$scope.pageLastPageClick = function () {
445+
$scope.paginationApi.seek($scope.paginationApi.getTotalPages());
446+
focusToInputIf($scope.cantPageToLast());
447+
};
448+
417449
}
418450
};
419451
}

‎src/features/pagination/less/pagination.less

+19
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@import "../../../less/variables";
2+
@import "../../../less/elements";
3+
@import (reference) "../../../less/bootstrap/bootstrap";
4+
15
.ui-grid-pager-panel {
26
position: absolute;
37
left: 0;
@@ -20,14 +24,26 @@
2024
button {
2125
height: 25px;
2226
min-width: 26px;
27+
#ui-grid-twbs > .btn;
28+
#ui-grid-twbs > .button-variant(@paginationButtonColor, @paginationButtonBackgroundColor, @paginationButtonBorderColor);
2329
}
2430

2531
input {
32+
#ui-grid-twbs > .form-control();
33+
#ui-grid-twbs > .input-sm ();
34+
display: inline;
2635
height: 26px;
2736
width: 50px;
2837
vertical-align: top;
2938
}
3039

40+
.ui-grid-pager-max-pages-number{
41+
vertical-align: bottom;
42+
> * {
43+
vertical-align: middle;
44+
}
45+
}
46+
3147
.first-bar {
3248
width: 10px;
3349
border-left: 2px solid #4d4d4d;
@@ -75,8 +91,11 @@
7591
float: left;
7692

7793
select {
94+
#ui-grid-twbs > .form-control;
95+
#ui-grid-twbs > .input-sm ();
7896
height: 26px;
7997
width: 60px;
98+
display: inline;
8099
}
81100

82101
.ui-grid-pager-row-count-label {

‎src/features/pagination/templates/pagination.html

+88-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,97 @@
1-
<div class="ui-grid-pager-panel" ui-grid-pager ng-show="grid.options.enablePaginationControls">
2-
<div class="ui-grid-pager-container">
3-
<div class="ui-grid-pager-control">
4-
<button type="button" class="ui-grid-pager-first" ng-click="paginationApi.seek(1)" ng-disabled="cantPageBackward()"><div class="first-triangle"><div class="first-bar"></div></div></button>
5-
<button type="button" class="ui-grid-pager-previous" ng-click="paginationApi.previousPage()" ng-disabled="cantPageBackward()"><div class="first-triangle prev-triangle"></div></button>
6-
<input type="number" ng-model="grid.options.paginationCurrentPage" min="1" max="{{ paginationApi.getTotalPages() }}" required />
7-
<span class="ui-grid-pager-max-pages-number" ng-show="paginationApi.getTotalPages() > 0">/ {{ paginationApi.getTotalPages() }}</span>
8-
<button type="button" class="ui-grid-pager-next" ng-click="paginationApi.nextPage()" ng-disabled="cantPageForward()"><div class="last-triangle next-triangle"></div></button>
9-
<button type="button" class="ui-grid-pager-last" ng-click="paginationApi.seek(paginationApi.getTotalPages())" ng-disabled="cantPageToLast()"><div class="last-triangle"><div class="last-bar"></div></div></button>
1+
<div
2+
role="contentinfo"
3+
class="ui-grid-pager-panel"
4+
ui-grid-pager
5+
ng-show="grid.options.enablePaginationControls">
6+
<div
7+
role="navigation"
8+
class="ui-grid-pager-container">
9+
<div
10+
role="menubar"
11+
class="ui-grid-pager-control">
12+
<button
13+
type="button"
14+
role="menuitem"
15+
class="ui-grid-pager-first"
16+
ui-grid-one-bind-title="aria.pageToFirst"
17+
ui-grid-one-bind-aria-label="aria.pageToFirst"
18+
ng-click="pageFirstPageClick()"
19+
ng-disabled="cantPageBackward()">
20+
<div class="first-triangle">
21+
<div class="first-bar"></div>
22+
</div>
23+
</button>
24+
<button
25+
type="button"
26+
role="menuitem"
27+
class="ui-grid-pager-previous"
28+
ui-grid-one-bind-title="aria.pageBack"
29+
ui-grid-one-bind-aria-label="aria.pageBack"
30+
ng-click="pagePreviousPageClick()"
31+
ng-disabled="cantPageBackward()">
32+
<div class="first-triangle prev-triangle"></div>
33+
</button>
34+
<input
35+
type="number"
36+
ui-grid-one-bind-title="aria.pageSelected"
37+
ui-grid-one-bind-aria-label="aria.pageSelected"
38+
class="ui-grid-pager-control-input"
39+
ng-model="grid.options.paginationCurrentPage"
40+
min="1"
41+
max="{{ paginationApi.getTotalPages() }}"
42+
required />
43+
<span
44+
class="ui-grid-pager-max-pages-number"
45+
ng-show="paginationApi.getTotalPages() > 0">
46+
<abbr ui-grid-one-bind-title="paginationOf">/</abbr> {{ paginationApi.getTotalPages() }}
47+
</span>
48+
<button
49+
type="button"
50+
role="menuitem"
51+
class="ui-grid-pager-next"
52+
ui-grid-one-bind-title="aria.pageForward"
53+
ui-grid-one-bind-aria-label="aria.pageForward"
54+
ng-click="pageNextPageClick()"
55+
ng-disabled="cantPageForward()">
56+
<div class="last-triangle next-triangle"></div>
57+
</button>
58+
<button
59+
type="button"
60+
role="menuitem"
61+
class="ui-grid-pager-last"
62+
ui-grid-one-bind-title="aria.pageToLast"
63+
ui-grid-one-bind-aria-label="aria.pageToLast"
64+
ng-click="pageLastPageClick()"
65+
ng-disabled="cantPageToLast()">
66+
<div class="last-triangle">
67+
<div class="last-bar">
68+
</div>
69+
</div>
70+
</button>
1071
</div>
11-
<div class="ui-grid-pager-row-count-picker" ng-if="grid.options.paginationPageSizes.length > 1">
12-
<select ng-model="grid.options.paginationPageSize" ng-options="o as o for o in grid.options.paginationPageSizes"></select>
13-
<span class="ui-grid-pager-row-count-label">&nbsp;{{sizesLabel}}</span>
72+
<div
73+
class="ui-grid-pager-row-count-picker"
74+
ng-if="grid.options.paginationPageSizes.length > 1">
75+
<select
76+
ui-grid-one-bind-aria-labelledby-grid="'items-per-page-label'"
77+
ng-model="grid.options.paginationPageSize"
78+
ng-options="o as o for o in grid.options.paginationPageSizes"></select>
79+
<span
80+
ui-grid-one-bind-id-grid="'items-per-page-label'"
81+
class="ui-grid-pager-row-count-label">
82+
&nbsp;{{sizesLabel}}
83+
</span>
1484
</div>
15-
<span ng-if="grid.options.paginationPageSizes.length <= 1" class="ui-grid-pager-row-count-label">{{grid.options.paginationPageSize}}&nbsp;{{sizesLabel}}</span>
85+
<span
86+
ng-if="grid.options.paginationPageSizes.length <= 1"
87+
class="ui-grid-pager-row-count-label">
88+
{{grid.options.paginationPageSize}}&nbsp;{{sizesLabel}}
89+
</span>
1690
</div>
1791
<div class="ui-grid-pager-count-container">
1892
<div class="ui-grid-pager-count">
1993
<span ng-show="grid.options.totalItems > 0">
20-
{{showingLow}} - {{showingHigh}} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}
94+
{{showingLow}} <abbr ui-grid-one-bind-title="paginationThrough">-</abbr> {{showingHigh}} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}
2195
</span>
2296
</div>
2397
</div>

0 commit comments

Comments
 (0)