didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve accessibility

Browse Source
This commit is contained in:
Pete Matsyburka
2026-04-16 12:41:42 +03:00
committed by Pete Matsyburka
parent 0af6ccf35f
commit ee65a5693c
40 changed files with 408 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/elements/download_button.js
+6
View File
@@ -5,6 +5,12 @@ export default targetable(class extends HTMLElement {
connectedCallback () {
this.addEventListener('click', () => this.downloadFiles())
this.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
this.downloadFiles()
}
})
}
toggleState () {
app/javascript/elements/modal_button.js
+18
View File
@@ -0,0 +1,18 @@
export default class extends HTMLElement {
connectedCallback () {
const dialog = document.getElementById(this.dataset.target)
this.querySelector('button').addEventListener('click', () => {
if (dialog) {
dialog.inert = false
dialog.showModal()
}
})
if (dialog) {
dialog.addEventListener('close', () => {
dialog.inert = true
})
}
}
}
app/javascript/elements/scroll_buttons.js
+2
View File
@@ -47,11 +47,13 @@ export default class extends HTMLElement {
this.classList.remove('hidden', '-translate-y-10', 'opacity-0')
this.classList.add('translate-y-0', 'opacity-100')
this.querySelectorAll('[tabindex]').forEach((el) => { el.tabIndex = 0 })
}
hideButtons () {
this.classList.remove('translate-y-0', 'opacity-100')
this.classList.add('-translate-y-10', 'opacity-0')
this.querySelectorAll('[tabindex]').forEach((el) => { el.tabIndex = -1 })
setTimeout(() => {
if (this.classList.contains('-translate-y-10')) {
app/javascript/form.js
+2
View File
@@ -7,6 +7,7 @@ import FetchForm from './elements/fetch_form'
import ScrollButtons from './elements/scroll_buttons'
import PageContainer from './elements/page_container'
import SubmitForm from './elements/submit_form'
import ModalButton from './elements/modal_button'
const safeRegisterElement = (name, element, options = {}) => !window.customElements.get(name) && window.customElements.define(name, element, options)
@@ -16,6 +17,7 @@ safeRegisterElement('fetch-form', FetchForm)
safeRegisterElement('scroll-buttons', ScrollButtons)
safeRegisterElement('page-container', PageContainer)
safeRegisterElement('submit-form', SubmitForm)
safeRegisterElement('modal-button', ModalButton)
safeRegisterElement('submission-form', class extends HTMLElement {
connectedCallback () {
this.appElem = document.createElement('div')
app/javascript/submission_form/area.vue
+16 -1
View File
@@ -1,9 +1,14 @@
<template>
<div
class="flex absolute lg:text-base -outline-offset-1 field-area"
class="flex absolute lg:text-base -outline-offset-1 focus-visible:outline-blue-500 focus-visible:outline-2 focus-visible:outline field-area"
dir="auto"
:style="[computedStyle, fontStyle]"
:class="{ 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'outline-red-500 outline-dashed outline-2 z-10 field-area-active': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
:role="submittable && field.type !== 'checkbox' && field.type !== 'radio' && field.type !== 'multiple' ? 'button' : undefined"
:tabindex="submittable ? 0 : undefined"
:aria-label="submittable ? fieldAreaLabel : undefined"
@keydown.enter.prevent="submittable ? $el.click() : undefined"
@keydown.space.prevent="submittable ? $el.click() : undefined"
>
<div
v-if="(!withFieldPlaceholder || !field.name || field.type === 'cells') && !isActive && !isValueSet && field.type !== 'checkbox' && submittable && !area.option_uuid"
@@ -129,6 +134,7 @@
v-if="submittable"
type="checkbox"
:value="false"
:aria-label="field.name || fieldNames[field.type]"
class="aspect-square base-checkbox"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
:checked="!!modelValue"
@@ -149,6 +155,7 @@
v-if="submittable"
type="radio"
:value="false"
:aria-label="optionValue(option)"
class="aspect-square checked:checkbox checked:checkbox-xs"
:class="{ 'base-radio': !modelValue || modelValue !== optionValue(option), '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
:checked="!!modelValue && modelValue === optionValue(option)"
@@ -169,6 +176,7 @@
v-if="submittable"
type="checkbox"
:value="false"
:aria-label="optionValue(option)"
class="aspect-square base-checkbox"
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
:checked="!!modelValue && modelValue.includes(optionValue(option))"
@@ -400,6 +408,13 @@ export default {
kba: this.t('kba')
}
},
fieldAreaLabel () {
const name = this.field.name || this.fieldNames[this.field.type] || this.field.type
if (this.area.option_uuid && this.option) {
return `${name} - ${this.optionValue(this.option)}`
}
return name
},
strikethroughWidth () {
if (this.isInlineSize) {
return '0.6cqmin'
app/javascript/submission_form/attachment_step.vue
+8 -4
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div v-if="value.length">
<div
<ul v-if="value.length" :aria-label="t('uploaded_files')" class="list-none p-0 m-0">
<li
v-for="(val, index) in value"
:key="index"
class="flex mb-2"
@@ -21,22 +21,26 @@
:width="16"
class="flex-none"
:heigh="16"
aria-hidden="true"
/>
<span>
{{ attachmentsIndex[val].filename }}
</span>
</a>
<button
type="button"
class="remove-attachment-button"
:aria-label="`${t('clear')} ${attachmentsIndex[val].filename}`"
@click.prevent="removeAttachment(val)"
>
<IconTrashX
:width="18"
:heigh="19"
aria-hidden="true"
/>
</button>
</div>
</div>
</li>
</ul>
<template v-else>
<input
value=""
app/javascript/submission_form/completed.vue
+6 -1
View File
@@ -3,6 +3,9 @@
id="form_completed"
class="mx-auto max-w-md flex flex-col completed-form"
dir="auto"
role="status"
aria-live="assertive"
tabindex="-1"
>
<div class="font-medium text-2xl flex items-center space-x-1.5 mx-auto">
<IconCircleCheck
@@ -42,6 +45,7 @@
<IconInnerShadowTop
v-if="isSendingCopy"
class="animate-spin"
aria-hidden="true"
/>
<IconMail v-else />
<span>
@@ -57,6 +61,7 @@
<IconInnerShadowTop
v-if="isDownloading"
class="animate-spin"
aria-hidden="true"
/>
<IconDownload v-else />
<span>
@@ -199,7 +204,7 @@ export default {
})
}
document.querySelectorAll('#decline_button').forEach((button) => {
document.querySelectorAll('#decline_button, #decline_button_mobile, #delegate_button, #delegate_button_mobile').forEach((button) => {
button.setAttribute('disabled', 'true')
})
},
app/javascript/submission_form/date_step.vue
+3 -1
View File
@@ -30,12 +30,13 @@
class="btn btn-outline btn-sm !normal-case font-normal set-current-date-button"
@click.prevent="[setCurrentDate(), $emit('focus')]"
>
<IconCalendarCheck :width="16" />
<IconCalendarCheck :width="16" aria-hidden="true" />
{{ t('set_today') }}
</button>
</div>
<div
v-if="field.description"
:id="field.uuid + '-desc'"
class="mb-3 px-1 field-description-text"
dir="auto"
>
@@ -51,6 +52,7 @@
:max="validationMax"
class="base-input !text-2xl text-center w-full"
:required="field.required"
:aria-describedby="field.description ? field.uuid + '-desc' : undefined"
type="date"
:name="`values[${field.uuid}]`"
@keydown.enter="onEnter"
app/javascript/submission_form/dropzone.vue
+2 -1
View File
@@ -39,8 +39,9 @@
ref="input"
:multiple="multiple"
:accept="accept"
:aria-label="message"
type="file"
class="hidden"
class="sr-only"
@change="onSelectFiles"
>
</label>
app/javascript/submission_form/form.vue
+29 -7
View File
@@ -57,6 +57,7 @@
<IconInnerShadowTop
v-if="isSubmittingComplete"
class="mr-1 animate-spin w-5 h-5"
aria-hidden="true"
/>
<span>
{{ t('complete') }}
@@ -88,6 +89,7 @@
class="absolute right-0 mr-4"
:width="20"
:height="20"
aria-hidden="true"
/>
</button>
<div
@@ -103,11 +105,13 @@
class="absolute right-0 top-0 minimize-form-button"
:class="currentField?.description?.length > 100 ? 'mr-1 mt-1 md:mr-2 md:mt-2': 'mr-2 mt-2 hidden md:block'"
:title="t('minimize')"
:aria-label="t('minimize')"
@click.prevent="minimizeForm"
>
<IconArrowsDiagonalMinimize2
:width="20"
:height="20"
aria-hidden="true"
/>
</button>
<div
@@ -193,6 +197,7 @@
/>
<div
v-if="currentField.description"
:id="currentField.uuid + '-desc'"
dir="auto"
class="mb-3 px-1 field-description-text"
>
@@ -203,6 +208,7 @@
:id="currentField.uuid"
dir="auto"
:required="currentField.required"
: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] }"
:name="`values[${currentField.uuid}]`"
@@ -250,6 +256,7 @@
</label>
<div
v-if="currentField.description"
:id="currentField.uuid + '-desc'"
dir="auto"
class="mb-3 px-1 field-description-text"
>
@@ -309,6 +316,7 @@
>
<div
v-if="currentField.description"
:id="currentField.uuid + '-desc'"
dir="auto"
class="mb-3 px-1 field-description-text"
>
@@ -511,6 +519,7 @@
<IconInnerShadowTop
v-if="isSubmitting"
class="mr-1 animate-spin"
aria-hidden="true"
/>
<span>
{{ submitButtonText }}
@@ -522,6 +531,7 @@
</button>
<div
v-if="showFillAllRequiredFields"
role="alert"
class="text-center mt-1"
>
{{ t('please_fill_all_required_fields') }}
@@ -554,8 +564,9 @@
:can-send-email="canSendEmail && !!submitter.email"
:submitter-slug="submitterSlug"
/>
<div
<nav
v-if="stepFields.length < 80"
:aria-label="t('form_progress')"
class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1 select-none"
>
<div class="flex items-center flex-wrap steps-progress">
@@ -563,16 +574,18 @@
v-for="(step, index) in stepFields"
:key="step[0].uuid"
>
<a
<button
v-if="!onlyRequiredFields || step.some((f) => f.required)"
href="#"
class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
type="button"
:aria-label="`${t('step')} ${index + 1}`"
:aria-current="index === currentStep ? 'step' : undefined"
class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1 p-0"
:class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }"
@click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
@click="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
/>
</template>
</div>
</div>
</nav>
<div
v-else
class="mt-5"
@@ -1458,7 +1471,7 @@ export default {
}
this.enableScrollIntoField = false
this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], select')?.focus()
this.$refs.form.querySelector('input[type="date"], input[type="number"], input[type="text"], input[type="tel"], textarea, select')?.focus()
this.enableScrollIntoField = true
if (clickUpload && !this.values[this.currentField.uuid] && ['file', 'image'].includes(this.currentField.type)) {
@@ -1629,6 +1642,15 @@ export default {
if (this.completedRedirectUrl) {
window.location.href = sanitizeUrl(this.completedRedirectUrl)
} else {
this.$nextTick(() => {
const root = this.$root.$el.parentNode.getRootNode()
const completedEl = root.getElementById('form_completed')
if (completedEl) {
completedEl.focus()
}
})
}
}
}
app/javascript/submission_form/i18n.js
+71
View File
@@ -1,4 +1,10 @@
const en = {
step: 'Step',
form_progress: 'Form progress',
close: 'Close',
uploaded_files: 'Uploaded files',
minimize: 'Minimize',
signature_drawing_area: 'Signature drawing area. Use mouse or touch to draw your signature.',
kba: 'KBA',
please_upload_an_image_file: 'Please upload an image file',
must_be_characters_length: 'Must be {number} characters long',
@@ -102,6 +108,11 @@ const en = {
}
const es = {
step: 'Paso',
form_progress: 'Progreso del formulario',
close: 'Cerrar',
uploaded_files: 'Archivos subidos',
signature_drawing_area: 'Área de dibujo de firma. Use el ratón o toque para dibujar su firma.',
kba: 'KBA',
please_upload_an_image_file: 'Por favor, sube un archivo de imagen',
must_be_characters_length: 'Debe tener {number} caracteres de longitud',
@@ -205,6 +216,11 @@ const es = {
}
const it = {
step: 'Passo',
form_progress: 'Progresso del modulo',
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.',
kba: 'KBA',
please_upload_an_image_file: 'Per favore carica un file immagine',
must_be_characters_length: 'Deve essere lungo {number} caratteri',
@@ -308,6 +324,11 @@ const it = {
}
const de = {
step: 'Schritt',
form_progress: 'Formularfortschritt',
close: 'Schließen',
uploaded_files: 'Hochgeladene Dateien',
signature_drawing_area: 'Unterschriftszeichenbereich. Verwenden Sie die Maus oder Berührung, um Ihre Unterschrift zu zeichnen.',
kba: 'KBA',
please_upload_an_image_file: 'Bitte laden Sie eine Bilddatei hoch',
must_be_characters_length: 'Muss {number} Zeichen lang sein',
@@ -411,6 +432,11 @@ const de = {
}
const fr = {
step: 'Étape',
form_progress: 'Progression du formulaire',
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.',
kba: 'KBA',
please_upload_an_image_file: 'Veuillez téléverser un fichier image',
must_be_characters_length: 'Doit comporter {number} caractères',
@@ -514,6 +540,11 @@ const fr = {
}
const pl = {
step: 'Krok',
form_progress: 'Postęp formularza',
close: 'Zamknij',
uploaded_files: 'Przesłane pliki',
signature_drawing_area: 'Obszar rysowania podpisu. Użyj myszy lub dotyku, aby narysować swój podpis.',
kba: 'KBA',
please_upload_an_image_file: 'Proszę przesłać plik obrazu',
must_be_characters_length: 'Musi mieć długość {number} znaków',
@@ -617,6 +648,11 @@ const pl = {
}
const uk = {
step: 'Крок',
form_progress: 'Прогрес форми',
close: 'Закрити',
uploaded_files: 'Завантажені файли',
signature_drawing_area: 'Область малювання підпису. Використовуйте мишу або дотик, щоб намалювати свій підпис.',
kba: 'KBA',
please_upload_an_image_file: 'Будь ласка, завантажте файл зображення',
must_be_characters_length: 'Має містити {number} символів',
@@ -720,6 +756,11 @@ const uk = {
}
const cs = {
step: 'Krok',
form_progress: 'Průběh formuláře',
close: 'Zavřít',
uploaded_files: 'Nahrané soubory',
signature_drawing_area: 'Oblast pro kreslení podpisu. Použijte myš nebo dotyk k nakreslení podpisu.',
kba: 'KBA',
please_upload_an_image_file: 'Nahrajte prosím obrázkový soubor',
must_be_characters_length: 'Musí mít délku {number} znaků',
@@ -823,6 +864,11 @@ const cs = {
}
const pt = {
step: 'Passo',
form_progress: 'Progresso do formulário',
close: 'Fechar',
uploaded_files: 'Arquivos enviados',
signature_drawing_area: 'Área de desenho da assinatura. Use o mouse ou toque para desenhar sua assinatura.',
kba: 'KBA',
please_upload_an_image_file: 'Por favor, envie um arquivo de imagem',
must_be_characters_length: 'Deve ter {number} caracteres',
@@ -926,6 +972,11 @@ const pt = {
}
const he = {
step: 'שלב',
form_progress: 'התקדמות הטופס',
close: 'סגור',
uploaded_files: 'קבצים שהועלו',
signature_drawing_area: 'אזור ציור חתימה. השתמש בעכבר או במגע כדי לצייר את החתימה שלך.',
kba: 'KBA',
please_upload_an_image_file: 'אנא העלה קובץ תמונה',
must_be_characters_length: 'חייב להיות באורך של {number} תווים',
@@ -1029,6 +1080,11 @@ const he = {
}
const nl = {
step: 'Stap',
form_progress: 'Formuliervoortgang',
close: 'Sluiten',
uploaded_files: 'Geüploade bestanden',
signature_drawing_area: 'Handtekening tekengebied. Gebruik de muis of aanraking om uw handtekening te tekenen.',
kba: 'KBA',
please_upload_an_image_file: 'Upload alstublieft een afbeeldingsbestand',
must_be_characters_length: 'Moet {number} tekens lang zijn',
@@ -1132,6 +1188,11 @@ const nl = {
}
const ar = {
step: 'خطوة',
form_progress: 'تقدم النموذج',
close: 'إغلاق',
uploaded_files: 'الملفات المرفوعة',
signature_drawing_area: 'منطقة رسم التوقيع. استخدم الماوس أو اللمس لرسم توقيعك.',
kba: 'KBA',
please_upload_an_image_file: 'يرجى تحميل ملف صورة',
must_be_characters_length: 'يجب أن يكون الطول {number} حرفًا',
@@ -1235,6 +1296,11 @@ const ar = {
}
const ko = {
step: '단계',
form_progress: '양식 진행',
close: '닫기',
uploaded_files: '업로드된 파일',
signature_drawing_area: '서명 그리기 영역. 마우스 또는 터치를 사용하여 서명을 그리세요.',
kba: 'KBA',
please_upload_an_image_file: '이미지 파일을 업로드해 주세요',
must_be_characters_length: '{number}자여야 합니다',
@@ -1338,6 +1404,11 @@ const ko = {
}
const ja = {
step: 'ステップ',
form_progress: 'フォームの進捗',
close: '閉じる',
uploaded_files: 'アップロードされたファイル',
signature_drawing_area: '署名描画エリア。マウスまたはタッチを使用して署名を描いてください。',
kba: 'KBA',
please_upload_an_image_file: '画像ファイルをアップロードしてください',
must_be_characters_length: '{number}文字でなければなりません',
app/javascript/submission_form/image_step.vue
+2 -1
View File
@@ -18,13 +18,14 @@
class="btn btn-outline btn-sm reupload-button"
@click.prevent="remove"
>
<IconReload :width="16" />
<IconReload :width="16" aria-hidden="true" />
{{ t('reupload') }}
</button>
</div>
<div>
<img
:src="attachmentsIndex[modelValue].url"
:alt="field.name || t('image')"
class="h-52 border border-base-300 rounded mx-auto uploaded-image-preview"
>
</div>
app/javascript/submission_form/initials_step.vue
+30 -26
View File
@@ -22,41 +22,43 @@
class="md:tooltip"
:data-tip="t('type_initial')"
>
<a
<button
id="type_text_button"
href="#"
type="button"
:aria-label="t('type_initial')"
class="btn btn-outline font-medium btn-sm type-text-button"
@click.prevent="toggleTextInput"
@click="toggleTextInput"
>
<IconTextSize :width="16" />
<IconTextSize :width="16" aria-hidden="true" />
<span class="hidden sm:inline">
{{ t('type') }}
</span>
</a>
</button>
</span>
<span
v-else
class="md:tooltip ml-2"
:data-tip="t('draw_initials')"
>
<a
<button
id="type_text_button"
href="#"
type="button"
:aria-label="t('draw_initials')"
class="btn btn-outline font-medium btn-sm type-text-button"
@click.prevent="toggleTextInput"
@click="toggleTextInput"
>
<IconSignature :width="16" />
<IconSignature :width="16" aria-hidden="true" />
<span class="hidden sm:inline">
{{ t('draw') }}
</span>
</a>
</button>
</span>
<span
class="md:tooltip"
:data-tip="t('click_to_upload')"
>
<label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
<IconUpload :width="16" />
<label role="button" tabindex="0" :aria-label="t('click_to_upload')" class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button" @keydown.enter.prevent="$el.querySelector('input')?.click()" @keydown.space.prevent="$el.querySelector('input')?.click()">
<IconUpload :width="16" aria-hidden="true" />
<input
:key="uploadImageInputKey"
type="file"
@@ -69,35 +71,37 @@
</span>
</label>
</span>
<a
<button
v-if="modelValue || computedPreviousValue"
href="#"
type="button"
class="btn font-medium btn-outline btn-sm clear-canvas-button"
@click.prevent="remove"
@click="remove"
>
<IconReload :width="16" />
<IconReload :width="16" aria-hidden="true" />
{{ t('clear') }}
</a>
<a
</button>
<button
v-else
href="#"
type="button"
class="btn font-medium btn-outline btn-sm clear-canvas-button"
@click.prevent="clear"
@click="clear"
>
<IconReload :width="16" />
<IconReload :width="16" aria-hidden="true" />
{{ t('clear') }}
</a>
<a
</button>
<button
type="button"
:title="t('minimize')"
href="#"
:aria-label="t('minimize')"
class="py-1.5 inline md:hidden"
@click.prevent="$emit('minimize')"
@click="$emit('minimize')"
>
<IconArrowsDiagonalMinimize2
:width="20"
:height="20"
aria-hidden="true"
/>
</a>
</button>
</div>
</div>
<div
app/javascript/submission_form/multi_select_step.vue
+2
View File
@@ -19,6 +19,7 @@
</label>
<div
v-if="field.description"
:id="field.uuid + '-desc'"
dir="auto"
class="mb-3 px-1 field-description-text"
>
@@ -59,6 +60,7 @@
type="checkbox"
:name="`values[${field.uuid}][]`"
:value="optionValue(option, index)"
:aria-describedby="field.description ? field.uuid + '-desc' : undefined"
class="base-checkbox !h-7 !w-7"
:checked="(modelValue || []).includes(optionValue(option, index))"
@change="onChange"
app/javascript/submission_form/number_step.vue
+2
View File
@@ -23,6 +23,7 @@
/>
<div
v-if="field.description"
:id="field.uuid + '-desc'"
dir="auto"
class="mb-3 px-1 field-description-text"
>
@@ -44,6 +45,7 @@
:max="field.validation?.max"
class="base-input !text-2xl w-full"
:required="field.required"
:aria-describedby="field.description ? field.uuid + '-desc' : undefined"
:placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
:name="`values[${field.uuid}]`"
@focus="$emit('focus')"
app/javascript/submission_form/phone_step.vue
+10 -8
View File
@@ -16,6 +16,7 @@
</label>
<div
v-if="field.description"
:id="field.uuid + '-desc'"
dir="auto"
class="mb-3 px-1 field-description-text"
>
@@ -42,28 +43,28 @@
@input="onInputCode"
>
<div class="flex justify-between mt-2 -mb-2 md:-mb-4">
<a
<button
v-if="!defaultValue"
href="#"
type="button"
class="link change-phone-number-link"
@click.prevent="isCodeSent = false"
@click="isCodeSent = false"
>
{{ t('change_phone_number') }}
</a>
</button>
<span
v-if="resendCodeCountdown > 0"
class="link"
>
{{ t('wait_countdown_seconds').replace('{countdown}', resendCodeCountdown) }}
</span>
<a
<button
v-else
href="#"
type="button"
class="link resend-code-link"
@click.prevent="resendCode"
@click="resendCode"
>
{{ isResendLoading ? t('sending') : t('resend_code') }}
</a>
</button>
</div>
</div>
<div
@@ -107,6 +108,7 @@
type="tel"
inputmode="tel"
:required="field.required"
:aria-describedby="field.description ? field.uuid + '-desc' : undefined"
placeholder="234 567-8900"
@input="onPhoneInput"
@focus="$emit('focus')"
app/javascript/submission_form/signature_step.vue
+68 -35
View File
@@ -25,17 +25,21 @@
class="md:tooltip"
:data-tip="t('draw_signature')"
>
<a
<button
id="type_text_button"
href="#"
type="button"
:aria-label="t('draw_signature')"
class="btn btn-outline btn-sm font-medium type-text-button"
@click.prevent="[toggleTextInput(), hideQr()]"
@click="[toggleTextInput(), hideQr()]"
>
<IconSignature :width="16" />
<IconSignature
:width="16"
aria-hidden="true"
/>
<span class="hidden sm:inline">
{{ t('draw') }}
</span>
</a>
</button>
</span>
<span
v-else-if="withTypedSignature && format !== 'drawn_or_upload' && format !== 'typed_or_upload' && format !== 'typed' && format !== 'drawn' && format !== 'upload'"
@@ -43,17 +47,21 @@
:class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
:data-tip="t('type_text')"
>
<a
<button
id="type_text_button"
href="#"
type="button"
:aria-label="t('type_text')"
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap type-text-button"
@click.prevent="[toggleTextInput(), hideQr()]"
@click="[toggleTextInput(), hideQr()]"
>
<IconTextSize :width="16" />
<IconTextSize
:width="16"
aria-hidden="true"
/>
<span class="hidden sm:inline">
{{ t('type') }}
</span>
</a>
</button>
</span>
<span
v-if="format !== 'typed' && format !== 'drawn' && format !== 'upload' && format !== 'drawn_or_typed'"
@@ -61,8 +69,18 @@
:class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
:data-tip="t('take_photo')"
>
<label class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button">
<IconCamera :width="16" />
<label
role="button"
tabindex="0"
:aria-label="t('take_photo')"
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button"
@keydown.enter.prevent="$el.querySelector('input')?.click()"
@keydown.space.prevent="$el.querySelector('input')?.click()"
>
<IconCamera
:width="16"
aria-hidden="true"
/>
<input
:key="uploadImageInputKey"
type="file"
@@ -75,47 +93,55 @@
</span>
</label>
</span>
<a
<button
v-if="modelValue || computedPreviousValue"
href="#"
type="button"
class="btn btn-outline btn-sm font-medium reupload-button"
@click.prevent="remove"
@click="remove"
>
<IconReload :width="16" />
<IconReload
:width="16"
aria-hidden="true"
/>
{{ t(format === 'upload' ? 'reupload' : 'redraw') }}
</a>
</button>
<span
v-if="withQrButton && !modelValue && !computedPreviousValue && format !== 'typed_or_upload' && format !== 'typed' && format !== 'upload'"
class="md:tooltip before:translate-x-[-90%]"
:data-tip="t('sign_on_the_touchscreen')"
>
<a
href="#"
<button
type="button"
:aria-label="t('sign_on_the_touchscreen')"
class="btn btn-sm btn-neutral font-medium hidden md:flex"
:class="{ 'btn-outline': !isShowQr, 'text-white': isShowQr }"
@click.prevent="isShowQr ? hideQr() : [isTextSignature = false, showQr()]"
@click="isShowQr ? hideQr() : [isTextSignature = false, showQr()]"
>
<IconQrcode
:width="19"
:height="19"
aria-hidden="true"
/>
</a>
</button>
</span>
<a
href="#"
<button
type="button"
:title="t('minimize')"
:aria-label="t('minimize')"
class="py-1.5 inline md:hidden"
@click.prevent="$emit('minimize')"
@click="$emit('minimize')"
>
<IconArrowsDiagonalMinimize2
:width="20"
:height="20"
aria-hidden="true"
/>
</a>
</button>
</div>
</div>
<div
v-if="field.description"
:id="field.uuid + '-desc'"
dir="auto"
class="mb-3 px-1 field-description-text"
>
@@ -136,6 +162,7 @@
<img
v-if="modelValue || computedPreviousValue"
:src="attachmentsIndex[modelValue || computedPreviousValue].url"
:alt="field.name || t('signature')"
class="mx-auto bg-white border border-base-300 rounded max-h-44"
>
<FileDropzone
@@ -154,14 +181,17 @@
v-if="!modelValue && !computedPreviousValue && !isShowQr && !isTextSignature && isSignatureStarted"
class="absolute top-0.5 right-0.5"
>
<a
href="#"
<button
type="button"
class="btn btn-ghost font-medium btn-xs md:btn-sm"
@click.prevent="[clear(), hideQr()]"
@click="[clear(), hideQr()]"
>
<IconReload :width="16" />
<IconReload
:width="16"
aria-hidden="true"
/>
{{ t('clear') }}
</a>
</button>
</div>
<div
v-if="isTextSignature"
@@ -170,6 +200,8 @@
<canvas
v-show="!modelValue && !computedPreviousValue"
ref="canvas"
role="application"
:aria-label="t('signature_drawing_area')"
style="padding: 1px; 0"
class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
/>
@@ -182,13 +214,14 @@
class="top-0 bottom-0 right-0 left-0 absolute bg-base-content/10 rounded-2xl"
>
<div class="absolute top-1.5 right-1.5">
<a
href="#"
<button
type="button"
class="btn btn-sm btn-circle btn-normal btn-outline"
@click.prevent="hideQr"
:aria-label="t('close')"
@click="hideQr"
>
<IconX />
</a>
<IconX aria-hidden="true" />
</button>
</div>
<div class="flex items-center justify-center w-full h-full p-4">
<div
app/javascript/submission_form/text_step.vue
+9 -5
View File
@@ -23,6 +23,7 @@
/>
<div
v-if="field.description"
:id="field.uuid + '-desc'"
dir="auto"
class="mb-3 px-1 field-description-text"
>
@@ -40,6 +41,7 @@
:class="{ '!pr-11 -mr-10': !field.validation?.pattern }"
:required="field.required"
:pattern="field.validation?.pattern"
:aria-describedby="field.description ? field.uuid + '-desc' : undefined"
:placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
type="text"
:name="`values[${field.uuid}]`"
@@ -54,6 +56,7 @@
v-model="text"
dir="auto"
class="base-textarea !text-2xl w-full"
:aria-describedby="field.description ? field.uuid + '-desc' : undefined"
:placeholder="`${t('type_here_')}${field.required ? '' : ` (${t('optional')})`}`"
:required="field.required"
:name="`values[${field.uuid}]`"
@@ -65,13 +68,14 @@
class="tooltip"
:data-tip="t('toggle_multiline_text')"
>
<a
href="#"
<button
type="button"
:aria-label="t('toggle_multiline_text')"
class="btn btn-ghost btn-circle btn-sm toggle-multiline-text-button"
@click.prevent="toggleTextArea"
@click="toggleTextArea"
>
<IconAlignBoxLeftTop />
</a>
<IconAlignBoxLeftTop aria-hidden="true" />
</button>
</div>
</div>
</template>
app/javascript/submission_form/verification_step.vue
+1
View File
@@ -30,6 +30,7 @@
<IconInnerShadowTop
width="40"
class="animate-spin h-10"
aria-hidden="true"
/>
</div>
<div v-else-if="redirectUrl">