improve accessibility

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
@@ -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