rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-02-18 16:54:14 +01:00
Code Issues Releases Activity

Update ARIA attributes based on feedback from Vinnie Young ( http://groups.google.com/group/free-aria/browse_thread/thread/96156d857f35e10d#msg_e451dd817dfe01b1 ). Label for column header now states the column title and the next sort. TBODY has a role of alert and TR elements in THEAD have a role of 'row'

Browse Source
This commit is contained in:
Allan Jardine 2011-12-13 08:55:46 +00:00
parent 3191ee098b
commit bec6085880
4 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
media/js/jquery.dataTables.js vendored
View File

@ -1057,7 +1057,6 @@
function _fnBuildHead( oSettings )
{
var i, nTh, iLen, j, jLen;
var anTr = oSettings.nTHead.getElementsByTagName('tr');
var iThs = oSettings.nTHead.getElementsByTagName('th').length;
var iCorrector = 0;
var jqChildren;
@ -1071,8 +1070,6 @@
nTh = oSettings.aoColumns[i].nTh;
nTh.setAttribute('tabindex', '0');
nTh.setAttribute('role', 'columnheader');
nTh.setAttribute('aria-label', 'Activate to sort column');
nTh.setAttribute('aria-controls', oSettings.sTableId);
if ( oSettings.aoColumns[i].sClass !== null )
@ -1109,6 +1106,9 @@
_fnDetectHeader( oSettings.aoHeader, oSettings.nTHead );
}
/* ARIA role for the rows */
$(oSettings.nTHead).children('tr').attr('role', 'row');
/* Add the extra markup needed by jQuery UI's themes */
if ( oSettings.bJUI )
{
@ -3912,13 +3912,25 @@
for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
{
oSettings.aoColumns[i].nTh.removeAttribute('aria-sort');
}
if ( aaSort.length > 0 )
{
var aAriaSort = aaSort[0];
oSettings.aoColumns[aAriaSort[0]].nTh.setAttribute('aria-sort',
aAriaSort[1]=="asc" ? "ascending" : "descending" );
nTh = aoColumns[i].nTh;
nTh.removeAttribute('aria-sort');
nTh.removeAttribute('aria-label');
/* In ARIA only the first sorting column can be marked as sorting - no multi-sort option */
if ( aaSort.length > 0 && aaSort[0][0] == i )
{
nTh.setAttribute('aria-sort', aaSort[0][1]=="asc" ? "ascending" : "descending" );
var nextSort = (typeof aoColumns[i].asSorting[ aaSort[0][2]+1 ] !== 'undefined') ?
aoColumns[i].asSorting[ aaSort[0][2]+1 ] : aoColumns[i].asSorting[0];
nTh.setAttribute('aria-label', aoColumns[i].sTitle+': activate to sort column '+
(nextSort=="asc" ? "ascending" : "descending") );
}
else
{
nTh.setAttribute('aria-label', aoColumns[i].sTitle+': activate to sort column '+
(aoColumns[i].asSorting[0]=="asc" ? "ascending" : "descending") );
}
}
/* Tell the draw function that we have sorted the data */
@ -6338,6 +6350,7 @@
this.appendChild( tbody[0] );
}
oSettings.nTBody = tbody[0];
oSettings.nTBody.setAttribute( "role", "alert" );
oSettings.nTBody.setAttribute( "aria-live", "polite" );
oSettings.nTBody.setAttribute( "aria-relevant", "all" );

1
media/src/core/core.constructor.js
View File

@ -410,6 +410,7 @@ if ( tbody.length === 0 )
this.appendChild( tbody[0] );
}
oSettings.nTBody = tbody[0];
oSettings.nTBody.setAttribute( "role", "alert" );
oSettings.nTBody.setAttribute( "aria-live", "polite" );
oSettings.nTBody.setAttribute( "aria-relevant", "all" );

6
media/src/core/core.draw.js
View File

@ -84,7 +84,6 @@ function _fnCreateTr ( oSettings, iRow )
function _fnBuildHead( oSettings )
{
var i, nTh, iLen, j, jLen;
var anTr = oSettings.nTHead.getElementsByTagName('tr');
var iThs = oSettings.nTHead.getElementsByTagName('th').length;
var iCorrector = 0;
var jqChildren;
@ -98,8 +97,6 @@ function _fnBuildHead( oSettings )
nTh = oSettings.aoColumns[i].nTh;
nTh.setAttribute('tabindex', '0');
nTh.setAttribute('role', 'columnheader');
nTh.setAttribute('aria-label', 'Activate to sort column');
nTh.setAttribute('aria-controls', oSettings.sTableId);
if ( oSettings.aoColumns[i].sClass !== null )
@ -136,6 +133,9 @@ function _fnBuildHead( oSettings )
_fnDetectHeader( oSettings.aoHeader, oSettings.nTHead );
}
/* ARIA role for the rows */
$(oSettings.nTHead).children('tr').attr('role', 'row');
/* Add the extra markup needed by jQuery UI's themes */
if ( oSettings.bJUI )
{

26
media/src/core/core.sort.js
View File

@ -131,13 +131,25 @@ function _fnSort ( oSettings, bApplyClasses )
for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
{
oSettings.aoColumns[i].nTh.removeAttribute('aria-sort');
}
if ( aaSort.length > 0 )
{
var aAriaSort = aaSort[0];
oSettings.aoColumns[aAriaSort[0]].nTh.setAttribute('aria-sort',
aAriaSort[1]=="asc" ? "ascending" : "descending" );
nTh = aoColumns[i].nTh;
nTh.removeAttribute('aria-sort');
nTh.removeAttribute('aria-label');
/* In ARIA only the first sorting column can be marked as sorting - no multi-sort option */
if ( aaSort.length > 0 && aaSort[0][0] == i )
{
nTh.setAttribute('aria-sort', aaSort[0][1]=="asc" ? "ascending" : "descending" );
var nextSort = (typeof aoColumns[i].asSorting[ aaSort[0][2]+1 ] !== 'undefined') ?
aoColumns[i].asSorting[ aaSort[0][2]+1 ] : aoColumns[i].asSorting[0];
nTh.setAttribute('aria-label', aoColumns[i].sTitle+': activate to sort column '+
(nextSort=="asc" ? "ascending" : "descending") );
}
else
{
nTh.setAttribute('aria-label', aoColumns[i].sTitle+': activate to sort column '+
(aoColumns[i].asSorting[0]=="asc" ? "ascending" : "descending") );
}
}
/* Tell the draw function that we have sorted the data */