New: Focus trap for drop downs - tab (keyboard) navigation through th…

…e dropdowns will now be restricted to the drop down while it is active.

https://datatables.net/forums/discussion/70659
Many thanks to silkspin for the input!

css/buttons.dataTables.scss

@@ -47,8 +47,7 @@ input.dt-button {
 		opacity: 0.4;
 	}
 
-	&:active:not(.disabled),
-	&.active:not(.disabled) {
+	&:active:not(.disabled) {
 		@include dtb-two-stop-gradient(
 			lighten($dtb-button-colour, 70%),
 			darken($dtb-button-colour, 20%)
@@ -86,6 +85,10 @@ input.dt-button {
 		);
 	}
 
+	&.active:focus:not(.disabled) {
+		background: linear-gradient(to bottom, lighten($dtb-button-focus-colour, 20%) 0%, $dtb-button-focus-colour 100%) !important;
+	}
+
 	span.dt-down-arrow {
 		position: relative;
 		top: -2px;

js/dataTables.buttons.js

@@ -1460,6 +1460,34 @@ $.extend( Buttons.prototype, {
 					if ( e.keyCode === 27 ) {
 						close();
 					}
+				} )
+				.on( 'keydown.dtb-collection', function (e) {
+					// Focus trap for tab key
+					var elements = $('a, button', content);
+					var active = document.activeElement;
+
+					if (e.keyCode !== 9) { // tab
+						return;
+					}
+
+					if (elements.index(active) === -1) {
+						// If current focus is not inside the popover
+						elements.first().focus();
+						e.preventDefault();
+					}
+					else if (e.shiftKey) {
+						// Reverse tabbing order when shift key is pressed
+						if (active === elements[0]) {
+							elements.last().focus();
+							e.preventDefault();
+						}
+					}
+					else {
+						if (active === elements.last()[0]) {
+							elements.first().focus();
+							e.preventDefault();
+						}
+					}
 				} );
 		}, 0);
 	}
@@ -1819,6 +1847,7 @@ $.extend( _dtButtons, {
 			button.attr( 'aria-expanded', false );
 		},
 		action: function ( e, dt, button, config ) {
+			console.log('button', e, config);
 			if ( config._collection.parents('body').length ) {
 				this.popover(false, config);
 			}