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>
pull/599/head
Marcelo Paiva 3 weeks ago
parent 25a2519dd8
commit 124a027999

@ -439,7 +439,7 @@
<div <div
v-if="withFieldsList && !isMobile" v-if="withFieldsList && !isMobile"
id="fields_list_container" 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'" :class="drawField || drawCustomField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
> >
<div <div

@ -210,18 +210,23 @@
class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item" class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
:style="{ backgroundColor }" :style="{ backgroundColor }"
:class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'" :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
:aria-pressed="drawFieldType === type"
@dragstart="onDragstart($event, { type: type })" @dragstart="onDragstart($event, { type: type })"
@dragend="$emit('drag-end')" @dragend="$emit('drag-end')"
@click="['file', 'payment', 'verification', 'kba'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)" @click="['file', 'payment', 'verification', 'kba'].includes(type) ? $emit('add-field', type) : $emit('set-draw-type', type)"
> >
<div <div
aria-hidden="true"
class="flex items-console transition-all cursor-grab h-full absolute left-0" 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'" :class="drawFieldType === type ? 'bg-base-200/50' : 'group-hover:bg-base-200/50'"
> >
<IconDrag class="my-auto" /> <IconDrag class="my-auto" />
</div> </div>
<div class="flex items-center flex-col px-2 py-2"> <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"> <span class="text-xs mt-1">
{{ fieldNames[type] }} {{ fieldNames[type] }}
</span> </span>

Loading…
Cancel
Save