Add alt text to all images in Vue submission form components

Fixed 6 images missing alt attributes across submission form components:
- signature_step.vue: Added dynamic alt text with field name and "preview"
- initials_step.vue: Added dynamic alt text with field name and "preview"
- image_step.vue: Added dynamic alt text with field name and "preview"
- area.vue: Added alt text for 5 different image types:
  * Image field
  * Stamp field
  * Knowledge-based authentication (KBA) field
  * Signature field
  * Initials field

All alt text uses field.name when available, falling back to descriptive defaults.
This satisfies WCAG 2.2 Success Criterion 1.1.1 (Non-text Content, Level A).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
pull/599/head
Marcelo Paiva 1 month ago
parent aa9cb026a9
commit 743e7e5ca6

@ -54,16 +54,19 @@
v-if="field.type === 'image' && image"
class="object-contain mx-auto"
:src="image.url"
:alt="field.name || 'Image'"
>
<img
v-else-if="field.type === 'stamp' && stamp"
class="object-contain mx-auto"
:src="stamp.url"
:alt="field.name || 'Stamp'"
>
<img
v-else-if="field.type === 'kba' && kba"
class="object-contain mx-auto"
:src="kba.url"
:alt="field.name || 'Knowledge-based authentication'"
>
<div
v-else-if="field.type === 'signature' && signature"
@ -78,6 +81,7 @@
<img
class="object-contain mx-auto"
:src="signature.url"
:alt="field.name || 'Signature'"
>
</div>
<div
@ -103,6 +107,7 @@
v-else-if="field.type === 'initials' && initials"
class="object-contain mx-auto"
:src="initials.url"
:alt="field.name || 'Initials'"
>
<div
v-else-if="(field.type === 'file' || field.type === 'payment') && attachments.length"

@ -25,6 +25,7 @@
<div>
<img
:src="attachmentsIndex[modelValue].url"
:alt="`${field.name || t('image')} - ${t('preview')}`"
class="h-52 border border-base-300 rounded mx-auto uploaded-image-preview"
>
</div>

@ -116,6 +116,7 @@
<img
v-if="modelValue || computedPreviousValue"
:src="attachmentsIndex[modelValue || computedPreviousValue].url"
:alt="`${field.name || t('initials')} - ${t('preview')}`"
class="mx-auto bg-white border border-base-300 rounded max-h-44"
>
<div class="relative">

@ -136,6 +136,7 @@
<img
v-if="modelValue || computedPreviousValue"
:src="attachmentsIndex[modelValue || computedPreviousValue].url"
:alt="`${field.name || t('signature')} - ${t('preview')}`"
class="mx-auto bg-white border border-base-300 rounded max-h-44"
>
<FileDropzone

Loading…
Cancel
Save