From 124a027999dd922e567e5d25c50cb9e9f5f4f468 Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Thu, 26 Feb 2026 08:39:57 -0500
Subject: [PATCH] Improve field type grid focus: clipping, ARIA state, icon
 labels

Three issues fixed in the template builder field type grid:

1. Focus ring clipping: the sidebar container had pl-0.5 (2px) which caused
   the 8px outline + 4px offset to be clipped on left-column buttons (Text,
   Checkbox, Radio, Stamp). Increased to pl-3 (12px) to give the ring room.

2. ARIA state: add aria-pressed to each field type button so screen readers
   announce when a type is active (selected for drawing).

3. Decorative content: add aria-hidden to the drag handle div and field icon
   so screen readers only read the text label, not "icon name + label".

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/template_builder/builder.vue | 2 +-
 app/javascript/template_builder/fields.vue  | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 605a4392..793b7473 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -439,7 +439,7 @@
       <div
         v-if="withFieldsList && !isMobile"
         id="fields_list_container"
-        class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block fields-list-container"
+        class="relative w-80 flex-none mt-1 pr-4 pl-3 hidden md:block fields-list-container"
         :class="drawField || drawCustomField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
       >
         <div
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index 01b422fc..e52385c6 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -210,18 +210,23 @@
         class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
         :style="{ backgroundColor }"
         :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
+        :aria-pressed="drawFieldType === type"
         @dragstart="onDragstart($event, { type: type })"
         @dragend="$emit('drag-end')"
         @click="['file', 'payment', 'verification', 'kba'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
       >
         <div
+          aria-hidden="true"
           class="flex items-console transition-all cursor-grab h-full absolute left-0"
           :class="drawFieldType === type ? 'bg-base-200/50' : 'group-hover:bg-base-200/50'"
         >
           <IconDrag class="my-auto" />
         </div>
         <div class="flex items-center flex-col px-2 py-2">
-          <component :is="icon" />
+          <component
+            :is="icon"
+            aria-hidden="true"
+          />
           <span class="text-xs mt-1">
             {{ fieldNames[type] }}
           </span>