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/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'