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
commit
16d0304d97
|
|
@ -69,6 +69,7 @@ followRequestAccepted: "Follow request accepted"
|
|||
mention: "Mention"
|
||||
mentions: "Mentions"
|
||||
directNotes: "Direct messages"
|
||||
cw: "Content warning"
|
||||
importAndExport: "Import/Export Data"
|
||||
import: "Import"
|
||||
export: "Export"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,8 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="!muted.muted"
|
||||
v-show="!isDeleted"
|
||||
ref="el"
|
||||
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 :aria-label="accessibleLabel" v-if="!muted.muted" v-show="!isDeleted" ref="el" 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 class="line"></div>
|
||||
<div v-if="appearNote._prId_" class="info">
|
||||
|
|
@ -29,79 +18,47 @@
|
|||
{{ i18n.ts.featured }}
|
||||
</div>
|
||||
<div v-if="pinned" class="info">
|
||||
<i class="ph-push-pin ph-bold ph-lg"></i
|
||||
>{{ i18n.ts.pinnedNote }}
|
||||
<i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}
|
||||
</div>
|
||||
<div v-if="isRenote" class="renote">
|
||||
<i class="ph-repeat ph-bold ph-lg"></i>
|
||||
<I18n :src="i18n.ts.renotedBy" tag="span">
|
||||
<template #user>
|
||||
<MkA
|
||||
v-user-preview="note.userId"
|
||||
class="name"
|
||||
:to="userPage(note.user)"
|
||||
@click.stop
|
||||
>
|
||||
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
|
||||
<MkUserName :user="note.user" />
|
||||
</MkA>
|
||||
</template>
|
||||
</I18n>
|
||||
<div class="info">
|
||||
<button
|
||||
ref="renoteTime"
|
||||
class="_button time"
|
||||
@click.stop="showRenoteMenu()"
|
||||
>
|
||||
<i
|
||||
v-if="isMyRenote"
|
||||
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
|
||||
></i>
|
||||
<button ref="renoteTime" 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" />
|
||||
</button>
|
||||
<MkVisibility :note="note" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<article
|
||||
class="article"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@click="noteClick"
|
||||
>
|
||||
<article class="article" @contextmenu.stop="onContextmenu" @click="noteClick">
|
||||
<div class="main">
|
||||
<div class="header-container">
|
||||
<MkAvatar class="avatar" :user="appearNote.user" />
|
||||
<XNoteHeader
|
||||
class="header"
|
||||
:note="appearNote"
|
||||
:mini="true"
|
||||
/>
|
||||
<XNoteHeader class="header" :note="appearNote" :mini="true" />
|
||||
</div>
|
||||
<div class="body">
|
||||
<MkSubNoteContent
|
||||
class="text"
|
||||
:note="appearNote"
|
||||
:detailed="true"
|
||||
:detailedView="detailedView"
|
||||
:parentId="appearNote.parentId"
|
||||
@push="(e) => router.push(notePage(e))"
|
||||
@focusfooter="footerEl.focus()"
|
||||
></MkSubNoteContent>
|
||||
<MkSubNoteContent class="text" :note="appearNote" :detailed="true" :detailedView="detailedView"
|
||||
:parentId="appearNote.parentId" @push="(e) => router.push(notePage(e))"
|
||||
@focusfooter="footerEl.focus()" @expanded="(e) => setPostExpanded(e)"></MkSubNoteContent>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini />
|
||||
<div v-else class="translated">
|
||||
<b
|
||||
>{{
|
||||
i18n.t("translatedFrom", {
|
||||
x: translation.sourceLang,
|
||||
})
|
||||
}}:
|
||||
<b>{{
|
||||
i18n.t("translatedFrom", {
|
||||
x: translation.sourceLang,
|
||||
})
|
||||
}}:
|
||||
</b>
|
||||
<Mfm
|
||||
:text="translation.text"
|
||||
:author="appearNote.user"
|
||||
:i="$i"
|
||||
:custom-emojis="appearNote.emojis"
|
||||
/>
|
||||
<Mfm :text="translation.text" :author="appearNote.user" :i="$i"
|
||||
:custom-emojis="appearNote.emojis" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -472,6 +429,39 @@ function readPromo() {
|
|||
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({
|
||||
focus,
|
||||
blur,
|
||||
|
|
|
|||
|
|
@ -54,11 +54,12 @@
|
|||
v-model="showContent"
|
||||
:note="note"
|
||||
v-on:keydown="focusFooter"
|
||||
v-on:update:model-value="(val) => emit('expanded', val)"
|
||||
/>
|
||||
<div
|
||||
class="body"
|
||||
v-bind="{
|
||||
'aria-hidden': !showContent ? 'true' : null,
|
||||
'aria-hidden': note.cw && !showContent ? 'true' : null,
|
||||
tabindex: !showContent ? '-1' : null,
|
||||
}"
|
||||
>
|
||||
|
|
@ -190,6 +191,7 @@ const props = defineProps<{
|
|||
const emit = defineEmits<{
|
||||
(ev: "push", v): void;
|
||||
(ev: "focusfooter"): void;
|
||||
(ev: "expanded", v): void;
|
||||
}>();
|
||||
|
||||
const cwButton = ref<HTMLElement>();
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@
|
|||
|
||||
<div v-if="isMobile" class="buttons">
|
||||
<button
|
||||
:aria-label="i18n.t('menu')"
|
||||
class="button nav _button"
|
||||
@click="drawerMenuShowing = true"
|
||||
>
|
||||
|
|
@ -119,10 +120,11 @@
|
|||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</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>
|
||||
</button>
|
||||
<button
|
||||
:aria-label="i18n.t('notifications')"
|
||||
class="button notifications _button"
|
||||
@click="mainRouter.push('/my/notifications')"
|
||||
>
|
||||
|
|
@ -131,7 +133,7 @@
|
|||
><i class="ph-circle ph-fill"></i
|
||||
></span>
|
||||
</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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
|
||||
<div v-if="isMobile" class="buttons">
|
||||
<button
|
||||
:aria-label="i18n.t('menu')"
|
||||
class="button nav _button"
|
||||
@click="drawerMenuShowing = true"
|
||||
>
|
||||
|
|
@ -47,6 +48,7 @@
|
|||
</div>
|
||||
</button>
|
||||
<button
|
||||
:aria-label="i18n.t('home')"
|
||||
class="button home _button"
|
||||
@click="
|
||||
mainRouter.currentRoute.value.name === 'index'
|
||||
|
|
@ -63,6 +65,7 @@
|
|||
</div>
|
||||
</button>
|
||||
<button
|
||||
:aria-label="i18n.t('notifications')"
|
||||
class="button notifications _button"
|
||||
@click="
|
||||
mainRouter.push('/my/notifications');
|
||||
|
|
@ -80,6 +83,7 @@
|
|||
</div>
|
||||
</button>
|
||||
<button
|
||||
:aria-label="i18n.t('messaging')"
|
||||
class="button messaging _button"
|
||||
@click="
|
||||
mainRouter.push('/my/messaging');
|
||||
|
|
@ -99,6 +103,7 @@
|
|||
</div>
|
||||
</button>
|
||||
<button
|
||||
:aria-label="i18n.t('_deck._columns.widgets')"
|
||||
class="button widget _button"
|
||||
@click="widgetsShowing = true"
|
||||
>
|
||||
|
|
@ -111,6 +116,7 @@
|
|||
<button
|
||||
v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
|
||||
ref="postButton"
|
||||
:aria-label="i18n.t('note')"
|
||||
class="postButton button post _button"
|
||||
@click="os.post()"
|
||||
>
|
||||
|
|
@ -122,6 +128,7 @@
|
|||
"
|
||||
ref="postButton"
|
||||
class="postButton button post _button"
|
||||
:aria-label="i18n.t('startMessaging')"
|
||||
@click="messagingStart"
|
||||
>
|
||||
<i class="ph-user-plus ph-bold ph-lg"></i>
|
||||
|
|
|
|||
Loading…
Reference in a new issue