Keyboard navigating + paging + links

viciousvictor

I have been working with DataTables for some time now, and a few days ago someone pointed out that the tables are not 508 compliant.

The google site search led me to the paging plugin with the anchor tags, but it still wasn't working quite right, as the anchor tags cannot be keyboard navigated to.

I thought I'd contribute back on what i did to make it work, and maybe someone can pretty it up, as my code is kind of ugly.

sorry for the long blocks of code.

From:
[code]
$(nFirst).bind( 'click.DT', function () {
if ( oSettings.oApi._fnPageChange( oSettings, "first" ) )
{
fnCallbackDraw( oSettings );
}
} );
[/code]
To:
[code]
$(nFirst).bind( 'click.DT', function (e) {
if ( oSettings.oApi._fnPageChange( oSettings, "first" ) )
{
fnCallbackDraw( oSettings );
}
this.focus;
e.preventDefault();
} );
[/code]
repeat the above for the nPrevious nNext nLast, this is so when you hit 'enter' on the keyboard it doesn't scroll to the top of the page.


From:
[code]
if ( oSettings.sTableId !== '' && typeof oSettings.aanFeatures.p == "undefined" )
{
nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
nFirst.setAttribute( 'id', oSettings.sTableId+'_first' );
nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
nNext.setAttribute( 'id', oSettings.sTableId+'_next' );
nLast.setAttribute( 'id', oSettings.sTableId+'_last' );
}
[/code]
To:
[code]
if ( oSettings.sTableId !== '' && typeof oSettings.aanFeatures.p == "undefined" )
{
nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' );
nFirst.setAttribute( 'id', oSettings.sTableId+'_first' );
nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' );
nNext.setAttribute( 'id', oSettings.sTableId+'_next' );
nLast.setAttribute( 'id', oSettings.sTableId+'_last' );

nFirst.setAttribute( 'href', '#');
nPrevious.setAttribute( 'href', '#');
nNext.setAttribute( 'href', '#');
nLast.setAttribute( 'href', '#');
}
[/code]
This is so that the anchor can be keyboard 'tabbed' into, it needs the href="#"




From:
[code]
/* Build the dynamic list */
for ( i=iStartButton ; i<=iEndButton ; i++ )
{
if ( iCurrentPage != i )
{
sList += ''+i+'';
}
else
{
sList += ''+i+'';
}
}
[/code]
To:
[code]
/* Build the dynamic list */
for ( i=iStartButton ; i<=iEndButton ; i++ )
{
if ( iCurrentPage != i )
{
sList += ''+i+'';
}
else
{
sList += ''+i+'';
}
}
[/code]
This is so that the anchor can be keyboard 'tabbed' into, it needs the href="#"


From:
[code]
var fnClick = function(e) {
/* Use the information in the element to jump to the required page */
var iTarget = (this.innerHTML * 1) - 1;
oSettings._iDisplayStart = iTarget * oSettings._iDisplayLength;
fnCallbackDraw( oSettings );
e.preventDefault();
};
[/code]
To:
[code]
var fnClick = function(e) {
var varSpan = $(this).parent(); // save this's parent

/* Use the information in the element to jump to the required page */
var iTarget = (this.innerHTML * 1) - 1;
oSettings._iDisplayStart = iTarget * oSettings._iDisplayLength;
fnCallbackDraw( oSettings );

//after draw: focus on current number
varSpan.children( 'a' ).get(iTarget).focus();
e.preventDefault();
};
[/code]
This part is for the [1][2][3]...
had to save the span as a variable, as the numbers are being redrawn; then reselect the one that was clicked on.
There might be a better way of doing this.

BrendanWCB

I've come across a similar situation. When I use this plugin, the buttons are no longer buttons, just links on the page (First, Previous, etc) - that's great that they are now links so they can be tabbed to by the keyboard, so I thought it could be because the plug-in may have renamed/changed the name of the buttons, or changed the classname, and now it can't associate the style in the stylesheet with the buttons. I've tried a few different re-names of the stylesheet class, but no luck yet.

viciousvictor

@Brendan:
I have not seen the issue that you are seeing, but that's probably because our implementations use Themeroller with jQuery UI. There's probably no styles included DataTables for the anchor tags.

BrendanWCB

@viciousvictor - understood. That might be a better way to go.

I think I've got this working for now. It was the stylesheet assignment - with the help of a co-worker (who's a real wiz with style sheets!) how to get the buttons to appear.

Instead of this...

.paging_full_numbers span.paginate_button,
.paging_full_numbers span.paginate_active {
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
cursor: pointer;
}

.paging_full_numbers span.paginate_button {
background-color: #ddd;
}

.paging_full_numbers span.paginate_button:hover {
background-color: #ccc;
}

.paging_full_numbers span.paginate_active {
background-color: #99B3FF;
}


make it a simpler styling...now, this might mess up something else that calls the .css, but I'm not using any other styling on the page....



.paging_full_numbers span{
padding-top:50px;
}

.paginate_button {
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
cursor: pointer;
}


.paginate_active {
margin-top:5px;
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
cursor: pointer;
}

a.paginate_button {
background-color: #ddd;
}

a.paginate_button:hover {
background-color: #ccc;
}

a.paginate_active {
background-color: #99B3FF;
}