Mainframe: Added accessibility to tabs

Author: lamATnginx

assets/css/v2/style.css

@@ -1429,9 +1429,12 @@ li:has(> div > blockquote) {
   .tab-labels {
     display: flex;
     position: relative;
-    flex-wrap: wrap;
-    flex-direction: row;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    white-space: nowrap;
     margin: 0;
+    padding-left: 2rem;
 
     > :not(:last-child) {
       border-right: none;
@@ -1444,6 +1447,7 @@ li:has(> div > blockquote) {
       color: oklch(var(--color-brand));
       padding: 10px;
       margin: 0;
+      position: relative;
 
       label {
         cursor: pointer;
@@ -1465,19 +1469,23 @@ li:has(> div > blockquote) {
     }
   }
 
-  .tab-labels:before {
+  .tab-labels::before {
     content: "";
-    position: relative;
+    position: absolute;
+    display: block;
+    bottom: 0;
+    left: 0;
     width: 2rem;
     border-bottom: 1px solid oklch(var(--color-foreground));
   }
 
-  .tab-labels:after {
+  .tab-labels::after {
     content: "";
     position: relative;
     bottom: 0;
     left: 0;
-    flex-grow: 1;
+    right: 0;
+    width: 100%;
     border-bottom: 1px solid oklch(var(--color-foreground));
   }
 }

assets/js/tabs.js

@@ -0,0 +1,53 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const tabLists = document.querySelectorAll('.tab-labels');
+
+  tabLists.forEach((tabList) => {
+    const tabs = tabList.querySelectorAll(':scope > li > [role="tab"]');
+
+    let tabFocus = 0;
+    let selectedTab =
+      tabs[0].getAttribute('aria-selected') === 'true' ? tabs[0] : null;
+    tabList.addEventListener('keyup', (e) => {
+      if (e.key === 'Enter') {
+        // Reset existing the aria-selected that is true
+        selectedTab.setAttribute('aria-selected', 'false');
+        selectedTab = e.target;
+
+        // Change the tabs
+        changeTabs(e);
+      }
+    });
+
+    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) {
+            tabFocus = tabs.length - 1;
+          }
+        }
+
+        tabs[tabFocus].setAttribute('tabindex', 0);
+        tabs[tabFocus].focus();
+      }
+    });
+  });
+});
+
+function changeTabs(e) {
+  const toggle = document.getElementById(e.target.getAttribute('for'));
+  const label = e.target;
+
+  // Toggle to new content + update Aria attributes
+  if (toggle) {
+    toggle.checked = true;
+  }
+  label.setAttribute('aria-selected', 'true');
+}

layouts/partials/scripts.html

@@ -2,6 +2,10 @@
 {{ $codecopyv2 := resources.Get "/js/code-copy-v2.js" | fingerprint "sha512" }}
 <script src="{{ $codecopyv2.RelPermalink }}" type="text/javascript"></script>
 
+<!-- load tabs js -->
+{{ $tabs := resources.Get "/js/tabs.js" | fingerprint "sha512" }}
+<script src="{{ $tabs.RelPermalink }}" type="text/javascript"></script>
+
 <!-- load mermaid.js -->
 {{ if .Page.Store.Get "hasMermaid" }}
 {{ $mermaid := resources.Get "js/mermaid.min.js" | fingerprint "sha512" }}