From 00175972d97da9bd2dfaddb82284b09e9cf319b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sun, 1 Oct 2023 21:06:39 +0200
Subject: [PATCH] tabs: improve a11y by removing duplicate hidden title #662

---
 layouts/partials/shortcodes/tabs.html |  5 +---
 static/css/format-print.css           |  2 +-
 static/css/ie.css                     |  4 +--
 static/css/theme.css                  | 35 +++++++++------------------
 static/css/variant.css                |  4 +--
 5 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index 3279ce2881..2e03f832dc 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -65,10 +65,7 @@
       class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}
       onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
     >
-      <span>
-        <span class="tab-nav-hidden">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $page.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</span>
-        <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>
-      </span>
+      <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>
     </button>
   {{- end }}
   </div>
diff --git a/static/css/format-print.css b/static/css/format-print.css
index 905f9df55e..e0128c8327 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -160,7 +160,7 @@ div.box > .box-content {
     border-bottom-color: rgba( 255, 255, 255, 1 );
     color: rgba( 0, 0, 0, 1 );
 }
-#R-body .tab-nav-button.active > * {
+#R-body .tab-nav-button.active > .tab-nav-text {
     background-color: rgba( 255, 255, 255, 1 );
 }
 #R-body .tab-content-text {
diff --git a/static/css/ie.css b/static/css/ie.css
index 8d68cef5c3..351b24c4b7 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -810,11 +810,11 @@
 		color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */
 	}
 
-	#R-body .tab-nav-button.active > *{
+	#R-body .tab-nav-button.active > .tab-nav-text{
 		background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
 	}
 
-	#R-body .tab-nav-button > * > *{
+	#R-body .tab-nav-button > .tab-nav-text{
 		border-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
 	}
 
diff --git a/static/css/theme.css b/static/css/theme.css
index 3d3c12521e..2e805beacf 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -2084,36 +2084,23 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
     cursor: default;
 }
 
-#R-body .tab-nav-button > *{
-    display: block;
-    position: relative;
-}
-
-#R-body .tab-nav-button.active > *{
-    border-radius: 1px 1px 0 0;
-}
-
-#R-body .tab-nav-button > * > *{
+#R-body .tab-nav-button > .tab-nav-text{
     border-bottom-style: solid;
     border-bottom-width: .2rem;
+    display: block;
     padding: .2rem .6rem 0 .6rem;
 }
-
-#R-body .tab-nav-button.active > * > *{
+/* https://stackoverflow.com/a/46452396 */
+#R-body .tab-nav-button.active > .tab-nav-text{
     border-bottom-color: transparent;
-    font-weight: 500;
+    border-radius: 1px 1px 0 0;
+    text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor;
 }
-
-#R-body .tab-nav-button > * > .tab-nav-hidden{
-    display: block;
-    font-weight: 500;
-    visibility: hidden;
-}
-
-#R-body .tab-nav-button > * > .tab-nav-text{
-    display: block;
-    position: absolute;
-    top: 0;
+@supports (-webkit-text-stroke-width: 0.04ex){
+    #R-body .tab-nav-button.active > .tab-nav-text{
+        text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
+        -webkit-text-stroke-width: 0.04ex;
+    }
 }
 
 #R-body .tab-content{
diff --git a/static/css/variant.css b/static/css/variant.css
index 648baa445a..59947c6d7a 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -408,11 +408,11 @@ article ul > li > input[type="checkbox"] {
     color: var(--VARIABLE-BOX-TEXT-color);
 }
 
-#R-body .tab-nav-button.active > *{
+#R-body .tab-nav-button.active > .tab-nav-text{
     background-color: var(--VARIABLE-BOX-BG-color);
 }
 
-#R-body .tab-nav-button > * > *{
+#R-body .tab-nav-button > .tab-nav-text{
     border-color: var(--VARIABLE-BOX-color);
 }