mirror of
https://github.com/DataTables/DataTables.git
synced 2025-03-15 16:29:16 +01:00
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.
This commit is contained in:
parent
8eb722271e
commit
d0458ca22c
44
media/js/jquery.dataTables.js
vendored
44
media/js/jquery.dataTables.js
vendored
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -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 )
|
||||
|
@ -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' );
|
||||
|
@ -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 )
|
||||
|
@ -24,6 +24,7 @@ function _fnFeatureHtmlInfo ( oSettings )
|
||||
if ( oSettings.sTableId !== '' )
|
||||
{
|
||||
nInfo.setAttribute( 'id', oSettings.sTableId+'_info' );
|
||||
oSettings.nTable.setAttribute( 'aria-describedby', oSettings.sTableId+'_info' );
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -85,6 +85,12 @@ function _fnFeatureHtmlLength ( oSettings )
|
||||
|
||||
_fnDraw( oSettings );
|
||||
} );
|
||||
|
||||
|
||||
if ( oSettings.sTableId )
|
||||
{
|
||||
$('select', nLength).attr('aria-controls', oSettings.sTableId);
|
||||
}
|
||||
|
||||
return nLength;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user