From 3ed5ce3a1915ceb8faab2a23f200592fef5027d0 Mon Sep 17 00:00:00 2001
From: eltonlockhart <elton.lockhart@civicscreens.com>
Date: Mon, 14 Jun 2021 11:45:18 +1000
Subject: [PATCH] Quick fix to allow tab navigation to toggle-group div and
 keyboard interactivity.

---
 js/bootstrap4-toggle.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/js/bootstrap4-toggle.js b/js/bootstrap4-toggle.js
index 3ac924b..5e5de0a 100755
--- a/js/bootstrap4-toggle.js
+++ b/js/bootstrap4-toggle.js
@@ -60,7 +60,7 @@
 			.addClass(this._offstyle + ' ' + size)
 		var $toggleHandle = $('<span class="toggle-handle btn btn-light">')
 			.addClass(size)
-		var $toggleGroup = $('<div class="toggle-group">')
+		var $toggleGroup = $('<div class="toggle-group" tabindex="0">')
 			.append($toggleOn, $toggleOff, $toggleHandle)
 		var $toggle = $('<div class="toggle btn" data-toggle="toggle" role="button">')
 			.addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' )
@@ -183,5 +183,17 @@
 		var $checkbox = $(this).find('input[type=checkbox]')
 		$checkbox.bootstrapToggle('toggle')
 		e.preventDefault()
-	})
+	});
+
+	$(document).on('keypress', 'div[data-toggle^=toggle]', function handleKeyPress(event) {
+		console.log('keypress triggered');
+		let isEnterOrSpace = event.keyCode === 32 || event.keyCode === 13;
+		if (isEnterOrSpace) {
+			// Don't scroll the page if space is pressed
+			var $checkbox = $(this).find('input[type=checkbox]')
+			$checkbox.bootstrapToggle('toggle')
+			event.preventDefault()
+		}
+	});
+
 }(jQuery);