Fix dropdown containers: tabindex=0 → tabindex=-1 across all dropdowns

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

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

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>

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"

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"

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"

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"

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

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

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

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

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

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' %>">

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

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