From 743e7e5ca6046545f50aa0ffca066cee9568c1c1 Mon Sep 17 00:00:00 2001
From: Marcelo Paiva <mpaiva@gmail.com>
Date: Mon, 9 Feb 2026 13:23:24 -0500
Subject: [PATCH] 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>
---
 app/javascript/submission_form/area.vue           | 5 +++++
 app/javascript/submission_form/image_step.vue     | 1 +
 app/javascript/submission_form/initials_step.vue  | 1 +
 app/javascript/submission_form/signature_step.vue | 1 +
 4 files changed, 8 insertions(+)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index affd57a6..8f323f0b 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -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"
diff --git a/app/javascript/submission_form/image_step.vue b/app/javascript/submission_form/image_step.vue
index 3d25fbca..f7b5b61a 100644
--- a/app/javascript/submission_form/image_step.vue
+++ b/app/javascript/submission_form/image_step.vue
@@ -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>
diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue
index 2dede0e4..d7017889 100644
--- a/app/javascript/submission_form/initials_step.vue
+++ b/app/javascript/submission_form/initials_step.vue
@@ -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">
diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue
index 91937ec9..1d1ac6d6 100644
--- a/app/javascript/submission_form/signature_step.vue
+++ b/app/javascript/submission_form/signature_step.vue
@@ -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