adjust accessibility
This commit is contained in:
@@ -317,7 +317,7 @@
|
|||||||
<div v-else-if="currentField.type === 'radio'">
|
<div v-else-if="currentField.type === 'radio'">
|
||||||
<label
|
<label
|
||||||
v-if="showFieldNames && (currentField.name || currentField.title)"
|
v-if="showFieldNames && (currentField.name || currentField.title)"
|
||||||
:for="currentField.uuid"
|
:id="currentField.uuid + '-radio-label'"
|
||||||
dir="auto"
|
dir="auto"
|
||||||
class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
|
class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
|
||||||
:class="{ 'mb-2': !currentField.description }"
|
:class="{ 'mb-2': !currentField.description }"
|
||||||
@@ -356,6 +356,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="space-y-3.5 mx-auto"
|
class="space-y-3.5 mx-auto"
|
||||||
|
role="radiogroup"
|
||||||
|
:aria-labelledby="(currentField.name || currentField.title) ? currentField.uuid + '-radio-label' : null"
|
||||||
:class="{ hidden: !showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4) }"
|
:class="{ hidden: !showFieldNames || (currentField.options.every((e) => !e.value) && currentField.options.length > 4) }"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -27,6 +27,7 @@
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
id="type_text_button"
|
id="type_text_button"
|
||||||
|
ref="typeTextButton"
|
||||||
type="button"
|
type="button"
|
||||||
:aria-label="t('draw_signature')"
|
:aria-label="t('draw_signature')"
|
||||||
class="btn btn-outline btn-sm font-medium type-text-button"
|
class="btn btn-outline btn-sm font-medium type-text-button"
|
||||||
@@ -49,6 +50,7 @@
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
id="type_text_button"
|
id="type_text_button"
|
||||||
|
ref="typeTextButton"
|
||||||
type="button"
|
type="button"
|
||||||
:aria-label="t('type_text')"
|
:aria-label="t('type_text')"
|
||||||
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap type-text-button"
|
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap type-text-button"
|
||||||
@@ -71,7 +73,7 @@
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
:aria-label="t('take_photo')"
|
:aria-label="t('upload')"
|
||||||
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button"
|
class="btn btn-outline btn-sm font-medium inline-flex flex-nowrap upload-image-button"
|
||||||
@click="$refs.takePhotoInput.click()"
|
@click="$refs.takePhotoInput.click()"
|
||||||
>
|
>
|
||||||
@@ -199,7 +201,7 @@
|
|||||||
<canvas
|
<canvas
|
||||||
v-show="!modelValue && !computedPreviousValue"
|
v-show="!modelValue && !computedPreviousValue"
|
||||||
ref="canvas"
|
ref="canvas"
|
||||||
role="application"
|
role="img"
|
||||||
:aria-label="t('signature_drawing_area')"
|
:aria-label="t('signature_drawing_area')"
|
||||||
style="padding: 1px; 0"
|
style="padding: 1px; 0"
|
||||||
class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
|
class="bg-white border border-base-300 rounded-2xl w-full draw-canvas"
|
||||||
@@ -716,10 +718,12 @@ export default {
|
|||||||
this.clear()
|
this.clear()
|
||||||
this.isTextSignature = !this.isTextSignature
|
this.isTextSignature = !this.isTextSignature
|
||||||
|
|
||||||
if (this.isTextSignature) {
|
this.$nextTick(() => {
|
||||||
this.$nextTick(() => {
|
if (this.isTextSignature) {
|
||||||
if (this.$refs.textInput) {
|
if (this.$refs.textInput) {
|
||||||
if (!this.submitter.name) {
|
if (this.submitter.name) {
|
||||||
|
this.$refs.typeTextButton?.focus()
|
||||||
|
} else {
|
||||||
this.$refs.textInput.focus()
|
this.$refs.textInput.focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -727,8 +731,10 @@ export default {
|
|||||||
|
|
||||||
this.$emit('start')
|
this.$emit('start')
|
||||||
}
|
}
|
||||||
})
|
} else {
|
||||||
}
|
this.$refs.typeTextButton?.focus()
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
async initTypedSignature () {
|
async initTypedSignature () {
|
||||||
if (this.signatureText) {
|
if (this.signatureText) {
|
||||||
|
|||||||
Reference in New Issue
Block a user