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

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

@ -24,6 +24,7 @@ function _fnFeatureHtmlInfo ( oSettings )
if ( oSettings.sTableId !== '' ) if ( oSettings.sTableId !== '' )
{ {
nInfo.setAttribute( 'id', oSettings.sTableId+'_info' ); 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 ); _fnDraw( oSettings );
} ); } );
if ( oSettings.sTableId )
{
$('select', nLength).attr('aria-controls', oSettings.sTableId);
}
return nLength; return nLength;
} }

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

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

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

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