natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request '[PR]: Some more ARIA label and live-region magic' (#10257) from TalonTheDragon/calckey:fix/more-accessibility into develop 

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10257
This commit is contained in:
Kainoa Kanter 2023-06-04 16:53:35 +00:00
parent 15b30231eb 4a9e442abb
commit 8d96733137
3 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/MkModalWindow.vue
View File

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

5
packages/client/src/pages/messaging/messaging-room.form.vue
View File

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

3
packages/client/src/pages/messaging/messaging-room.vue
View File

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