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:
parent
3fb997f0b8
commit
22023595e8
@ -1 +1 @@
|
||||
1d7bb5389cc0da4d1176ca115fda46b584d70e50
|
||||
1d90761f159e7ff2b4453ce6ce246a79babdc426
|
||||
|
15
media/js/jquery.dataTables.js
vendored
15
media/js/jquery.dataTables.js
vendored
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
Loading…
Reference in New Issue
Block a user