Skip to content

Commit

Permalink
Scrollable Layout Grid: Change heading levels, labeling, and add page…
Browse files Browse the repository at this point in the history 
…nation status text (pull #550)

Made four of five changes for issue #544:
1. Change the headings inside the grid to level 5.
2. Add a visual title above the grid `<h4>Search Results for "W3C WAI-ARIA"</h4>`, put an ID on the <h4>, and use aria-labelledby on the grid to point to it.
3. Remove aria-label from the grid.
4. Below the title, and above the grid, add a status line with text like: "Showing results 1 to 5 of 19". Update the status as the grid scrolls.
  • Loading branch information
@tatermelon @mcking65
tatermelon authored and mcking65 committed Nov 29, 2017
1 parent 96b2144 commit 9a1ea48
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 44 deletions.
90 changes: 46 additions & 44 deletions examples/grid/LayoutGrids.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,13 @@ <h4 id="grid1_label">Related Documents</h4>
class="indicator_graphic" />
</p>
<p>
This focus ring means arrow key navigation is available. Press arrow keys to move inside the component. Press Tab to jump to the next component.
This focus ring means arrow key navigation is available. Press arrow keys to move inside the component. Press Tab to jump to the next component.
<span class="indicator_description">
As a reminder, an arrow keypad graphic also appears in the lower left corner of the page.
</span>
</p>
<p>
Components that support arrow keys often enable additional keys that make navigation easier,
Components that support arrow keys often enable additional keys that make navigation easier,
such as Home, End, Ctrl-Home, Ctrl-End, Page Up, and Page Down.
</p>
<a id="close-nux-button" class="close-nux-button" role="button" tabindex="0">
Expand All @@ -93,13 +93,13 @@ <h4>Notes</h4>
<li>The focus indicator changes to a dotted blue box.</li>
<li>When screen size is sufficiently large, A graphic of an arrow keypad appears in the page gutter on the bottom left.</li>
<li>
The first time a user moves focus into the grid with <kbd>Tab</kbd>, a <q>NUX</q> (new user experience helper) appears in the page tab sequence immediately following the grid.
The first time a user moves focus into the grid with <kbd>Tab</kbd>, a <q>NUX</q> (new user experience helper) appears in the page tab sequence immediately following the grid.
The NUX explains the meaning of the focus indicator and keypad graphic, and it remains visible until the user closes it.
</li>
</li>
</ol>
</li>
<li>
This grid is useful in a responsive design.
This grid is useful in a responsive design.
It dynamically adjusts the number of cells per row based on screen size.
As the grid structure changes, the arrow key behavior adjusts accordingly.
</li>
Expand Down Expand Up @@ -183,175 +183,177 @@ <h3 id="ex3_label">Example 3: Scrollable Search Results</h3>
</p>
<div role="separator" id="ex3_start_sep" aria-labelledby="ex3_start_sep ex3_label" aria-label="Start of"></div>
<div id="ex3">
<div role="grid" aria-label="Search Results" aria-rowcount="19" data-per-page="5" data-wrap-cols="true">
<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 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"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/WAI/intro/aria">WAI-ARIA Overview
Web Accessibility Initiative W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make
Web content and Web applications more accessible to people with disabilities.</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/states_and_properties">ARIA
States and Properties - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>In this document, states and properties are both treated as aria-prefixed markup
attributes. However, they are maintained conceptually distinct to clarify subtle ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/">Accessible Rich
Internet Applications (WAI-ARIA) 1.0 - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Mar 20, 2014 - This is the WAI-ARIA 1.0 W3C Recommendation from the Protocols &
Formats Working Group of the Web Accessibility Initiative. The Working ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/WAI/ARIA/">Accessible Rich Internet
Applications (ARIA) Working Group - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>The mission of the Accessible Rich Internet Applications Working Group (ARIA WG) is
to develop technologies that enhance accessibility of web content for ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria-1.1/">Accessible Rich
Internet Applications (WAI-ARIA) 1.1 - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Jul 21, 2016 - This version of ARIA 1.1 changes the aria-kbdshortcuts property to
aria-keyshortcuts , expands roles that can be used in combo boxes, adds a ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/roles">The Roles Model |
Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>This section defines the WAI-ARIA role taxonomy and describes the characteristics
and properties of all roles. A formal RDF / OWL representation of all the ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA
Authoring Practices 1.1 - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Mar 17, 2016 - The WAI-ARIA Authoring Practices Guide is intended to provide an
understanding of how to use WAI-ARIA to create an accessible Rich Internet ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/html-aria/">ARIA in HTML - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</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"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/html-aria/">ARIA
in HTML</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Jul 24, 2015 - Setting an ARIA role and/or aria-* attribute that matches the
default implicit ARIA semantics is unnecessary and is NOT RECOMMENDED as ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/WAI/ARIA/faq">Accessible Rich
Internet Applications (ARIA) Working Group - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Here are answers to some frequently asked questions (FAQ) about WAI-ARIA, the
Accessible Rich Internet Applications Suite. When we add significant ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria-implementation/">WAI-ARIA
1.0 User Agent Implementation Guide - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>WAI-ARIA enables rich Internet applications to have the same accessibility features
as desktop GUI applications by adding metadata to markup technologies ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://w3c.github.io/html-reference/aria/aria.html">ARIA -
HTML5 - W3C on GitHub</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Alertdialog #. aria.alertdialog = role="" alertdialog "" intermixed with an
optional aria-expanded element. Application #. aria.application = role=""
application ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA 1.0
Authoring Practices - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Abstract. This document provided readers with an understanding of how to use
WAI-ARIA [ ARIA ] to create accessible rich internet applications. It described ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/aria-in-html/">Notes on Using
ARIA in HTML - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>May 21, 2015 - This document demonstrates how to use WAI-ARIA in [ HTML51 ], which
especially helps with dynamic content and advanced user interface ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/standards/techs/aria">Accessible
Rich Internet Applications (WAI-ARIA) Current Status - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Accessible Rich Internet Applications (WAI-ARIA) 1.0. Accessibility of Web content
to people with disabilities requires semantic information about widgets, ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/WAI/PF/aria/">Accessible Rich
Internet Applications (WAI-ARIA) 1.0 - W3C</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Feb 3, 2014 - This version: http://www.w3.org/WAI/PF/aria/; Previous editors'
draft: ... This document is part of the WAI-ARIA suite described in the WAI-ARIA ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/introduction">Introduction
| Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>WAI-ARIA is a technical specification that provides a framework to improve the
accessibility and interoperability of web content and applications. This
document ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<a tabindex="-1" href="https://www.w3.org/TR/wai-aria/usage">Using WAI-ARIA |
Accessible Rich Internet Applications (WAI-ARIA) 1.0</a>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>WAI-ARIA divides the semantics into roles (the type defining a user interface
element) and states and properties supported by the roles. Authors need to ...</span>
</div>
<div role="row">
<div role="gridcell"><h3>
<div role="gridcell"><h5>
<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>
</h3></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
</h5></div> <span tabindex="-1" role="gridcell">World Wide Web Consortium</span> <span
tabindex="-1" role="gridcell"
>Jan 3, 2014 - NVDA 2 supports all landmarks except it will not support navigation
to “application”; Window Eyes as of V.7 does not support ARIA landmarks.</span>
Expand Down
13 changes: 13 additions & 0 deletions examples/grid/js/dataGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -588,10 +588,15 @@ aria.Grid.prototype.setupIndices = function () {
* accordingly.
*/
aria.Grid.prototype.setupPagination = function () {
this.onPaginationChange = this.onPaginationChange || function () {};
this.perPage = parseInt(this.gridNode.getAttribute('data-per-page'));
this.showFromRow(0, true);
};

aria.Grid.prototype.setPaginationChangeHandler = function (onPaginationChange) {
this.onPaginationChange = onPaginationChange;
};

/**
* @desc
* Check if page up or page down was pressed, and show the next page if so.
Expand Down Expand Up @@ -637,6 +642,8 @@ aria.Grid.prototype.showFromRow = function (startIndex, scrollDown) {
var dataRows =
this.gridNode.querySelectorAll(aria.GridSelector.SCROLL_ROW);
var reachedTop = false;
var firstIndex = -1;
var endIndex = -1;

if (startIndex < 0 || startIndex >= dataRows.length) {
return;
Expand All @@ -661,11 +668,17 @@ aria.Grid.prototype.showFromRow = function (startIndex, scrollDown) {
this.topIndex = i;
reachedTop = true;
}

if (firstIndex < 0) {
firstIndex = i;
}
endIndex = i;
}
else {
aria.Utils.addClass(dataRows[i], aria.CSSClass.HIDDEN);
}
}
this.onPaginationChange(firstIndex, endIndex);
};

/**
Expand Down
6 changes: 6 additions & 0 deletions examples/grid/js/layoutGrids.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ window.addEventListener('load', function () {

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');
ex3Grid.setPaginationChangeHandler(function (startIndex, endIndex) {
startIndexText.innerText = startIndex + 1;
endIndexText.innerText = endIndex + 1;
});

var pillList = new PillList(
ex2Grid,
Expand Down

0 comments on commit 9a1ea48

Please sign in to comment.