From 30b97357dc036c33793ff1af9d83097fec20967d Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Thu, 26 Feb 2026 07:56:47 -0500
Subject: [PATCH] Remove conflicting focus styles; use global :focus-visible
 rule

Audit found 10 overrides across 8 files that suppressed or replaced
the global focus ring. Removed all of them:

- templates/_file_form.html.erb: remove outline-none + focus:ring-*
- templates_clone/_form.html.erb: same
- templates_preferences/_recipients.html.erb: same
- template_builder/contenteditable.vue: remove outline-none
- template_builder/document.vue: remove focus:ring-2 from tab buttons
- template_builder/area.vue: remove focus:ring-1 from 3 elements
- template_builder/font_modal.vue: remove focus:ring-2 from contenteditable
- submission_form/phone_step.vue: remove focus-within:outline from container

All interactive elements now rely solely on the global :focus-visible
rule (8px solid rgb(14,99,200), 4px offset) in application.scss/form.scss.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/submission_form/phone_step.vue        | 2 +-
 app/javascript/template_builder/area.vue             | 6 +++---
 app/javascript/template_builder/contenteditable.vue  | 2 +-
 app/javascript/template_builder/document.vue         | 4 ++--
 app/javascript/template_builder/font_modal.vue       | 2 +-
 app/views/templates/_file_form.html.erb              | 2 +-
 app/views/templates_clone/_form.html.erb             | 2 +-
 app/views/templates_preferences/_recipients.html.erb | 2 +-
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/javascript/submission_form/phone_step.vue b/app/javascript/submission_form/phone_step.vue
index f7d22e45..2013dc97 100644
--- a/app/javascript/submission_form/phone_step.vue
+++ b/app/javascript/submission_form/phone_step.vue
@@ -68,7 +68,7 @@
       </div>
       <div
         v-show="!isCodeSent"
-        class="flex w-full rounded-full outline-neutral-content outline-2 outline-offset-2 focus-within:outline phone-number-input-container"
+        class="flex w-full rounded-full phone-number-input-container"
       >
         <div
           id="country_code"
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 1076a232..9fa7f25c 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -67,7 +67,7 @@
         :aria-multiline="editable && !defaultField && field.type !== 'heading' ? 'false' : undefined"
         :aria-label="editable && !defaultField && field.type !== 'heading' ? t('field_name') : undefined"
         dir="auto"
-        class="pr-1 cursor-text block focus:ring-1 focus:ring-base-content/40 focus:rounded-sm"
+        class="pr-1 cursor-text block"
         style="min-width: 2px"
         @paste.prevent="onPaste"
         @keydown.enter.prevent="onNameEnter"
@@ -278,7 +278,7 @@
             <select
               v-else-if="isSelectInput"
               ref="defaultValueSelect"
-              class="bg-transparent w-full focus:ring-1 focus:ring-base-content/40 focus:rounded-sm"
+              class="bg-transparent w-full"
               @change="[field.default_value = $event.target.value, field.readonly = !!field.default_value?.length, save()]"
               @focus="selectedAreasRef.value = [area]"
               @keydown.enter="onDefaultValueEnter"
@@ -303,7 +303,7 @@
               v-else
               ref="defaultValue"
               :contenteditable="isValueInput"
-              class="whitespace-pre-wrap empty:before:content-[attr(placeholder)] before:text-base-content/60 focus:ring-1 focus:ring-base-content/40 focus:rounded-sm"
+              class="whitespace-pre-wrap empty:before:content-[attr(placeholder)] before:text-base-content/60"
               :class="{ 'cursor-text': isValueInput }"
               :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value'))"
               @blur="onDefaultValueBlur"
diff --git a/app/javascript/template_builder/contenteditable.vue b/app/javascript/template_builder/contenteditable.vue
index ed7d9135..7b87de6a 100644
--- a/app/javascript/template_builder/contenteditable.vue
+++ b/app/javascript/template_builder/contenteditable.vue
@@ -11,7 +11,7 @@
       :data-empty="isEmpty"
       :style="{ minWidth }"
       :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '']"
-      class="peer relative inline-block outline-none before:pointer-events-none before:absolute before:left-0 before:top-0 before:select-none before:whitespace-pre before:text-neutral-600 before:content-[attr(data-placeholder)] before:opacity-0 data-[empty=true]:before:opacity-100"
+      class="peer relative inline-block before:pointer-events-none before:absolute before:left-0 before:top-0 before:select-none before:whitespace-pre before:text-neutral-600 before:content-[attr(data-placeholder)] before:opacity-0 data-[empty=true]:before:opacity-100"
       @paste.prevent="onPaste"
       @keydown.enter.prevent="blurContenteditable"
       @input="updateInputValue"
diff --git a/app/javascript/template_builder/document.vue b/app/javascript/template_builder/document.vue
index 224024d0..08715563 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 border-b-2 -mb-px focus:ring-2 focus:ring-inset focus:ring-base-content/50', !textViewActive ? 'border-neutral text-base-content font-semibold' : 'border-transparent text-base-content font-medium']"
+        :class="['px-4 py-2 text-sm border-b-2 -mb-px', !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 border-b-2 -mb-px focus:ring-2 focus:ring-inset focus:ring-base-content/50', textViewActive ? 'border-neutral text-base-content font-semibold' : 'border-transparent text-base-content font-medium']"
+        :class="['px-4 py-2 text-sm border-b-2 -mb-px', 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/javascript/template_builder/font_modal.vue b/app/javascript/template_builder/font_modal.vue
index f90753e3..193885ef 100644
--- a/app/javascript/template_builder/font_modal.vue
+++ b/app/javascript/template_builder/font_modal.vue
@@ -169,7 +169,7 @@
           >
             <span
               contenteditable="true"
-              class="whitespace-nowrap truncate focus:ring-2 focus:ring-base-content focus:ring-inset focus:rounded-sm"
+              class="whitespace-nowrap truncate"
             >
               {{ field.default_value || field.name || buildDefaultName(field) }}
             </span>
diff --git a/app/views/templates/_file_form.html.erb b/app/views/templates/_file_form.html.erb
index d7c774bd..baac4300 100644
--- a/app/views/templates/_file_form.html.erb
+++ b/app/views/templates/_file_form.html.erb
@@ -8,7 +8,7 @@
     </label>
     <folder-autocomplete class="flex justify-between w-full">
       <set-value data-on="blur" data-value="<%= TemplateFolder::DEFAULT_NAME %>" data-empty-only="true" class="peer w-full whitespace-nowrap">
-        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-base-content/50 focus:ring-1 focus:ring-base-content/20 bg-base-100 px-1 focus:rounded-sm" name="folder_name" value="<%= params[:folder_name].presence || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
+        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full border-transparent focus:border-base-content/50 bg-base-100 px-1" name="folder_name" value="<%= params[:folder_name].presence || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
       </set-value>
       <set-value data-on="click" data-value="" data-input-id="folder_name" class="peer-focus-within:hidden whitespace-nowrap">
         <label for="folder_name" data-clear-on-focus="true" class="shrink-0 link mr-1.5 cursor-pointer">
diff --git a/app/views/templates_clone/_form.html.erb b/app/views/templates_clone/_form.html.erb
index 86020508..00e52beb 100644
--- a/app/views/templates_clone/_form.html.erb
+++ b/app/views/templates_clone/_form.html.erb
@@ -14,7 +14,7 @@
     </label>
     <folder-autocomplete class="flex justify-between w-full">
       <set-value data-on="blur" data-value="<%= TemplateFolder::DEFAULT_NAME %>" data-empty-only="true" class="peer w-full whitespace-nowrap">
-        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-base-content/50 focus:ring-1 focus:ring-base-content/20 bg-base-100 px-1 focus:rounded-sm" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.full_name || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
+        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full border-transparent focus:border-base-content/50 bg-base-100 px-1" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.full_name || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
       </set-value>
       <set-value data-on="click" data-value="" data-input-id="folder_name" class="peer-focus-within:hidden whitespace-nowrap">
         <label for="folder_name" data-clear-on-focus="true" class="shrink-0 link mr-1.5 cursor-pointer">
diff --git a/app/views/templates_preferences/_recipients.html.erb b/app/views/templates_preferences/_recipients.html.erb
index 3393d916..daac7ecc 100644
--- a/app/views/templates_preferences/_recipients.html.erb
+++ b/app/views/templates_preferences/_recipients.html.erb
@@ -12,7 +12,7 @@
           <%= ff.hidden_field :uuid %>
           <div class="form-control">
             <div class="flex justify-between">
-              <%= ff.text_field :name, class: 'w-full outline-none border-transparent focus:border-base-content/50 focus:ring-1 focus:ring-base-content/20 bg-base-100 px-1 peer mb-2 focus:rounded-sm', autocomplete: 'off', placeholder: "#{index + 1}#{(index + 1).ordinal} Party", required: true %>
+              <%= ff.text_field :name, class: 'w-full border-transparent focus:border-base-content/50 bg-base-100 px-1 peer mb-2', autocomplete: 'off', placeholder: "#{index + 1}#{(index + 1).ordinal} Party", required: true %>
               <% if template.submitters.size > 2 %>
                 <div id="order_<%= submitter['uuid'] %>" class="mr-0.5">
                   <% if is_order_set %>