From 721172c9806e43a1d19a0d7722e9cb70cdde0d9c Mon Sep 17 00:00:00 2001 From: Pete Matsyburka Date: Thu, 25 Jun 2026 15:26:52 +0300 Subject: [PATCH] adjust accessibility --- app/javascript/submission_form/form.vue | 1 + app/javascript/submission_form/i18n.js | 28 +++++++++++++++++++ .../submission_form/initials_step.vue | 4 +++ .../submission_form/invite_form.vue | 2 +- .../submission_form/multi_select_step.vue | 4 ++- app/javascript/submission_form/phone_step.vue | 1 + .../submission_form/signature_step.vue | 5 ++++ 7 files changed, 43 insertions(+), 2 deletions(-) diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue index 5f0ab868..95726537 100644 --- a/app/javascript/submission_form/form.vue +++ b/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] }" diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js index f2e103f3..71f73125 100644 --- a/app/javascript/submission_form/i18n.js +++ b/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: '電話番号を変更', diff --git a/app/javascript/submission_form/initials_step.vue b/app/javascript/submission_form/initials_step.vue index dde2f4e1..b7b2c05a 100644 --- a/app/javascript/submission_form/initials_step.vue +++ b/app/javascript/submission_form/initials_step.vue @@ -141,6 +141,7 @@
@@ -156,6 +157,8 @@
@@ -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')" diff --git a/app/javascript/submission_form/invite_form.vue b/app/javascript/submission_form/invite_form.vue index 3189b0d8..c864779c 100644 --- a/app/javascript/submission_form/invite_form.vue +++ b/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]" > diff --git a/app/javascript/submission_form/multi_select_step.vue b/app/javascript/submission_form/multi_select_step.vue index 60e23bbd..60a55e12 100644 --- a/app/javascript/submission_form/multi_select_step.vue +++ b/app/javascript/submission_form/multi_select_step.vue @@ -1,7 +1,7 @@