From 1b0e8888616dc992c0a362794564877e235eca5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sun, 19 Nov 2023 00:55:23 +0100
Subject: [PATCH] tabs: remove active tab from tab order #726

---
 layouts/partials/shortcodes/tabs.html | 2 +-
 static/js/theme.js                    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index d6bc027233..c5fdf0531c 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -74,7 +74,7 @@
   {{- range $idx, $tab := $tabs }}
     <button
       data-tab-item="{{ .itemid }}"
-      class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}
+      class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}{{ if eq $idx 0 }} tabindex="-1"{{ end }}
       onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
     >
       <span class="tab-nav-text">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $page.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</span>
diff --git a/static/js/theme.js b/static/js/theme.js
index 2186f6d77c..4ecbbb9d7b 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -115,8 +115,8 @@ function switchTab(tabGroup, tabId) {
       var yposButton = event.target.getBoundingClientRect().top;
     }
 
-    allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); });
-    targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); });
+    allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); e.removeAttribute( 'tabindex' ); });
+    targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); e.setAttribute( 'tabindex', '-1' ); });
 
     if(isButtonEvent){
       initMermaid( true );