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

locales/en-US.yml

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

packages/client/src/components/MkNote.vue

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

packages/client/src/components/MkSubNoteContent.vue

@@ -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>();

packages/client/src/ui/deck.vue

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

packages/client/src/ui/universal.vue

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