Pagination: Add ARIA labels for navigation links

dojo · Sep 11, 2012 · c21f147 · c21f147
1 parent 94bd9a8
commit c21f147
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/extensions/Pagination.js b/extensions/Pagination.js
@@ -70,25 +70,30 @@ function(_StoreMixin, declare, lang, Deferred, on, query, string, has, put, i18n
 				previousNextLinks = this.previousNextLinks,
 				pagingLinks = this.pagingLinks,
 				end = this._total / this.rowsPerPage,
-				pagingTextBoxHandle = this._pagingTextBoxHandle;
+				pagingTextBoxHandle = this._pagingTextBoxHandle,
+				node;
 
 			if(this.firstLastArrows){
 				// create a first-page link
-				put(navigationNode,  "a[href=javascript:].dgrid-first", "«");
+				node = put(navigationNode,  "a[href=javascript:].dgrid-first", "«");
+				node.setAttribute("aria-label", i18n.gotoFirst);
 			}
 			if(this.previousNextArrows){
 				// create a previous link
-				put(navigationNode,  "a[href=javascript:].dgrid-previous", "‹");
+				node = put(navigationNode,  "a[href=javascript:].dgrid-previous", "‹");
+				node.setAttribute("aria-label", i18n.gotoPrev);
 			}
 
 			this.paginationLinksNode = put(navigationNode, "span.dgrid-pagination-links");
 			if(this.previousNextArrows){
 				// create a next link
-				put(navigationNode, "a[href=javascript:].dgrid-next", "›");	
+				node = put(navigationNode, "a[href=javascript:].dgrid-next", "›");
+				node.setAttribute("aria-label", i18n.gotoNext);
 			}
 			if(this.firstLastArrows){
 				// create a last-page link
-				put(navigationNode,  "a[href=javascript:].dgrid-last", "»");
+				node = put(navigationNode,  "a[href=javascript:].dgrid-last", "»");
+				node.setAttribute("aria-label", i18n.gotoLast);
 			}
 
 			on(navigationNode, "a:click", function(evt){
@@ -135,6 +140,7 @@ function(_StoreMixin, declare, lang, Deferred, on, query, string, has, put, i18n
 				if(grid.pagingTextBox && page == currentPage){
 					// use a paging text box if enabled instead of just a number
 					link = put(linksNode, 'input.dgrid-page-input[type=text][value=$]', currentPage);
+					link.setAttribute("aria-label", i18n.jumpPage);
 					grid._pagingTextBoxHandle = on(link, "change", function(evt){
 						var value = +this.value;
 						if(!isNaN(value) && value > 0 && value <= end){
@@ -146,6 +152,7 @@ function(_StoreMixin, declare, lang, Deferred, on, query, string, has, put, i18n
 					link = put(linksNode,
 						'a[href=javascript:]' + (page == currentPage ? '.dgrid-page-disabled' : '') + '.dgrid-page-link',
 						page);
+					link.setAttribute("aria-label", i18n.gotoPage);
 				}
 				if(page == currentPage && focusLink){
 					// focus on it if we are supposed to retain the focus

diff --git a/extensions/nls/pagination.js b/extensions/nls/pagination.js
@@ -1,6 +1,12 @@
 define({
 	root: {
-		status: "${start} - ${end} of ${total} results"
+		status: "${start} - ${end} of ${total} results",
+		gotoFirst: "Go to first page",
+		gotoNext: "Go to next page",
+		gotoPrev: "Go to previous page",
+		gotoLast: "Go to last page",
+		gotoPage: "Go to page",
+		jumpPage: "Jump to page"
 	},
 	es: true,
 	ja: true

diff --git a/test/extensions/Pagination.html b/test/extensions/Pagination.html
@@ -49,12 +49,12 @@
 			if(match){ skin = match[1]; }
 			skinDep = "xstyle/css!dgrid/css/skins/" + skin + ".css";
 
-			require([skinDep, "dgrid/Grid", "dgrid/extensions/Pagination", "dgrid/Selection",
+			require([skinDep, "dgrid/Grid", "dgrid/extensions/Pagination", "dgrid/Selection", "dgrid/Keyboard",
 					"dojo/_base/lang", "dojo/_base/declare", "dojo/dom-construct", "dojo/dom-form", "dgrid/test/data/base", "dojo/domReady!"],
-				function(skinResource, Grid, Pagination, Selection,
+				function(skinResource, Grid, Pagination, Selection, Keyboard,
 						lang, declare, domConstruct, domForm, testStore){
 
-					var CustomGrid = declare([Grid, Selection, Pagination]);
+					var CustomGrid = declare([Grid, Keyboard, Selection, Pagination]);
 
 					getColumns = function(){
 						return {