Fix: Use -1 as the tab index for paging buttons in styling integratio…

…ns and tidy up logic in the built in paging buttons for the disabled state https://datatables.net/forums/discussion/75174/
DataTables · Jul 12, 2023 · 3c31dce · 3c31dce
1 parent 86e7490
commit 3c31dce
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 21 deletions.
diff --git a/js/ext/ext.paging.js b/js/ext/ext.paging.js
@@ -77,7 +77,7 @@ $.extend( true, DataTable.ext.renderer, {
 			var btnDisplay, btnClass;
 
 			var attach = function( container, buttons ) {
-				var i, ien, node, button, tabIndex;
+				var i, ien, node, button;
 				var disabledClass = classes.sPageButtonDisabled;
 				var clickHandler = function ( e ) {
 					_fnPageChange( settings, e.data.action, true );
@@ -92,9 +92,10 @@ $.extend( true, DataTable.ext.renderer, {
 						attach( inner, button );
 					}
 					else {
+						var disabled = false;
+
 						btnDisplay = null;
 						btnClass = button;
-						tabIndex = settings.iTabIndex;
 
 						switch ( button ) {
 							case 'ellipsis':
@@ -105,35 +106,31 @@ $.extend( true, DataTable.ext.renderer, {
 								btnDisplay = lang.sFirst;
 
 								if ( page === 0 ) {
-									tabIndex = -1;
-									btnClass += ' ' + disabledClass;
+									disabled = true;
 								}
 								break;
 
 							case 'previous':
 								btnDisplay = lang.sPrevious;
 
 								if ( page === 0 ) {
-									tabIndex = -1;
-									btnClass += ' ' + disabledClass;
+									disabled = true;
 								}
 								break;
 
 							case 'next':
 								btnDisplay = lang.sNext;
 
 								if ( pages === 0 || page === pages-1 ) {
-									tabIndex = -1;
-									btnClass += ' ' + disabledClass;
+									disabled = true;
 								}
 								break;
 
 							case 'last':
 								btnDisplay = lang.sLast;
 
 								if ( pages === 0 || page === pages-1 ) {
-									tabIndex = -1;
-									btnClass += ' ' + disabledClass;
+									disabled = true;
 								}
 								break;
 
@@ -146,8 +143,10 @@ $.extend( true, DataTable.ext.renderer, {
 
 						if ( btnDisplay !== null ) {
 							var tag = settings.oInit.pagingTag || 'a';
-							var disabled = btnClass.indexOf(disabledClass) !== -1;
-
+
+							if (disabled) {
+								btnClass += ' ' + disabledClass;
+							}
 
 							node = $('<'+tag+'>', {
 									'class': classes.sPageButton+' '+btnClass,
@@ -157,7 +156,7 @@ $.extend( true, DataTable.ext.renderer, {
 									'role': 'link',
 									'aria-current': btnClass === classes.sPageButtonActive ? 'page' : null,
 									'data-dt-idx': button,
-									'tabindex': tabIndex,
+									'tabindex': disabled ? -1 : settings.iTabIndex,
 									'id': idx === 0 && typeof button === 'string' ?
 										settings.sTableId +'_'+ button :
 										null

diff --git a/js/integration/dataTables.bootstrap.js b/js/integration/dataTables.bootstrap.js
@@ -111,7 +111,7 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
 								'role': 'link',
 								'aria-current': btnClass === 'active' ? 'page' : null,
 								'data-dt-idx': button,
-								'tabindex': settings.iTabIndex
+								'tabindex': disabled ? -1 : settings.iTabIndex
 							} )
 							.html( btnDisplay )
 						)

diff --git a/js/integration/dataTables.bootstrap4.js b/js/integration/dataTables.bootstrap4.js
@@ -112,7 +112,7 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
 								'role': 'link',
 								'aria-current': btnClass === 'active' ? 'page' : null,
 								'data-dt-idx': button,
-								'tabindex': settings.iTabIndex,
+								'tabindex': disabled ? -1 : settings.iTabIndex,
 								'class': 'page-link'
 							} )
 							.html( btnDisplay )

diff --git a/js/integration/dataTables.bootstrap5.js b/js/integration/dataTables.bootstrap5.js
@@ -112,7 +112,7 @@ DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, bu
 								'role': 'link',
 								'aria-current': btnClass === 'active' ? 'page' : null,
 								'data-dt-idx': button,
-								'tabindex': settings.iTabIndex,
+								'tabindex': disabled ? -1 : settings.iTabIndex,
 								'class': 'page-link'
 							} )
 							.html( btnDisplay )

diff --git a/js/integration/dataTables.bulma.js b/js/integration/dataTables.bulma.js
@@ -107,7 +107,7 @@ DataTable.ext.renderer.pageButton.bulma = function ( settings, host, idx, button
 								'role': 'link',
 								'aria-current': btnClass === 'is-current' ? 'page' : null,
 								'data-dt-idx': button,
-								'tabindex': settings.iTabIndex,
+								'tabindex': disabled ? -1 : settings.iTabIndex,
 								'class': 'pagination-link ' + btnClass,
 								'disabled': disabled
 							} )

diff --git a/js/integration/dataTables.foundation.js b/js/integration/dataTables.foundation.js
@@ -128,7 +128,7 @@ DataTable.ext.renderer.pageButton.foundation = function ( settings, host, idx, b
 								'aria-label': aria[ button ],
 								'role': 'link',
 								'aria-current': btnClass === 'current' ? 'page' : null,
-								'tabindex': settings.iTabIndex,
+								'tabindex': disabled ? -1 : settings.iTabIndex,
 							} ).html( btnDisplay ) :
 							btnDisplay
 						)

diff --git a/js/integration/dataTables.material.js b/js/integration/dataTables.material.js
@@ -116,7 +116,7 @@ DataTable.ext.renderer.pageButton.material = function ( settings, host, idx, but
 							'aria-controls': settings.sTableId,
 							'aria-label': aria[ button ],
 							'data-dt-idx': button,
-							'tabindex': settings.iTabIndex,
+							'tabindex': disabled ? -1 : settings.iTabIndex,
 							'disabled': btnClass.indexOf('disabled') !== -1
 						} )
 						.html( btnDisplay )

diff --git a/js/integration/dataTables.semanticui.js b/js/integration/dataTables.semanticui.js
@@ -121,7 +121,7 @@ DataTable.ext.renderer.pageButton.semanticUI = function ( settings, host, idx, b
 							'role': 'link',
 							'aria-current': btnClass === 'active' ? 'page' : null,
 							'data-dt-idx': button,
-							'tabindex': settings.iTabIndex
+							'tabindex': disabled ? -1 : settings.iTabIndex
 						} )
 						.html( btnDisplay )
 						.appendTo( container );

diff --git a/js/integration/dataTables.uikit.js b/js/integration/dataTables.uikit.js
@@ -105,7 +105,7 @@ DataTable.ext.renderer.pageButton.uikit = function ( settings, host, idx, button
 								'role': 'link',
 								'aria-current': btnClass === 'active' ? 'page' : null,
 								'data-dt-idx': button,
-								'tabindex': settings.iTabIndex
+								'tabindex': disabled ? -1 : settings.iTabIndex
 							} )
 							.html( btnDisplay )
 						)