adjust accessibility

app/javascript/submission_form/form.vue

@@ -289,6 +289,7 @@
               :id="currentField.uuid"
               dir="auto"
               :required="currentField.required"
+              :aria-label="showFieldNames && (currentField.name || currentField.title) ? undefined : (currentField.name || currentField.title || t('select_your_option'))"
               :aria-describedby="currentField.description ? currentField.uuid + '-desc' : undefined"
               class="select base-input !text-2xl w-full text-center font-normal"
               :class="{ 'text-gray-300': !values[currentField.uuid] }"

app/javascript/submission_form/i18n.js

@@ -4,6 +4,7 @@ const en = {
   close: 'Close',
   uploaded_files: 'Uploaded files',
   signature_drawing_area: 'Signature drawing area. Use mouse or touch to draw your signature.',
+  initials_drawing_area: 'Initials drawing area. Use mouse or touch to draw your initials.',
   kba: 'KBA',
   please_upload_an_image_file: 'Please upload an image file',
   must_be_characters_length: 'Must be {number} characters long',
@@ -88,6 +89,7 @@ const en = {
   please_check_the_box_to_continue: 'Please check the box to continue.',
   open_source_documents_software: 'open source documents software',
   verified_phone_number: 'Verify Phone Number',
+  country_code: 'Country code',
   use_international_format: 'Use international format: +1xxx',
   six_digits_code: '6-digit code',
   change_phone_number: 'Change phone number',
@@ -120,6 +122,7 @@ const es = {
   close: 'Cerrar',
   uploaded_files: 'Archivos subidos',
   signature_drawing_area: 'Área de dibujo de firma. Use el ratón o toque para dibujar su firma.',
+  initials_drawing_area: 'Área de dibujo de iniciales. Use el ratón o toque para dibujar sus iniciales.',
   kba: 'KBA',
   please_upload_an_image_file: 'Por favor, sube un archivo de imagen',
   must_be_characters_length: 'Debe tener {number} caracteres de longitud',
@@ -204,6 +207,7 @@ const es = {
   please_check_the_box_to_continue: 'Por favor marque la casilla para continuar.',
   open_source_documents_software: 'software de documentos de código abierto',
   verified_phone_number: 'Verificar número de teléfono',
+  country_code: 'Código de país',
   use_international_format: 'Usar formato internacional: +1xxx',
   six_digits_code: 'Código de 6 dígitos',
   change_phone_number: 'Cambiar número de teléfono',
@@ -236,6 +240,7 @@ const it = {
   close: 'Chiudi',
   uploaded_files: 'File caricati',
   signature_drawing_area: 'Area di disegno della firma. Usa il mouse o il tocco per disegnare la tua firma.',
+  initials_drawing_area: 'Area di disegno delle iniziali. Usa il mouse o il tocco per disegnare le tue iniziali.',
   kba: 'KBA',
   please_upload_an_image_file: 'Per favore carica un file immagine',
   must_be_characters_length: 'Deve essere lungo {number} caratteri',
@@ -320,6 +325,7 @@ const it = {
   please_check_the_box_to_continue: 'Si prega di spuntare la casella per continuare.',
   open_source_documents_software: 'software di documenti open source',
   verified_phone_number: 'Verifica numero di telefono',
+  country_code: 'Prefisso internazionale',
   use_international_format: 'Usa formato internazionale: +1xxx',
   six_digits_code: 'Codice a 6 cifre',
   change_phone_number: 'Cambia numero di telefono',
@@ -352,6 +358,7 @@ const de = {
   close: 'Schließen',
   uploaded_files: 'Hochgeladene Dateien',
   signature_drawing_area: 'Unterschriftszeichenbereich. Verwenden Sie die Maus oder Berührung, um Ihre Unterschrift zu zeichnen.',
+  initials_drawing_area: 'Zeichenbereich für Initialen. Verwenden Sie die Maus oder Berührung, um Ihre Initialen zu zeichnen.',
   kba: 'KBA',
   please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch',
   must_be_characters_length: 'Muss {number} Zeichen lang sein',
@@ -436,6 +443,7 @@ const de = {
   please_check_the_box_to_continue: 'Bitte aktivieren Sie das Kontrollkästchen, um fortzufahren.',
   open_source_documents_software: 'Open-Source-Dokumentensoftware',
   verified_phone_number: 'Telefonnummer verifizieren',
+  country_code: 'Ländervorwahl',
   use_international_format: 'Internationales Format verwenden: +1xxx',
   six_digits_code: '6-stelliger Code',
   change_phone_number: 'Telefonnummer ändern',
@@ -468,6 +476,7 @@ const fr = {
   close: 'Fermer',
   uploaded_files: 'Fichiers téléchargés',
   signature_drawing_area: 'Zone de dessin de signature. Utilisez la souris ou le toucher pour dessiner votre signature.',
+  initials_drawing_area: 'Zone de dessin des initiales. Utilisez la souris ou le toucher pour dessiner vos initiales.',
   kba: 'KBA',
   please_upload_an_image_file: 'Veuillez téléverser un fichier image',
   must_be_characters_length: 'Doit comporter {number} caractères',
@@ -552,6 +561,7 @@ const fr = {
   please_check_the_box_to_continue: 'Veuillez cocher la case pour continuer.',
   open_source_documents_software: 'logiciel de documents open source',
   verified_phone_number: 'Vérifier le numéro de téléphone',
+  country_code: 'Indicatif du pays',
   use_international_format: 'Utilisez le format international : +1xxx',
   six_digits_code: 'Code à 6 chiffres',
   change_phone_number: 'Changer de numéro de téléphone',
@@ -584,6 +594,7 @@ const pl = {
   close: 'Zamknij',
   uploaded_files: 'Przesłane pliki',
   signature_drawing_area: 'Obszar rysowania podpisu. Użyj myszy lub dotyku, aby narysować swój podpis.',
+  initials_drawing_area: 'Obszar rysowania inicjałów. Użyj myszy lub dotyku, aby narysować swoje inicjały.',
   kba: 'KBA',
   please_upload_an_image_file: 'Proszę przesłać plik obrazu',
   must_be_characters_length: 'Musi mieć długość {number} znaków',
@@ -668,6 +679,7 @@ const pl = {
   please_check_the_box_to_continue: 'Proszę zaznaczyć pole, aby kontynuować.',
   open_source_documents_software: 'oprogramowanie do dokumentów open source',
   verified_phone_number: 'Zweryfikuj numer telefonu',
+  country_code: 'Kod kraju',
   use_international_format: 'Użyj międzynarodowego formatu: +1xxx',
   six_digits_code: '6-cyfrowy kod',
   change_phone_number: 'Zmień numer telefonu',
@@ -700,6 +712,7 @@ const uk = {
   close: 'Закрити',
   uploaded_files: 'Завантажені файли',
   signature_drawing_area: 'Область малювання підпису. Використовуйте мишу або дотик, щоб намалювати свій підпис.',
+  initials_drawing_area: 'Область малювання ініціалів. Використовуйте мишу або дотик, щоб намалювати свої ініціали.',
   kba: 'KBA',
   please_upload_an_image_file: 'Будь ласка, завантажте файл зображення',
   must_be_characters_length: 'Має містити {number} символів',
@@ -784,6 +797,7 @@ const uk = {
   please_check_the_box_to_continue: 'Будь ласка, позначте прапорець, щоб продовжити.',
   open_source_documents_software: 'відкрите програмне забезпечення для документів',
   verified_phone_number: 'Підтвердіть номер телефону',
+  country_code: 'Код країни',
   use_international_format: 'Використовуйте міжнародний формат: +1xxx',
   six_digits_code: '6-значний код',
   change_phone_number: 'Змінити номер телефону',
@@ -816,6 +830,7 @@ const cs = {
   close: 'Zavřít',
   uploaded_files: 'Nahrané soubory',
   signature_drawing_area: 'Oblast pro kreslení podpisu. Použijte myš nebo dotyk k nakreslení podpisu.',
+  initials_drawing_area: 'Oblast pro kreslení iniciál. Použijte myš nebo dotyk k nakreslení iniciál.',
   kba: 'KBA',
   please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor',
   must_be_characters_length: 'Musí mít délku {number} znaků',
@@ -900,6 +915,7 @@ const cs = {
   please_check_the_box_to_continue: 'Prosím, zaškrtněte políčko pro pokračování.',
   open_source_documents_software: 'open source software pro dokumenty',
   verified_phone_number: 'Ověřte telefonní číslo',
+  country_code: 'Předvolba země',
   use_international_format: 'Použijte mezinárodní formát: +1xxx',
   six_digits_code: '6-místný kód',
   change_phone_number: 'Změnit telefonní číslo',
@@ -932,6 +948,7 @@ const pt = {
   close: 'Fechar',
   uploaded_files: 'Arquivos enviados',
   signature_drawing_area: 'Área de desenho da assinatura. Use o mouse ou toque para desenhar sua assinatura.',
+  initials_drawing_area: 'Área de desenho das iniciais. Use o mouse ou toque para desenhar suas iniciais.',
   kba: 'KBA',
   please_upload_an_image_file: 'Por favor, envie um arquivo de imagem',
   must_be_characters_length: 'Deve ter {number} caracteres',
@@ -1016,6 +1033,7 @@ const pt = {
   please_check_the_box_to_continue: 'Por favor, marque a caixa para continuar.',
   open_source_documents_software: 'software de documentos de código aberto',
   verified_phone_number: 'Verificar Número de Telefone',
+  country_code: 'Código do país',
   use_international_format: 'Use formato internacional: +1xxx',
   six_digits_code: 'Código de 6 dígitos',
   change_phone_number: 'Alterar número de telefone',
@@ -1048,6 +1066,7 @@ const he = {
   close: 'סגור',
   uploaded_files: 'קבצים שהועלו',
   signature_drawing_area: 'אזור ציור חתימה. השתמש בעכבר או במגע כדי לצייר את החתימה שלך.',
+  initials_drawing_area: 'אזור ציור ראשי תיבות. השתמש בעכבר או במגע כדי לצייר את ראשי התיבות שלך.',
   kba: 'KBA',
   please_upload_an_image_file: 'אנא העלה קובץ תמונה',
   must_be_characters_length: 'חייב להיות באורך של {number} תווים',
@@ -1132,6 +1151,7 @@ const he = {
   please_check_the_box_to_continue: 'אנא סמן את התיבה כדי להמשיך.',
   open_source_documents_software: 'תוכנה פתוחה למסמכים',
   verified_phone_number: 'אימות מספר טלפון',
+  country_code: 'קידומת מדינה',
   use_international_format: 'השתמש בפורמט בינלאומי: +1xxx',
   six_digits_code: 'קוד שש ספרות',
   change_phone_number: 'שינוי מספר טלפון',
@@ -1164,6 +1184,7 @@ const nl = {
   close: 'Sluiten',
   uploaded_files: 'Geüploade bestanden',
   signature_drawing_area: 'Handtekening tekengebied. Gebruik de muis of aanraking om uw handtekening te tekenen.',
+  initials_drawing_area: 'Tekengebied voor initialen. Gebruik de muis of aanraking om uw initialen te tekenen.',
   kba: 'KBA',
   please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand',
   must_be_characters_length: 'Moet {number} tekens lang zijn',
@@ -1248,6 +1269,7 @@ const nl = {
   please_check_the_box_to_continue: 'Vink het vakje aan om door te gaan.',
   open_source_documents_software: 'Open source documenten software',
   verified_phone_number: 'Telefoonnummer verifiëren',
+  country_code: 'Landcode',
   use_international_format: 'Gebruik internationaal formaat: +1xxx',
   six_digits_code: '6-cijferige code',
   change_phone_number: 'Wijzig telefoonnummer',
@@ -1280,6 +1302,7 @@ const ar = {
   close: 'إغلاق',
   uploaded_files: 'الملفات المرفوعة',
   signature_drawing_area: 'منطقة رسم التوقيع. استخدم الماوس أو اللمس لرسم توقيعك.',
+  initials_drawing_area: 'منطقة رسم الحروف الأولى. استخدم الماوس أو اللمس لرسم الحروف الأولى.',
   kba: 'KBA',
   please_upload_an_image_file: 'يرجى تحميل ملف صورة',
   must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا',
@@ -1364,6 +1387,7 @@ const ar = {
   please_check_the_box_to_continue: 'الرجاء التحقق من الخانة للمتابعة.',
   open_source_documents_software: 'برنامج وثائق مفتوح المصدر',
   verified_phone_number: 'تحقق من رقم الهاتف',
+  country_code: 'رمز الدولة',
   use_international_format: 'استخدم الشكل الدولي: +1xxx',
   six_digits_code: 'رمز مكون من 6 أرقام',
   change_phone_number: 'تغيير رقم الهاتف',
@@ -1396,6 +1420,7 @@ const ko = {
   close: '닫기',
   uploaded_files: '업로드된 파일',
   signature_drawing_area: '서명 그리기 영역. 마우스 또는 터치를 사용하여 서명을 그리세요.',
+  initials_drawing_area: '이니셜 그리기 영역. 마우스 또는 터치를 사용하여 이니셜을 그리세요.',
   kba: 'KBA',
   please_upload_an_image_file: '이미지 파일을 업로드해 주세요',
   must_be_characters_length: '{number}자여야 합니다',
@@ -1480,6 +1505,7 @@ const ko = {
   please_check_the_box_to_continue: '계속하려면 확인란을 선택하십시오.',
   open_source_documents_software: '오픈 소스 문서 소프트웨어',
   verified_phone_number: '전화번호 확인됨',
+  country_code: '국가 번호',
   use_international_format: '국제 포맷 사용: +1xxx',
   six_digits_code: '6자리 코드',
   change_phone_number: '전화번호 변경',
@@ -1512,6 +1538,7 @@ const ja = {
   close: '閉じる',
   uploaded_files: 'アップロードされたファイル',
   signature_drawing_area: '署名描画エリア。マウスまたはタッチを使用して署名を描いてください。',
+  initials_drawing_area: 'イニシャル描画エリア。マウスまたはタッチを使用してイニシャルを描いてください。',
   kba: 'KBA',
   please_upload_an_image_file: '画像ファイルをアップロードしてください',
   must_be_characters_length: '{number}文字でなければなりません',
@@ -1596,6 +1623,7 @@ const ja = {
   please_check_the_box_to_continue: '続行するにはボックスにチェックを入れてください。',
   open_source_documents_software: 'オープンソースのドキュメントソフトウェア',
   verified_phone_number: '電話番号を認証',
+  country_code: '国番号',
   use_international_format: '国際形式を使用してください：+1xxx',
   six_digits_code: '6桁のコード',
   change_phone_number: '電話番号を変更',

app/javascript/submission_form/initials_step.vue

@@ -141,6 +141,7 @@
     <img
       v-if="modelValue || computedPreviousValue"
       :src="attachmentsIndex[modelValue || computedPreviousValue].url"
+      :alt="field.name || t('initials')"
       class="mx-auto bg-white border border-base-300 rounded max-h-44"
     >
     <div class="relative">
@@ -156,6 +157,8 @@
       <canvas
         v-show="!modelValue && !computedPreviousValue"
         ref="canvas"
+        role="img"
+        :aria-label="t('initials_drawing_area')"
         class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
       />
     </div>
@@ -165,6 +168,7 @@
       ref="textInput"
       class="base-input !text-2xl w-full mt-6 text-center"
       :required="field.required && !isInitialsStarted"
+      :aria-label="field.name || t('initials')"
       :placeholder="`${t('type_initial_here')}...`"
       type="text"
       @focus="$emit('focus')"

app/javascript/submission_form/invite_form.vue

@@ -35,7 +35,7 @@
         :placeholder="t('email')"
         type="email"
         :required="submitters.includes(submitter)"
-        autofocus="true"
+        :autofocus="index === 0"
         name="submission[submitters][][email]"
       >
     </div>

app/javascript/submission_form/multi_select_step.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     v-if="showFieldNames && (field.name || field.title)"
-    :for="field.uuid"
+    :id="field.uuid + '-group-label'"
     dir="auto"
     class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
     :class="{ 'mb-2': !field.description }"
@@ -44,6 +44,8 @@
     <div
       class="space-y-3.5 mx-auto"
       :class="{ hidden: !showOptions }"
+      role="group"
+      :aria-labelledby="showFieldNames && (field.name || field.title) ? field.uuid + '-group-label' : undefined"
     >
       <div
         v-for="(option, index) in field.options"

app/javascript/submission_form/phone_step.vue

@@ -81,6 +81,7 @@
           <select
             id="country_code_select"
             class="absolute top-0 bottom-0 right-0 left-0 opacity-0 w-full h-full cursor-pointer"
+            :aria-label="t('country_code')"
             :disabled="!!defaultValue"
             @change="onCountrySelect(countries.find((country) => country.flag === $event.target.value))"
           >

app/javascript/submission_form/signature_step.vue

@@ -230,6 +230,8 @@
           >
             <canvas
               ref="qrCanvas"
+              role="img"
+              :aria-label="t('scan_the_qr_code_with_the_camera_app_to_open_the_form_on_mobile_and_draw_your_signature')"
               class="h-full"
               width="132"
               height="132"
@@ -244,6 +246,7 @@
       ref="textInput"
       class="base-input !text-2xl w-full mt-6"
       :required="field.required && !isSignatureStarted"
+      :aria-label="field.name || t('signature')"
       :placeholder="`${t('type_signature_here')}...`"
       type="text"
       @input="updateWrittenSignature"
@@ -253,6 +256,7 @@
       class="select base-input !text-2xl w-full mt-6 text-center"
       :class="{ 'text-gray-300': !reason }"
       required
+      :aria-label="t('select_a_reason')"
       :name="`values[${field.preferences.reason_field_uuid}]`"
       @change="$event.target.value === 'other' ? [reason = '', isOtherReason = true] : $emit('update:reason', $event.target.value)"
     >
@@ -298,6 +302,7 @@
       class="base-input !text-2xl w-full mt-6"
       required
       :name="`values[${field.preferences.reason_field_uuid}]`"
+      :aria-label="t('select_a_reason')"
       :placeholder="t('type_here_')"
       :value="reason"
       type="text"