1
0
mirror of https://github.com/DataTables/DataTables.git synced 2024-12-10 22:24:10 +01:00

New: Accessability change - use A tags rather than DIV/SPAN for the pagination buttons. This is a backwards incompatible change, but a sensible one

This commit is contained in:
Allan Jardine 2011-12-06 10:39:22 +00:00
parent 25fadbc644
commit 5f53331cd6
3 changed files with 31 additions and 41 deletions

View File

@ -290,8 +290,8 @@ td.details {
line-height: 22px; line-height: 22px;
} }
.paging_full_numbers span.paginate_button, .paging_full_numbers a.paginate_button,
.paging_full_numbers span.paginate_active { .paging_full_numbers a.paginate_active {
border: 1px solid #aaa; border: 1px solid #aaa;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
@ -299,17 +299,19 @@ td.details {
margin: 0 3px; margin: 0 3px;
cursor: pointer; cursor: pointer;
*cursor: hand; *cursor: hand;
color: #333 !important;
} }
.paging_full_numbers span.paginate_button { .paging_full_numbers a.paginate_button {
background-color: #ddd; background-color: #ddd;
} }
.paging_full_numbers span.paginate_button:hover { .paging_full_numbers a.paginate_button:hover {
background-color: #ccc; background-color: #ccc;
text-decoration: none !important;
} }
.paging_full_numbers span.paginate_active { .paging_full_numbers a.paginate_active {
background-color: #99B3FF; background-color: #99B3FF;
} }

View File

@ -9738,16 +9738,10 @@
/* Store the next and previous elements in the oSettings object as they can be very /* Store the next and previous elements in the oSettings object as they can be very
* useful for automation - particularly testing * useful for automation - particularly testing
*/ */
if ( !oSettings.bJUI )
{
nPrevious = document.createElement( 'div' );
nNext = document.createElement( 'div' );
}
else
{
nPrevious = document.createElement( 'a' ); nPrevious = document.createElement( 'a' );
nNext = document.createElement( 'a' ); nNext = document.createElement( 'a' );
if ( oSettings.bJUI )
{
nNextInner = document.createElement('span'); nNextInner = document.createElement('span');
nNextInner.className = oSettings.oClasses.sPageJUINext; nNextInner.className = oSettings.oClasses.sPageJUINext;
nNext.appendChild( nNextInner ); nNext.appendChild( nNextInner );
@ -9838,11 +9832,11 @@
*/ */
"fnInit": function ( oSettings, nPaging, fnCallbackDraw ) "fnInit": function ( oSettings, nPaging, fnCallbackDraw )
{ {
var nFirst = document.createElement( 'span' ); var nFirst = document.createElement( 'a' );
var nPrevious = document.createElement( 'span' ); var nPrevious = document.createElement( 'a' );
var nList = document.createElement( 'span' ); var nList = document.createElement( 'span' );
var nNext = document.createElement( 'span' ); var nNext = document.createElement( 'a' );
var nLast = document.createElement( 'span' ); var nLast = document.createElement( 'a' );
var fnClickHandler = function ( e ) { var fnClickHandler = function ( e ) {
if ( oSettings.oApi._fnPageChange( oSettings, e.data.action ) ) if ( oSettings.oApi._fnPageChange( oSettings, e.data.action ) )
{ {
@ -9943,11 +9937,11 @@
{ {
if ( iCurrentPage != i ) if ( iCurrentPage != i )
{ {
sList += '<span class="'+oClasses.sPageButton+'">'+i+'</span>'; sList += '<a class="'+oClasses.sPageButton+'">'+i+'</a>';
} }
else else
{ {
sList += '<span class="'+oClasses.sPageButtonActive+'">'+i+'</span>'; sList += '<a class="'+oClasses.sPageButtonActive+'">'+i+'</a>';
} }
} }
@ -9971,13 +9965,13 @@
} }
/* Build up the dynamic list forst - html and listeners */ /* Build up the dynamic list forst - html and listeners */
var qjPaginateList = $('span:eq(2)', an[i]); var qjPaginateList = $('span:eq(0)', an[i]);
qjPaginateList.html( sList ); qjPaginateList.html( sList );
$('span', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse ) $('a', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse )
.bind( 'selectstart.DT', fnFalse ); .bind( 'selectstart.DT', fnFalse );
/* Update the 'premanent botton's classes */ /* Update the 'premanent botton's classes */
anButtons = an[i].getElementsByTagName('span'); anButtons = an[i].getElementsByTagName('a');
anStatic = [ anStatic = [
anButtons[0], anButtons[1], anButtons[0], anButtons[1],
anButtons[anButtons.length-2], anButtons[anButtons.length-1] anButtons[anButtons.length-2], anButtons[anButtons.length-1]

View File

@ -32,16 +32,10 @@ $.extend( _oExt.oPagination, {
/* Store the next and previous elements in the oSettings object as they can be very /* Store the next and previous elements in the oSettings object as they can be very
* useful for automation - particularly testing * useful for automation - particularly testing
*/ */
if ( !oSettings.bJUI )
{
nPrevious = document.createElement( 'div' );
nNext = document.createElement( 'div' );
}
else
{
nPrevious = document.createElement( 'a' ); nPrevious = document.createElement( 'a' );
nNext = document.createElement( 'a' ); nNext = document.createElement( 'a' );
if ( oSettings.bJUI )
{
nNextInner = document.createElement('span'); nNextInner = document.createElement('span');
nNextInner.className = oSettings.oClasses.sPageJUINext; nNextInner.className = oSettings.oClasses.sPageJUINext;
nNext.appendChild( nNextInner ); nNext.appendChild( nNextInner );
@ -132,11 +126,11 @@ $.extend( _oExt.oPagination, {
*/ */
"fnInit": function ( oSettings, nPaging, fnCallbackDraw ) "fnInit": function ( oSettings, nPaging, fnCallbackDraw )
{ {
var nFirst = document.createElement( 'span' ); var nFirst = document.createElement( 'a' );
var nPrevious = document.createElement( 'span' ); var nPrevious = document.createElement( 'a' );
var nList = document.createElement( 'span' ); var nList = document.createElement( 'span' );
var nNext = document.createElement( 'span' ); var nNext = document.createElement( 'a' );
var nLast = document.createElement( 'span' ); var nLast = document.createElement( 'a' );
var fnClickHandler = function ( e ) { var fnClickHandler = function ( e ) {
if ( oSettings.oApi._fnPageChange( oSettings, e.data.action ) ) if ( oSettings.oApi._fnPageChange( oSettings, e.data.action ) )
{ {
@ -237,11 +231,11 @@ $.extend( _oExt.oPagination, {
{ {
if ( iCurrentPage != i ) if ( iCurrentPage != i )
{ {
sList += '<span class="'+oClasses.sPageButton+'">'+i+'</span>'; sList += '<a class="'+oClasses.sPageButton+'">'+i+'</a>';
} }
else else
{ {
sList += '<span class="'+oClasses.sPageButtonActive+'">'+i+'</span>'; sList += '<a class="'+oClasses.sPageButtonActive+'">'+i+'</a>';
} }
} }
@ -265,13 +259,13 @@ $.extend( _oExt.oPagination, {
} }
/* Build up the dynamic list forst - html and listeners */ /* Build up the dynamic list forst - html and listeners */
var qjPaginateList = $('span:eq(2)', an[i]); var qjPaginateList = $('span:eq(0)', an[i]);
qjPaginateList.html( sList ); qjPaginateList.html( sList );
$('span', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse ) $('a', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse )
.bind( 'selectstart.DT', fnFalse ); .bind( 'selectstart.DT', fnFalse );
/* Update the 'premanent botton's classes */ /* Update the 'premanent botton's classes */
anButtons = an[i].getElementsByTagName('span'); anButtons = an[i].getElementsByTagName('a');
anStatic = [ anStatic = [
anButtons[0], anButtons[1], anButtons[0], anButtons[1],
anButtons[anButtons.length-2], anButtons[anButtons.length-1] anButtons[anButtons.length-2], anButtons[anButtons.length-1]