Mainframe: Adjusted js for tabs to add home + end + space support

Author: lamATnginx

assets/js/tabs.js

@@ -8,7 +8,8 @@ window.addEventListener('DOMContentLoaded', () => {
     let selectedTab =
       tabs[0].getAttribute('aria-selected') === 'true' ? tabs[0] : null;
     tabList.addEventListener('keyup', (e) => {
-      if (e.key === 'Enter') {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
         // Reset existing the aria-selected that is true
         selectedTab.setAttribute('aria-selected', 'false');
         selectedTab = e.target;
@@ -19,23 +20,37 @@ window.addEventListener('DOMContentLoaded', () => {
     });
 
     tabList.addEventListener('keydown', (e) => {
-      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-        tabs[tabFocus].setAttribute('tabindex', -1);
-        selectedTab =
-          tabs[tabFocus].getAttribute('aria-selected') === 'true'
-            ? tabs[tabFocus]
-            : selectedTab;
-        if (e.key === 'ArrowRight') {
-          tabFocus = (tabFocus + 1) % tabs.length;
-        } else if (e.key === 'ArrowLeft') {
-          tabFocus = tabFocus - 1;
-          if (tabFocus < 0) {
+      // Prevent page scrolling on space key hit
+      if (e.key === ' ') {
+        e.preventDefault();
+      } else {
+        if (
+          e.key === 'ArrowRight' ||
+          e.key === 'ArrowLeft' ||
+          e.key === 'Home' ||
+          e.key === 'End'
+        ) {
+          tabs[tabFocus].setAttribute('tabindex', -1);
+          selectedTab =
+            tabs[tabFocus].getAttribute('aria-selected') === 'true'
+              ? tabs[tabFocus]
+              : selectedTab;
+          if (e.key === 'ArrowRight') {
+            tabFocus = (tabFocus + 1) % tabs.length;
+          } else if (e.key === 'ArrowLeft') {
+            tabFocus = tabFocus - 1;
+            if (tabFocus < 0) {
+              tabFocus = tabs.length - 1;
+            }
+          } else if (e.key === 'Home') {
+            tabFocus = 0;
+          } else if (e.key === 'End') {
             tabFocus = tabs.length - 1;
           }
-        }
 
-        tabs[tabFocus].setAttribute('tabindex', 0);
-        tabs[tabFocus].focus();
+          tabs[tabFocus].setAttribute('tabindex', 0);
+          tabs[tabFocus].focus();
+        }
       }
     });
   });