Skip to content

Commit

Permalink
Scrollable Layout Grid Example: Add Pagination (#558)
Browse files Browse the repository at this point in the history 
For issue #544, adds previous and next buttons for paging through the search result grid in the third example.

Activating previous or next is the same as pressing page up/down keys when focus is inside the grid.
  • Loading branch information
@tatermelon @mcking65
tatermelon authored and mcking65 committed Nov 30, 2017
1 parent f0721b6 commit 0b6bb32
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 40 deletions.
47 changes: 27 additions & 20 deletions examples/grid/LayoutGrids.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,10 +184,13 @@ <h3 id="ex3_label">Example 3: Scrollable Search Results</h3>
<div role="separator" id="ex3_start_sep" aria-labelledby="ex3_start_sep ex3_label" aria-label="Start of"></div>
<div id="ex3">
<h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
<p>Showing results <span id="ex3_start_index">1</span> to <span id="ex3_end_index">5</span> of 19</p>
<div class="ex3_result_indices">
Showing results <span id="ex3_start_index">1</span> to <span id="ex3_end_index">5</span> of 19
</div>

<div role="grid" aria-labelledby="ex3_search_results_label" aria-rowcount="19" data-per-page="5" data-wrap-cols="true">
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/WAI/intro/aria">WAI-ARIA Overview
Web Accessibility Initiative W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -196,7 +199,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
Web content and Web applications more accessible to people with disabilities.</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/states_and_properties">ARIA
States and Properties - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -205,7 +208,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
attributes. However, they are maintained conceptually distinct to clarify subtle ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/">Accessible Rich
Internet Applications (WAI-ARIA) 1.0 - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -214,7 +217,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
Formats Working Group of the Web Accessibility Initiative. The Working ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/WAI/ARIA/">Accessible Rich Internet
Applications (ARIA) Working Group - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -223,7 +226,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
to develop technologies that enhance accessibility of web content for ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria-1.1/">Accessible Rich
Internet Applications (WAI-ARIA) 1.1 - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -232,7 +235,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
aria-keyshortcuts , expands roles that can be used in combo boxes, adds a ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/roles">The Roles Model |
Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -241,7 +244,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
and properties of all roles. A formal RDF / OWL representation of all the ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA
Authoring Practices 1.1 - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -250,15 +253,15 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
understanding of how to use WAI-ARIA to create an accessible Rich Internet ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/html-aria/">ARIA in HTML - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Oct 5, 2016 - ARIA in HTML is a [ HTML51 ] specification module. Any HTML features,
conformance requirements, or terms that this specification module ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/html-aria/">ARIA
in HTML</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -267,7 +270,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
default implicit ARIA semantics is unnecessary and is NOT RECOMMENDED as ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/WAI/ARIA/faq">Accessible Rich
Internet Applications (ARIA) Working Group - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -276,7 +279,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
Accessible Rich Internet Applications Suite. When we add significant ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria-implementation/">WAI-ARIA
1.0 User Agent Implementation Guide - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -285,7 +288,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
as desktop GUI applications by adding metadata to markup technologies ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://w3c.github.io/html-reference/aria/aria.html">ARIA -
HTML5 - W3C on GitHub</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -295,7 +298,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
application ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA 1.0
Authoring Practices - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -304,7 +307,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
WAI-ARIA [ ARIA ] to create accessible rich internet applications. It described ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/aria-in-html/">Notes on Using
ARIA in HTML - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -313,7 +316,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
especially helps with dynamic content and advanced user interface ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/standards/techs/aria">Accessible
Rich Internet Applications (WAI-ARIA) Current Status - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -322,7 +325,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
to people with disabilities requires semantic information about widgets, ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/WAI/PF/aria/">Accessible Rich
Internet Applications (WAI-ARIA) 1.0 - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -331,7 +334,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
draft: ... This document is part of the WAI-ARIA suite described in the WAI-ARIA ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/introduction">Introduction
| Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -341,7 +344,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
document ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/usage">Using WAI-ARIA |
Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -350,7 +353,7 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
element) and states and properties supported by the roles. Authors need to ...</span>
</div>
<div role="row">
<div role="gridcell"><h5>
<div role="gridcell"><h5 class="ex3_result_header">
<a tabindex="-1" href="https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA11">Using
ARIA landmarks to identify regions of a page - WCAG WG - W3C</a>
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
Expand All @@ -360,6 +363,10 @@ <h4 id="ex3_search_results_label">Search Results for "W3C WAI-ARIA"</h4>
</div>
</div>

<div class="ex3_pagination">
<button disabled="true" id="ex3_pageup_button">Previous</button>
<button id="ex3_pagedown_button">Next</button>
</div>
</div>
<div role="separator" id="ex3_end_sep" aria-labelledby="ex3_end_sep ex3_label" aria-label="End of"></div>
<h4>Notes</h4>
Expand Down
14 changes: 14 additions & 0 deletions examples/grid/css/layoutGrids.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,3 +165,17 @@
#add-recipient-input {
font-size: 14px;
}

.ex3_result_header {
margin: 0px;
font-style: normal;
font-weight: bold;
}
.ex3_result_indices {
margin-bottom: 40px;
}

.ex3_pagination {
margin-top: 40px;
text-align: center;
}
29 changes: 17 additions & 12 deletions examples/grid/js/dataGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,22 +610,27 @@ aria.Grid.prototype.checkPageChange = function (event) {
}

var key = event.which || event.keyCode;
var startIndex;

if (key === aria.KeyCode.PAGE_UP || key === aria.KeyCode.PAGE_DOWN) {
if (key === aria.KeyCode.PAGE_UP) {
event.preventDefault();
this.movePageUp();
}
else if (key === aria.KeyCode.PAGE_DOWN) {
event.preventDefault();
this.movePageDown();
}
};

if (key === aria.KeyCode.PAGE_UP) {
startIndex = Math.max(this.perPage - 1, this.topIndex);
this.showFromRow(startIndex, false);
}
else {
startIndex = this.topIndex + this.perPage - 1;
this.showFromRow(startIndex, true);
}
aria.Grid.prototype.movePageUp = function () {
var startIndex = Math.max(this.perPage - 1, this.topIndex - 1);
this.showFromRow(startIndex, false);
this.focusCell(startIndex, this.focusedCol);
};

this.focusCell(startIndex, this.focusedCol);
}
aria.Grid.prototype.movePageDown = function () {
var startIndex = this.topIndex + this.perPage;
this.showFromRow(startIndex, true);
this.focusCell(startIndex, this.focusedCol);
};

/**
Expand Down
35 changes: 27 additions & 8 deletions examples/grid/js/layoutGrids.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,48 @@ var aria = aria || {};
*/

window.addEventListener('load', function () {
// Setup Example 1
var ex1 = document.getElementById('ex1');
var ex1Grid = new aria.Grid(ex1.querySelector('[role="grid"]'));

// Setup Example 2
var ex2 = document.getElementById('ex2');
var ex2Grid = new aria.Grid(ex2.querySelector('[role="grid"]'));

var pillList = new PillList(
ex2Grid,
document.getElementById('add-recipient-input'),
document.getElementById('add-recipient-button'),
document.getElementById('form-action-text')
);

// Setup Example 3
var ex3 = document.getElementById('ex3');
var ex3Grid = new aria.Grid(ex3.querySelector('[role="grid"]'));
var startIndexText = document.getElementById('ex3_start_index');
var endIndexText = document.getElementById('ex3_end_index');
var previousButton = document.getElementById('ex3_pageup_button');
var nextButton = document.getElementById('ex3_pagedown_button');
ex3Grid.setPaginationChangeHandler(function (startIndex, endIndex) {
startIndexText.innerText = startIndex + 1;
endIndexText.innerText = endIndex + 1;
if (startIndex <= 0) {
previousButton.setAttribute('disabled', 'true');
}
else {
previousButton.removeAttribute('disabled');
}
if (endIndex >= 18) {
nextButton.setAttribute('disabled', 'true');
}
else {
nextButton.removeAttribute('disabled');
}
});
previousButton.addEventListener('click', ex3Grid.movePageUp.bind(ex3Grid));
nextButton.addEventListener('click', ex3Grid.movePageDown.bind(ex3Grid));

var pillList = new PillList(
ex2Grid,
document.getElementById('add-recipient-input'),
document.getElementById('add-recipient-button'),
document.getElementById('form-action-text')
);

// Setup NUX; activates when the first grid cell is focused
var gridNUX = document.getElementById('grid-nux');
var firstGridCell = document.querySelector('#ex1 [tabindex="0"]');
var NUXclose = document.getElementById('close-nux-button');
Expand All @@ -51,7 +71,6 @@ window.addEventListener('load', function () {
}
});
};

firstGridCell.addEventListener('focus', setupInstructions);
});

Expand Down

0 comments on commit 0b6bb32

Please sign in to comment.