From 230e963f812b3131956adae532b79c14fbf9607e Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Wed, 25 Feb 2026 13:37:59 -0500
Subject: [PATCH] Fix WCAG AA contrast on inactive tab text in document tab
 switcher

text-base-content/60 (~4.1:1 against base-100) fails the 4.5:1 AA minimum
for normal-weight text. Change inactive tab to text-base-content (full
opacity, ~14:1) so contrast is unambiguously compliant. Visual distinction
between active/inactive now relies on the colored border underline + primary
text color, not opacity dimming. Hover updated to hover:text-primary to
preview the tab's active color before clicking.

Affects: submissions/show, submit_form/show, document_tabs.js, document.vue.

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

diff --git a/app/javascript/elements/document_tabs.js b/app/javascript/elements/document_tabs.js
index f7aa6cca..842a1ed7 100644
--- a/app/javascript/elements/document_tabs.js
+++ b/app/javascript/elements/document_tabs.js
@@ -21,7 +21,7 @@ export default class extends HTMLElement {
       tab.classList.toggle('border-primary', isSelected)
       tab.classList.toggle('text-primary', isSelected)
       tab.classList.toggle('border-transparent', !isSelected)
-      tab.classList.toggle('text-base-content/60', !isSelected)
+      tab.classList.toggle('text-base-content', !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 fd82799e..638827c2 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/60 hover:text-base-content']"
+        :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']"
         @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/60 hover:text-base-content']"
+        :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']"
         @click="textViewActive = true"
         @keydown="onTabKeydown($event, true)"
       >
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index c65d3923..33599165 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -107,7 +107,7 @@
             </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/60 hover:text-base-content">
+                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px border-transparent text-base-content hover:text-primary">
               <%= t('text_view') %>
             </button>
           </div>
diff --git a/app/views/submit_form/show.html.erb b/app/views/submit_form/show.html.erb
index 7ec2bb98..1c658e0d 100644
--- a/app/views/submit_form/show.html.erb
+++ b/app/views/submit_form/show.html.erb
@@ -75,7 +75,7 @@
             </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/60 hover:text-base-content">
+                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px border-transparent text-base-content hover:text-primary">
               <%= t('text_view') %>
             </button>
           </div>