Merge branch 'more-accessibility' into fix/more-accessibility
This commit is contained in:
commit
7c2876894a
3 changed files with 9 additions and 3 deletions
|
@ -26,6 +26,7 @@
|
||||||
<div ref="headerEl" class="header">
|
<div ref="headerEl" class="header">
|
||||||
<button
|
<button
|
||||||
v-if="withOkButton"
|
v-if="withOkButton"
|
||||||
|
:aria-label="i18n.t('close')"
|
||||||
class="_button"
|
class="_button"
|
||||||
@click="$emit('close')"
|
@click="$emit('close')"
|
||||||
>
|
>
|
||||||
|
@ -36,6 +37,7 @@
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
v-if="!withOkButton"
|
v-if="!withOkButton"
|
||||||
|
:aria-label="i18n.t('close')"
|
||||||
class="_button"
|
class="_button"
|
||||||
@click="$emit('close')"
|
@click="$emit('close')"
|
||||||
>
|
>
|
||||||
|
@ -43,6 +45,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="withOkButton"
|
v-if="withOkButton"
|
||||||
|
:aria-label="i18n.t('ok')"
|
||||||
class="_button"
|
class="_button"
|
||||||
:disabled="okButtonDisabled"
|
:disabled="okButtonDisabled"
|
||||||
@click="$emit('ok')"
|
@click="$emit('ok')"
|
||||||
|
@ -61,6 +64,7 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { FocusTrap } from "focus-trap-vue";
|
import { FocusTrap } from "focus-trap-vue";
|
||||||
import MkModal from "./MkModal.vue";
|
import MkModal from "./MkModal.vue";
|
||||||
|
import { i18n } from "@/i18n";
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
|
|
@ -17,16 +17,17 @@
|
||||||
{{ file.name }}
|
{{ file.name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<button class="_button" @click="chooseFile">
|
<button class="_button" @click="chooseFile" :aria-label="i18n.t('attachFile')">
|
||||||
<i class="ph-upload ph-bold ph-lg"></i>
|
<i class="ph-upload ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
<button class="_button" @click="insertEmoji">
|
<button class="_button" @click="insertEmoji" :aria-label="i18n.t('chooseEmoji')">
|
||||||
<i class="ph-smiley ph-bold ph-lg"></i>
|
<i class="ph-smiley ph-bold ph-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="send _button"
|
class="send _button"
|
||||||
:disabled="!canSend || sending"
|
:disabled="!canSend || sending"
|
||||||
:title="i18n.ts.send"
|
:title="i18n.ts.send"
|
||||||
|
:aria-label="i18n.ts.send"
|
||||||
@click="send"
|
@click="send"
|
||||||
>
|
>
|
||||||
<template v-if="!sending"
|
<template v-if="!sending"
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
#default="{ items: messages, fetching: pFetching }"
|
#default="{ items: messages, fetching: pFetching }"
|
||||||
>
|
>
|
||||||
<XList
|
<XList
|
||||||
|
aria-live="polite"
|
||||||
v-if="messages.length > 0"
|
v-if="messages.length > 0"
|
||||||
v-slot="{ item: message }"
|
v-slot="{ item: message }"
|
||||||
:class="{
|
:class="{
|
||||||
|
@ -48,7 +49,7 @@
|
||||||
</MkPagination>
|
</MkPagination>
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer>
|
||||||
<div v-if="typers.length > 0" class="typers">
|
<div v-if="typers.length > 0" class="typers" aria-live="polite">
|
||||||
<I18n
|
<I18n
|
||||||
:src="i18n.ts.typingUsers"
|
:src="i18n.ts.typingUsers"
|
||||||
text-tag="span"
|
text-tag="span"
|
||||||
|
|
Loading…
Reference in a new issue