From 1f86aa59df19dfff48563f230bacdc8d9deab6a0 Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Thu, 26 Feb 2026 08:14:27 -0500
Subject: [PATCH] =?UTF-8?q?Fix=20dropdown=20containers:=20tabindex=3D0=20?=
 =?UTF-8?q?=E2=86=92=20tabindex=3D-1=20across=20all=20dropdowns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All DaisyUI dropdown content elements had tabindex="0" which put the
entire menu container in the keyboard tab order, causing our :focus-visible
rule to outline the whole dropdown box rather than individual menu items.

Changed to tabindex="-1" in 14 files (3 ERB + 11 Vue):
- submissions_filters/_filter_button.html.erb
- shared/_templates_order_select.html.erb
- submissions/show.html.erb
- template_builder/{payment_settings,field_type,field,builder,
  custom_field,upload,google_drive_document_settings,area,
  font_modal(x2),field_submitter(x2),mobile_fields}.vue

tabindex="-1" keeps mouse-click focus working (DaisyUI :focus-within
CSS still fires) while removing the container from the Tab order.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/template_builder/area.vue                      | 2 +-
 app/javascript/template_builder/builder.vue                   | 2 +-
 app/javascript/template_builder/custom_field.vue              | 2 +-
 app/javascript/template_builder/field.vue                     | 2 +-
 app/javascript/template_builder/field_submitter.vue           | 4 ++--
 app/javascript/template_builder/field_type.vue                | 2 +-
 app/javascript/template_builder/font_modal.vue                | 4 ++--
 .../template_builder/google_drive_document_settings.vue       | 2 +-
 app/javascript/template_builder/mobile_fields.vue             | 2 +-
 app/javascript/template_builder/payment_settings.vue          | 2 +-
 app/javascript/template_builder/upload.vue                    | 2 +-
 app/views/shared/_templates_order_select.html.erb             | 2 +-
 app/views/submissions/show.html.erb                           | 2 +-
 app/views/submissions_filters/_filter_button.html.erb         | 2 +-
 14 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 9fa7f25c..7fe1c075 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -129,7 +129,7 @@
           <ul
             v-if="renderDropdown"
             ref="settingsDropdown"
-            tabindex="0"
+            tabindex="-1"
             class="dropdown-content menu menu-xs px-2 pb-2 pt-1 shadow rounded-box w-52 z-10 rounded-t-none"
             :style="{ backgroundColor: 'white' }"
             @dragstart.prevent.stop
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 34953da1..605a4392 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -189,7 +189,7 @@
                 </span>
               </label>
               <ul
-                tabindex="0"
+                tabindex="-1"
                 class="dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right"
               >
                 <li>
diff --git a/app/javascript/template_builder/custom_field.vue b/app/javascript/template_builder/custom_field.vue
index afc1dd8d..cdbb0f0e 100644
--- a/app/javascript/template_builder/custom_field.vue
+++ b/app/javascript/template_builder/custom_field.vue
@@ -72,7 +72,7 @@
             </label>
             <ul
               v-if="renderDropdown"
-              tabindex="0"
+              tabindex="-1"
               class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
               :style="{ backgroundColor: dropdownBgColor }"
               draggable="true"
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index a6bbb558..fcf821cd 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -121,7 +121,7 @@
             </label>
             <ul
               v-if="renderDropdown"
-              tabindex="0"
+              tabindex="-1"
               class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
               :style="{ backgroundColor: dropdownBgColor }"
               draggable="true"
diff --git a/app/javascript/template_builder/field_submitter.vue b/app/javascript/template_builder/field_submitter.vue
index 46b3f520..2826bc60 100644
--- a/app/javascript/template_builder/field_submitter.vue
+++ b/app/javascript/template_builder/field_submitter.vue
@@ -35,7 +35,7 @@
         </label>
         <ul
           v-if="editable && renderDropdown"
-          tabindex="0"
+          tabindex="-1"
           class="rounded-md min-w-max mb-2"
           :class="menuClasses"
           :style="menuStyle"
@@ -140,7 +140,7 @@
     </label>
     <ul
       v-if="(editable || !compact) && renderDropdown"
-      tabindex="0"
+      tabindex="-1"
       :class="menuClasses"
       :style="menuStyle"
       @click="closeDropdown"
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index 55633e08..8939281c 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/app/javascript/template_builder/field_type.vue
@@ -20,7 +20,7 @@
     </slot>
     <ul
       v-if="editable && renderDropdown"
-      tabindex="0"
+      tabindex="-1"
       class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
       :style="menuStyle"
       :class="menuClasses"
diff --git a/app/javascript/template_builder/font_modal.vue b/app/javascript/template_builder/font_modal.vue
index 193885ef..3ef1944c 100644
--- a/app/javascript/template_builder/font_modal.vue
+++ b/app/javascript/template_builder/font_modal.vue
@@ -38,7 +38,7 @@
                   />
                 </label>
                 <div
-                  tabindex="0"
+                  tabindex="-1"
                   class="dropdown-content p-0 mt-1 block z-10 menu shadow bg-white border border-base-300 rounded-md w-52"
                 >
                   <div
@@ -124,7 +124,7 @@
                   <component :is="valigns.find((v) => v.value === (preferences.valign || 'center'))?.icon" />
                 </label>
                 <div
-                  tabindex="0"
+                  tabindex="-1"
                   class="dropdown-content p-0 mt-1 block z-10 menu shadow bg-white border border-base-300 rounded-md"
                 >
                   <div
diff --git a/app/javascript/template_builder/google_drive_document_settings.vue b/app/javascript/template_builder/google_drive_document_settings.vue
index e4def4a7..0bb3e651 100644
--- a/app/javascript/template_builder/google_drive_document_settings.vue
+++ b/app/javascript/template_builder/google_drive_document_settings.vue
@@ -10,7 +10,7 @@
       />
     </label>
     <ul
-      tabindex="0"
+      tabindex="-1"
       :style="{ backgroundColor }"
       class="dropdown-content z-[1] shadow menu rounded-box"
     >
diff --git a/app/javascript/template_builder/mobile_fields.vue b/app/javascript/template_builder/mobile_fields.vue
index e0e51a88..1b3c9fc7 100644
--- a/app/javascript/template_builder/mobile_fields.vue
+++ b/app/javascript/template_builder/mobile_fields.vue
@@ -17,7 +17,7 @@
       />
     </label>
     <ul
-      tabindex="0"
+      tabindex="-1"
       class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3 mt-1.5 bg-base-100"
       @click="closeDropdown"
     >
diff --git a/app/javascript/template_builder/payment_settings.vue b/app/javascript/template_builder/payment_settings.vue
index 1a036748..e1478378 100644
--- a/app/javascript/template_builder/payment_settings.vue
+++ b/app/javascript/template_builder/payment_settings.vue
@@ -14,7 +14,7 @@
       />
     </label>
     <ul
-      tabindex="0"
+      tabindex="-1"
       class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10"
       draggable="true"
       @dragstart.prevent.stop
diff --git a/app/javascript/template_builder/upload.vue b/app/javascript/template_builder/upload.vue
index 813ce12e..9af8e9fb 100644
--- a/app/javascript/template_builder/upload.vue
+++ b/app/javascript/template_builder/upload.vue
@@ -44,7 +44,7 @@
             <IconChevronDown class="w-5 h-5 flex-shrink-0" />
           </label>
           <ul
-            tabindex="0"
+            tabindex="-1"
             :style="{ backgroundColor }"
             class="dropdown-content p-2 mt-2 shadow menu text-base mb-1 rounded-box text-right !text-base-content"
           >
diff --git a/app/views/shared/_templates_order_select.html.erb b/app/views/shared/_templates_order_select.html.erb
index 2924b6af..3af226d0 100644
--- a/app/views/shared/_templates_order_select.html.erb
+++ b/app/views/shared/_templates_order_select.html.erb
@@ -2,7 +2,7 @@
   <label tabindex="0" class="btn btn-sm h-10">
     <%= svg_icon('arrow_sort', class: 'w-5 h-5') %>
   </label>
-  <ul tabindex="0" class="dropdown-content z-[10] menu p-2 shadow bg-base-100 rounded-box mb-1 min-w-48">
+  <ul tabindex="-1" class="dropdown-content z-[10] menu p-2 shadow bg-base-100 rounded-box mb-1 min-w-48">
     <toggle-cookies data-value="created_at" data-key="dashboard_templates_order">
       <li>
         <button class="<%= 'bg-base-200' if selected_order == 'created_at' %>">
diff --git a/app/views/submissions/show.html.erb b/app/views/submissions/show.html.erb
index bc6322b3..82b4f32f 100644
--- a/app/views/submissions/show.html.erb
+++ b/app/views/submissions/show.html.erb
@@ -50,7 +50,7 @@
                     <%= svg_icon('chevron_down', class: 'w-6 h-6 flex-shrink-0 stroke-2') %>
                   </span>
                 </label>
-                <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right">
+                <ul tabindex="-1" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box text-right">
                   <li>
                     <download-button data-src="<%= submitter_download_index_path(last_submitter.slug, { sig: params[:sig], combined: true }.compact) %>" class="flex items-center">
                       <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
diff --git a/app/views/submissions_filters/_filter_button.html.erb b/app/views/submissions_filters/_filter_button.html.erb
index 2e65f0ed..197ef9ac 100644
--- a/app/views/submissions_filters/_filter_button.html.erb
+++ b/app/views/submissions_filters/_filter_button.html.erb
@@ -4,7 +4,7 @@
     <%= svg_icon('filter', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
     <span class="<%= filter_params.then { |f| f[:status].in?(%w[pending completed]) ? f.except(:status) : f }.present? ? 'md:hidden' : '' %>">Filter</span>
   </label>
-  <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[180px] text-right">
+  <ul tabindex="-1" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[180px] text-right">
     <li class="flex">
       <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for)), data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('calendar_check', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>