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

Fix: Keyboard navigation of the paging control

- Because DataTables is destroying and creating elements for the paging
  control, focus is lost when navigating via keyboard. This is a real
  pain when trying to operate DataTables that way! Fix is to refocus on
  the new element.
This commit is contained in:
Allan Jardine 2014-04-17 09:26:28 +01:00
parent 3fb997f0b8
commit 22023595e8
2 changed files with 15 additions and 2 deletions

View File

@ -1 +1 @@
1d7bb5389cc0da4d1176ca115fda46b584d70e50
1d90761f159e7ff2b4453ce6ce246a79babdc426

View File

@ -13675,7 +13675,7 @@
_: function ( settings, host, idx, buttons, page, pages ) {
var classes = settings.oClasses;
var lang = settings.oLanguage.oPaginate;
var btnDisplay, btnClass;
var btnDisplay, btnClass, counter=0;
var attach = function( container, buttons ) {
var i, ien, node, button;
@ -13735,6 +13735,7 @@
node = $('<a>', {
'class': classes.sPageButton+' '+btnClass,
'aria-controls': settings.sTableId,
'data-dt-idx': counter,
'tabindex': settings.iTabIndex,
'id': idx === 0 && typeof button === 'string' ?
settings.sTableId +'_'+ button :
@ -13746,12 +13747,24 @@
_fnBindAction(
node, {action: button}, clickHandler
);
counter++;
}
}
}
};
// Because this approach is destroying and recreating the paging
// elements, focus is lost on the select button which is bad for
// accessibility. So we want to restore focus once the draw has
// completed
var activeEl = $(document.activeElement).data('dt-idx');
attach( $(host).empty(), buttons );
if ( activeEl !== null ) {
$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
}
}
}
} );