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

@@ -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')

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)"
       >

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>

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>