From a9c96373c24f38511322dab6f740714ef5fc2287 Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Wed, 25 Feb 2026 13:43:43 -0500
Subject: [PATCH] Fix WCAG AA contrast on active tab label and border

primary color (#e4e0e1) is near-white against the base-100 background
(#faf7f5), giving ~1.1:1 contrast - essentially invisible. Replace with
text-base-content + border-neutral (#291334, ~15.9:1 against base-100).

Active state distinction is now conveyed by border-neutral underline +
font-semibold (not by color alone, satisfying WCAG 1.4.1 Use of Color).
Inactive tabs retain font-medium + border-transparent.

Also remove hover:text-primary from inactive tabs - primary is near-white
so that hover would have made inactive tab text invisible on hover.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/elements/document_tabs.js     | 6 +++---
 app/javascript/template_builder/document.vue | 4 ++--
 app/views/submissions/show.html.erb          | 4 ++--
 app/views/submit_form/show.html.erb          | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/javascript/elements/document_tabs.js b/app/javascript/elements/document_tabs.js
index 842a1ed7..a64f74af 100644
--- a/app/javascript/elements/document_tabs.js
+++ b/app/javascript/elements/document_tabs.js
@@ -18,10 +18,10 @@ export default class extends HTMLElement {
       const isSelected = tab === selectedTab
       tab.setAttribute('aria-selected', isSelected ? 'true' : 'false')
       tab.setAttribute('tabindex', isSelected ? '0' : '-1')
-      tab.classList.toggle('border-primary', isSelected)
-      tab.classList.toggle('text-primary', isSelected)
+      tab.classList.toggle('border-neutral', isSelected)
+      tab.classList.toggle('font-semibold', isSelected)
       tab.classList.toggle('border-transparent', !isSelected)
-      tab.classList.toggle('text-base-content', !isSelected)
+      tab.classList.toggle('font-medium', !isSelected)
     })
     this._panels.forEach((panel) => {
       panel.hidden = panel.id !== selectedTab.getAttribute('aria-controls')
diff --git a/app/javascript/template_builder/document.vue b/app/javascript/template_builder/document.vue
index 638827c2..d5ad0a2a 100644
--- a/app/javascript/template_builder/document.vue
+++ b/app/javascript/template_builder/document.vue
@@ -11,7 +11,7 @@
         type="button"
         :aria-selected="!textViewActive ? 'true' : 'false'"
         :tabindex="!textViewActive ? 0 : -1"
-        :class="['px-4 py-2 text-sm font-medium border-b-2 -mb-px focus:outline-none', !textViewActive ? 'border-primary text-primary' : 'border-transparent text-base-content hover:text-primary']"
+        :class="['px-4 py-2 text-sm border-b-2 -mb-px focus:outline-none', !textViewActive ? 'border-neutral text-base-content font-semibold' : 'border-transparent text-base-content font-medium']"
         @click="textViewActive = false"
         @keydown="onTabKeydown($event, false)"
       >
@@ -22,7 +22,7 @@
         type="button"
         :aria-selected="textViewActive ? 'true' : 'false'"
         :tabindex="textViewActive ? 0 : -1"
-        :class="['px-4 py-2 text-sm font-medium border-b-2 -mb-px focus:outline-none', textViewActive ? 'border-primary text-primary' : 'border-transparent text-base-content hover:text-primary']"
+        :class="['px-4 py-2 text-sm border-b-2 -mb-px focus:outline-none', textViewActive ? 'border-neutral text-base-content font-semibold' : 'border-transparent text-base-content font-medium']"
         @click="textViewActive = true"
         @keydown="onTabKeydown($event, true)"
       >
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index 33599165..a254f111 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -102,12 +102,12 @@
                class="flex border-b border-base-300 px-0.5 mb-2">
             <button role="tab" id="tab-pdf" aria-selected="true"
                     aria-controls="panel-pdf" tabindex="0"
-                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px border-primary text-primary">
+                    class="px-4 py-2 text-sm font-semibold border-b-2 -mb-px border-neutral text-base-content">
               <%= t('pdf_view') %>
             </button>
             <button role="tab" id="tab-text" aria-selected="false"
                     aria-controls="panel-text" tabindex="-1"
-                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px border-transparent text-base-content hover:text-primary">
+                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px border-transparent text-base-content">
               <%= t('text_view') %>
             </button>
           </div>
diff --git a/app/views/submit_form/show.html.erb b/app/views/submit_form/show.html.erb
index 1c658e0d..c4b7a381 100644
--- a/app/views/submit_form/show.html.erb
+++ b/app/views/submit_form/show.html.erb
@@ -70,12 +70,12 @@
                class="flex border-b border-base-300 mb-2 sticky top-[60px] z-40 bg-base-100 -mx-2 px-2">
             <button role="tab" id="tab-pdf" aria-selected="true"
                     aria-controls="panel-pdf" tabindex="0"
-                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px border-primary text-primary">
+                    class="px-4 py-2 text-sm font-semibold border-b-2 -mb-px border-neutral text-base-content">
               <%= t('pdf_view') %>
             </button>
             <button role="tab" id="tab-text" aria-selected="false"
                     aria-controls="panel-text" tabindex="-1"
-                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px border-transparent text-base-content hover:text-primary">
+                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px border-transparent text-base-content">
               <%= t('text_view') %>
             </button>
           </div>