Merge pull request 'Fix: Accessibility fixes, mostly for screen reader' (#10173) from TalonTheDragon/calckey:fix/accessibility into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10173
This commit is contained in:
Kainoa Kanter 2023-05-22 14:51:51 +00:00
commit 16d0304d97
5 changed files with 68 additions and 66 deletions

View File

@ -69,6 +69,7 @@ followRequestAccepted: "Follow request accepted"
mention: "Mention" mention: "Mention"
mentions: "Mentions" mentions: "Mentions"
directNotes: "Direct messages" directNotes: "Direct messages"
cw: "Content warning"
importAndExport: "Import/Export Data" importAndExport: "Import/Export Data"
import: "Import" import: "Import"
export: "Export" export: "Export"

View File

@ -1,19 +1,8 @@
<template> <template>
<div <div :aria-label="accessibleLabel" v-if="!muted.muted" v-show="!isDeleted" ref="el" v-hotkey="keymap"
v-if="!muted.muted" v-size="{ max: [500, 450, 350, 300] }" class="tkcbzcuz note-container" :tabindex="!isDeleted ? '-1' : null"
v-show="!isDeleted" :class="{ renote: isRenote }">
ref="el" <MkNoteSub v-if="appearNote.reply && !detailedView" :note="appearNote.reply" class="reply-to" />
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="tkcbzcuz note-container"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
>
<MkNoteSub
v-if="appearNote.reply && !detailedView"
:note="appearNote.reply"
class="reply-to"
/>
<div v-if="!detailedView" class="note-context" @click="noteClick"> <div v-if="!detailedView" class="note-context" @click="noteClick">
<div class="line"></div> <div class="line"></div>
<div v-if="appearNote._prId_" class="info"> <div v-if="appearNote._prId_" class="info">
@ -29,79 +18,47 @@
{{ i18n.ts.featured }} {{ i18n.ts.featured }}
</div> </div>
<div v-if="pinned" class="info"> <div v-if="pinned" class="info">
<i class="ph-push-pin ph-bold ph-lg"></i <i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}
>{{ i18n.ts.pinnedNote }}
</div> </div>
<div v-if="isRenote" class="renote"> <div v-if="isRenote" class="renote">
<i class="ph-repeat ph-bold ph-lg"></i> <i class="ph-repeat ph-bold ph-lg"></i>
<I18n :src="i18n.ts.renotedBy" tag="span"> <I18n :src="i18n.ts.renotedBy" tag="span">
<template #user> <template #user>
<MkA <MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
v-user-preview="note.userId"
class="name"
:to="userPage(note.user)"
@click.stop
>
<MkUserName :user="note.user" /> <MkUserName :user="note.user" />
</MkA> </MkA>
</template> </template>
</I18n> </I18n>
<div class="info"> <div class="info">
<button <button ref="renoteTime" class="_button time" @click.stop="showRenoteMenu()">
ref="renoteTime" <i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
class="_button time"
@click.stop="showRenoteMenu()"
>
<i
v-if="isMyRenote"
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
></i>
<MkTime :time="note.createdAt" /> <MkTime :time="note.createdAt" />
</button> </button>
<MkVisibility :note="note" /> <MkVisibility :note="note" />
</div> </div>
</div> </div>
</div> </div>
<article <article class="article" @contextmenu.stop="onContextmenu" @click="noteClick">
class="article"
@contextmenu.stop="onContextmenu"
@click="noteClick"
>
<div class="main"> <div class="main">
<div class="header-container"> <div class="header-container">
<MkAvatar class="avatar" :user="appearNote.user" /> <MkAvatar class="avatar" :user="appearNote.user" />
<XNoteHeader <XNoteHeader class="header" :note="appearNote" :mini="true" />
class="header"
:note="appearNote"
:mini="true"
/>
</div> </div>
<div class="body"> <div class="body">
<MkSubNoteContent <MkSubNoteContent class="text" :note="appearNote" :detailed="true" :detailedView="detailedView"
class="text" :parentId="appearNote.parentId" @push="(e) => router.push(notePage(e))"
:note="appearNote" @focusfooter="footerEl.focus()" @expanded="(e) => setPostExpanded(e)"></MkSubNoteContent>
:detailed="true"
:detailedView="detailedView"
:parentId="appearNote.parentId"
@push="(e) => router.push(notePage(e))"
@focusfooter="footerEl.focus()"
></MkSubNoteContent>
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini /> <MkLoading v-if="translating" mini />
<div v-else class="translated"> <div v-else class="translated">
<b <b>{{
>{{
i18n.t("translatedFrom", { i18n.t("translatedFrom", {
x: translation.sourceLang, x: translation.sourceLang,
}) })
}}: }}:
</b> </b>
<Mfm <Mfm :text="translation.text" :author="appearNote.user" :i="$i"
:text="translation.text" :custom-emojis="appearNote.emojis" />
:author="appearNote.user"
:i="$i"
:custom-emojis="appearNote.emojis"
/>
</div> </div>
</div> </div>
</div> </div>
@ -472,6 +429,39 @@ function readPromo() {
isDeleted.value = true; isDeleted.value = true;
} }
let postIsExpanded = ref(false);
function setPostExpanded(val: boolean) {
postIsExpanded.value = val;
}
const accessibleLabel = computed(() => {
let label = `${props.note.user.username}; `;
if (props.note.renote) {
label += `${i18n.t("renoted")} ${props.note.renote.user.username}; `;
if (props.note.renote.cw) {
label += `${i18n.t('cw')}: ${props.note.renote.cw}; `;
if (postIsExpanded.value) {
label += `${props.note.renote.text}; `;
}
} else {
label += `${props.note.renote.text}; `;
}
} else {
if (props.note.cw) {
label += `${i18n.t("cw")}: ${props.note.cw}; `;
if (postIsExpanded.value) {
label += `${props.note.text}; `;
}
} else {
label += `${props.note.text}; `;
}
}
const date = new Date(props.note.createdAt);
label += `${date.toLocaleTimeString()}`;
return label;
})
defineExpose({ defineExpose({
focus, focus,
blur, blur,

View File

@ -54,11 +54,12 @@
v-model="showContent" v-model="showContent"
:note="note" :note="note"
v-on:keydown="focusFooter" v-on:keydown="focusFooter"
v-on:update:model-value="(val) => emit('expanded', val)"
/> />
<div <div
class="body" class="body"
v-bind="{ v-bind="{
'aria-hidden': !showContent ? 'true' : null, 'aria-hidden': note.cw && !showContent ? 'true' : null,
tabindex: !showContent ? '-1' : null, tabindex: !showContent ? '-1' : null,
}" }"
> >
@ -190,6 +191,7 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
(ev: "push", v): void; (ev: "push", v): void;
(ev: "focusfooter"): void; (ev: "focusfooter"): void;
(ev: "expanded", v): void;
}>(); }>();
const cwButton = ref<HTMLElement>(); const cwButton = ref<HTMLElement>();

View File

@ -111,6 +111,7 @@
<div v-if="isMobile" class="buttons"> <div v-if="isMobile" class="buttons">
<button <button
:aria-label="i18n.t('menu')"
class="button nav _button" class="button nav _button"
@click="drawerMenuShowing = true" @click="drawerMenuShowing = true"
> >
@ -119,10 +120,11 @@
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
</button> </button>
<button class="button home _button" @click="mainRouter.push('/')"> <button :aria-label="i18n.t('home')" class="button home _button" @click="mainRouter.push('/')">
<i class="ph-house ph-bold ph-lg"></i> <i class="ph-house ph-bold ph-lg"></i>
</button> </button>
<button <button
:aria-label="i18n.t('notifications')"
class="button notifications _button" class="button notifications _button"
@click="mainRouter.push('/my/notifications')" @click="mainRouter.push('/my/notifications')"
> >
@ -131,7 +133,7 @@
><i class="ph-circle ph-fill"></i ><i class="ph-circle ph-fill"></i
></span> ></span>
</button> </button>
<button class="button post _button" @click="os.post()"> <button :aria-label="i18n.t('note')" class="button post _button" @click="os.post()">
<i class="ph-pencil ph-bold ph-lg"></i> <i class="ph-pencil ph-bold ph-lg"></i>
</button> </button>
</div> </div>

View File

@ -36,6 +36,7 @@
<div v-if="isMobile" class="buttons"> <div v-if="isMobile" class="buttons">
<button <button
:aria-label="i18n.t('menu')"
class="button nav _button" class="button nav _button"
@click="drawerMenuShowing = true" @click="drawerMenuShowing = true"
> >
@ -47,6 +48,7 @@
</div> </div>
</button> </button>
<button <button
:aria-label="i18n.t('home')"
class="button home _button" class="button home _button"
@click=" @click="
mainRouter.currentRoute.value.name === 'index' mainRouter.currentRoute.value.name === 'index'
@ -63,6 +65,7 @@
</div> </div>
</button> </button>
<button <button
:aria-label="i18n.t('notifications')"
class="button notifications _button" class="button notifications _button"
@click=" @click="
mainRouter.push('/my/notifications'); mainRouter.push('/my/notifications');
@ -80,6 +83,7 @@
</div> </div>
</button> </button>
<button <button
:aria-label="i18n.t('messaging')"
class="button messaging _button" class="button messaging _button"
@click=" @click="
mainRouter.push('/my/messaging'); mainRouter.push('/my/messaging');
@ -99,6 +103,7 @@
</div> </div>
</button> </button>
<button <button
:aria-label="i18n.t('_deck._columns.widgets')"
class="button widget _button" class="button widget _button"
@click="widgetsShowing = true" @click="widgetsShowing = true"
> >
@ -111,6 +116,7 @@
<button <button
v-if="isMobile && mainRouter.currentRoute.value.name === 'index'" v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
ref="postButton" ref="postButton"
:aria-label="i18n.t('note')"
class="postButton button post _button" class="postButton button post _button"
@click="os.post()" @click="os.post()"
> >
@ -122,6 +128,7 @@
" "
ref="postButton" ref="postButton"
class="postButton button post _button" class="postButton button post _button"
:aria-label="i18n.t('startMessaging')"
@click="messagingStart" @click="messagingStart"
> >
<i class="ph-user-plus ph-bold ph-lg"></i> <i class="ph-user-plus ph-bold ph-lg"></i>