From 5f53331cd649818d2058ac5d9636095b6a10e6eb Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Tue, 6 Dec 2011 10:39:22 +0000 Subject: [PATCH] New: Accessability change - use A tags rather than DIV/SPAN for the pagination buttons. This is a backwards incompatible change, but a sensible one --- media/css/demo_table.css | 12 +++++++----- media/js/jquery.dataTables.js | 30 ++++++++++++------------------ media/src/ext/ext.paging.js | 30 ++++++++++++------------------ 3 files changed, 31 insertions(+), 41 deletions(-) diff --git a/media/css/demo_table.css b/media/css/demo_table.css index 3bc04337..fcb46bd7 100644 --- a/media/css/demo_table.css +++ b/media/css/demo_table.css @@ -290,8 +290,8 @@ td.details { line-height: 22px; } -.paging_full_numbers span.paginate_button, - .paging_full_numbers span.paginate_active { +.paging_full_numbers a.paginate_button, + .paging_full_numbers a.paginate_active { border: 1px solid #aaa; -webkit-border-radius: 5px; -moz-border-radius: 5px; @@ -299,17 +299,19 @@ td.details { margin: 0 3px; cursor: pointer; *cursor: hand; + color: #333 !important; } -.paging_full_numbers span.paginate_button { +.paging_full_numbers a.paginate_button { background-color: #ddd; } -.paging_full_numbers span.paginate_button:hover { +.paging_full_numbers a.paginate_button:hover { background-color: #ccc; + text-decoration: none !important; } -.paging_full_numbers span.paginate_active { +.paging_full_numbers a.paginate_active { background-color: #99B3FF; } diff --git a/media/js/jquery.dataTables.js b/media/js/jquery.dataTables.js index 4db4801f..03f06431 100644 --- a/media/js/jquery.dataTables.js +++ b/media/js/jquery.dataTables.js @@ -9738,16 +9738,10 @@ /* Store the next and previous elements in the oSettings object as they can be very * useful for automation - particularly testing */ - if ( !oSettings.bJUI ) + nPrevious = document.createElement( 'a' ); + nNext = document.createElement( 'a' ); + if ( oSettings.bJUI ) { - nPrevious = document.createElement( 'div' ); - nNext = document.createElement( 'div' ); - } - else - { - nPrevious = document.createElement( 'a' ); - nNext = document.createElement( 'a' ); - nNextInner = document.createElement('span'); nNextInner.className = oSettings.oClasses.sPageJUINext; nNext.appendChild( nNextInner ); @@ -9838,11 +9832,11 @@ */ "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) { - var nFirst = document.createElement( 'span' ); - var nPrevious = document.createElement( 'span' ); + var nFirst = document.createElement( 'a' ); + var nPrevious = document.createElement( 'a' ); var nList = document.createElement( 'span' ); - var nNext = document.createElement( 'span' ); - var nLast = document.createElement( 'span' ); + var nNext = document.createElement( 'a' ); + var nLast = document.createElement( 'a' ); var fnClickHandler = function ( e ) { if ( oSettings.oApi._fnPageChange( oSettings, e.data.action ) ) { @@ -9943,11 +9937,11 @@ { if ( iCurrentPage != i ) { - sList += ''+i+''; + sList += ''+i+''; } else { - sList += ''+i+''; + sList += ''+i+''; } } @@ -9971,13 +9965,13 @@ } /* 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 ); - $('span', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse ) + $('a', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse ) .bind( 'selectstart.DT', fnFalse ); /* Update the 'premanent botton's classes */ - anButtons = an[i].getElementsByTagName('span'); + anButtons = an[i].getElementsByTagName('a'); anStatic = [ anButtons[0], anButtons[1], anButtons[anButtons.length-2], anButtons[anButtons.length-1] diff --git a/media/src/ext/ext.paging.js b/media/src/ext/ext.paging.js index 04cd8b75..607c1187 100644 --- a/media/src/ext/ext.paging.js +++ b/media/src/ext/ext.paging.js @@ -32,16 +32,10 @@ $.extend( _oExt.oPagination, { /* Store the next and previous elements in the oSettings object as they can be very * useful for automation - particularly testing */ - if ( !oSettings.bJUI ) + nPrevious = document.createElement( 'a' ); + nNext = document.createElement( 'a' ); + if ( oSettings.bJUI ) { - nPrevious = document.createElement( 'div' ); - nNext = document.createElement( 'div' ); - } - else - { - nPrevious = document.createElement( 'a' ); - nNext = document.createElement( 'a' ); - nNextInner = document.createElement('span'); nNextInner.className = oSettings.oClasses.sPageJUINext; nNext.appendChild( nNextInner ); @@ -132,11 +126,11 @@ $.extend( _oExt.oPagination, { */ "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) { - var nFirst = document.createElement( 'span' ); - var nPrevious = document.createElement( 'span' ); + var nFirst = document.createElement( 'a' ); + var nPrevious = document.createElement( 'a' ); var nList = document.createElement( 'span' ); - var nNext = document.createElement( 'span' ); - var nLast = document.createElement( 'span' ); + var nNext = document.createElement( 'a' ); + var nLast = document.createElement( 'a' ); var fnClickHandler = function ( e ) { if ( oSettings.oApi._fnPageChange( oSettings, e.data.action ) ) { @@ -237,11 +231,11 @@ $.extend( _oExt.oPagination, { { if ( iCurrentPage != i ) { - sList += ''+i+''; + sList += ''+i+''; } else { - sList += ''+i+''; + sList += ''+i+''; } } @@ -265,13 +259,13 @@ $.extend( _oExt.oPagination, { } /* 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 ); - $('span', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse ) + $('a', qjPaginateList).bind( 'click.DT', fnClick ).bind( 'mousedown.DT', fnFalse ) .bind( 'selectstart.DT', fnFalse ); /* Update the 'premanent botton's classes */ - anButtons = an[i].getElementsByTagName('span'); + anButtons = an[i].getElementsByTagName('a'); anStatic = [ anButtons[0], anButtons[1], anButtons[anButtons.length-2], anButtons[anButtons.length-1]