rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-03-15 16:29:16 +01:00
Code Issues Releases Activity

First effort at ARIA support - the table control widgets link themselves to the table now ('controls') and the column headers say what they do. The table is also described by the information control. Note that an ID on the table is needed for most of this, since ARIA can reiference elements.

Browse Source
This commit is contained in:
Allan Jardine 2011-12-10 11:34:30 +00:00
parent 8eb722271e
commit d0458ca22c
8 changed files with 80 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1070,7 +1070,14 @@
{
nTh = oSettings.aoColumns[i].nTh;
nTh.setAttribute('tabindex', '0');
nTh.setAttribute('role', 'columnheader');
nTh.setAttribute('aria-label', 'Activate to sort column');
if ( oSettings.sTableId )
{
nTh.setAttribute('aria-controls', oSettings.sTableId);
}
if ( oSettings.aoColumns[i].sClass !== null )
{
$(nTh).addClass( oSettings.aoColumns[i].sClass );
@ -1720,6 +1727,7 @@
*/
oSettings.nTableWrapper = document.createElement( 'div' );
oSettings.nTableWrapper.className = oSettings.oClasses.sWrapper;
oSettings.nTableWrapper.setAttribute('role', 'grid');
if ( oSettings.sTableId !== '' )
{
oSettings.nTableWrapper.setAttribute( 'id', oSettings.sTableId+'_wrapper' );
@ -2018,7 +2026,12 @@
} );
}
} );
if ( oSettings.sTableId )
{
jqFilter.attr('aria-controls', oSettings.sTableId);
}
jqFilter.bind( 'keypress.DT', function(e) {
/* Prevent default */
if ( e.keyCode == 13 )
@ -2372,6 +2385,7 @@
if ( oSettings.sTableId !== '' )
{
nInfo.setAttribute( 'id', oSettings.sTableId+'_info' );
oSettings.nTable.setAttribute( 'aria-describedby', oSettings.sTableId+'_info' );
}
}
@ -2699,6 +2713,12 @@
_fnDraw( oSettings );
} );
if ( oSettings.sTableId )
{
$('select', nLength).attr('aria-controls', oSettings.sTableId);
}
return nLength;
}
@ -3890,6 +3910,17 @@
{
_fnSortingClasses( oSettings );
}
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" );
}
/* Tell the draw function that we have sorted the data */
oSettings.bSorted = true;
@ -6325,6 +6356,8 @@
this.appendChild( tbody[0] );
}
oSettings.nTBody = tbody[0];
oSettings.nTBody.setAttribute( "aria-live", "polite" );
oSettings.nTBody.setAttribute( "aria-relevant", "all" );
var tfoot = $(this).children('tfoot');
if ( tfoot.length > 0 )
@ -9918,8 +9951,8 @@
};
var sAppend = (!oSettings.bJUI) ?
'<div tabindex="0" title="'+oLang.sPrevious+'" class="'+oSettings.oClasses.sPagePrevDisabled+'">'+oLang.sPrevious+'</div>'+
'<div tabindex="0" title="'+oLang.sNext+'" class="'+oSettings.oClasses.sPageNextDisabled+'">'+oLang.sNext+'</div>'
'<div title="'+oLang.sPrevious+'" class="'+oSettings.oClasses.sPagePrevDisabled+'" tabindex="0" role="button">'+oLang.sPrevious+'</div>'+
'<div title="'+oLang.sNext+'" class="'+oSettings.oClasses.sPageNextDisabled+'" tabindex="0" role="button">'+oLang.sNext+'</div>'
:
'<div tabindex="0" title="'+oLang.sPrevious+'" class="'+oSettings.oClasses.sPagePrevDisabled+'"><span class="'+oSettings.oClasses.sPageJUIPrev+'"></span></div>'+
'<div tabindex="0" title="'+oLang.sNext+'" class="'+oSettings.oClasses.sPageNextDisabled+'"><span class="'+oSettings.oClasses.sPageJUINext+'"></span></div>';
@ -9950,6 +9983,9 @@
nPaging.id = oSettings.sTableId+'_paginate';
nPrevious.id = oSettings.sTableId+'_previous';
nNext.id = oSettings.sTableId+'_next';
nPrevious.setAttribute('aria-controls', oSettings.sTableId);
nNext.setAttribute('aria-controls', oSettings.sTableId);
}
},

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

@ -402,6 +402,8 @@ if ( tbody.length === 0 )
this.appendChild( tbody[0] );
}
oSettings.nTBody = tbody[0];
oSettings.nTBody.setAttribute( "aria-live", "polite" );
oSettings.nTBody.setAttribute( "aria-relevant", "all" );
var tfoot = $(this).children('tfoot');
if ( tfoot.length > 0 )

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

@ -97,7 +97,14 @@ function _fnBuildHead( oSettings )
{
nTh = oSettings.aoColumns[i].nTh;
nTh.setAttribute('tabindex', '0');
nTh.setAttribute('role', 'columnheader');
nTh.setAttribute('aria-label', 'Activate to sort column');
if ( oSettings.sTableId )
{
nTh.setAttribute('aria-controls', oSettings.sTableId);
}
if ( oSettings.aoColumns[i].sClass !== null )
{
$(nTh).addClass( oSettings.aoColumns[i].sClass );
@ -747,6 +754,7 @@ function _fnAddOptionsHtml ( oSettings )
*/
oSettings.nTableWrapper = document.createElement( 'div' );
oSettings.nTableWrapper.className = oSettings.oClasses.sWrapper;
oSettings.nTableWrapper.setAttribute('role', 'grid');
if ( oSettings.sTableId !== '' )
{
oSettings.nTableWrapper.setAttribute( 'id', oSettings.sTableId+'_wrapper' );

7
media/src/core/core.filter.js
View File

@ -44,7 +44,12 @@ function _fnFeatureHtmlFilter ( oSettings )
} );
}
} );
if ( oSettings.sTableId )
{
jqFilter.attr('aria-controls', oSettings.sTableId);
}
jqFilter.bind( 'keypress.DT', function(e) {
/* Prevent default */
if ( e.keyCode == 13 )

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

@ -24,6 +24,7 @@ function _fnFeatureHtmlInfo ( oSettings )
if ( oSettings.sTableId !== '' )
{
nInfo.setAttribute( 'id', oSettings.sTableId+'_info' );
oSettings.nTable.setAttribute( 'aria-describedby', oSettings.sTableId+'_info' );
}
}

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

@ -85,6 +85,12 @@ function _fnFeatureHtmlLength ( oSettings )
_fnDraw( oSettings );
} );
if ( oSettings.sTableId )
{
$('select', nLength).attr('aria-controls', oSettings.sTableId);
}
return nLength;
}

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

@ -127,6 +127,17 @@ function _fnSort ( oSettings, bApplyClasses )
{
_fnSortingClasses( oSettings );
}
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" );
}
/* Tell the draw function that we have sorted the data */
oSettings.bSorted = true;

7
media/src/ext/ext.paging.js
View File

@ -31,8 +31,8 @@ $.extend( DataTable.ext.oPagination, {
};
var sAppend = (!oSettings.bJUI) ?
'<div tabindex="0" title="'+oLang.sPrevious+'" class="'+oSettings.oClasses.sPagePrevDisabled+'">'+oLang.sPrevious+'</div>'+
'<div tabindex="0" title="'+oLang.sNext+'" class="'+oSettings.oClasses.sPageNextDisabled+'">'+oLang.sNext+'</div>'
'<div title="'+oLang.sPrevious+'" class="'+oSettings.oClasses.sPagePrevDisabled+'" tabindex="0" role="button">'+oLang.sPrevious+'</div>'+
'<div title="'+oLang.sNext+'" class="'+oSettings.oClasses.sPageNextDisabled+'" tabindex="0" role="button">'+oLang.sNext+'</div>'
:
'<div tabindex="0" title="'+oLang.sPrevious+'" class="'+oSettings.oClasses.sPagePrevDisabled+'"><span class="'+oSettings.oClasses.sPageJUIPrev+'"></span></div>'+
'<div tabindex="0" title="'+oLang.sNext+'" class="'+oSettings.oClasses.sPageNextDisabled+'"><span class="'+oSettings.oClasses.sPageJUINext+'"></span></div>';
@ -63,6 +63,9 @@ $.extend( DataTable.ext.oPagination, {
nPaging.id = oSettings.sTableId+'_paginate';
nPrevious.id = oSettings.sTableId+'_previous';
nNext.id = oSettings.sTableId+'_next';
nPrevious.setAttribute('aria-controls', oSettings.sTableId);
nNext.setAttribute('aria-controls', oSettings.sTableId);
}
},