From 029d12f8caf8999432b82ce4d9dd70753f56b49e Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Sun, 21 May 2023 16:10:48 +0200
Subject: [PATCH 01/10] Add aria-label to note container. This makes
 screen-readers read out the content while navigating with the keyboard.

---
 packages/client/src/components/MkNote.vue | 34 +++++++++++++----------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index c9c38a53e..d267f2d4d 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/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">
@@ -472,6 +461,21 @@ function readPromo() {
 	isDeleted.value = true;
 }
 
+let accessibleLabel: string = getAccessibleLabel();
+
+function getAccessibleLabel(): string {
+	let label = `${note.user.name ? note.user.name : note.user.username}: `;
+	if (note.cw && note.isHidden) {
+		label += `Content Warning: ${note.cw}`;
+
+	} else {
+		label += `${note.text}`;
+	}
+
+
+	label += `${note.createdAt.toLocaleUpperCase()}`;
+	return label;
+}
 defineExpose({
 	focus,
 	blur,

From 02a6a933cf34955f825db69bbc20a20380a61904 Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Sun, 21 May 2023 16:12:13 +0200
Subject: [PATCH 02/10] Properly set aria-hidden on note content only if CW is
 present and show content has not been clicked

---
 packages/client/src/components/MkSubNoteContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index e2672298c..b162bca0b 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -58,7 +58,7 @@
 			<div
 				class="body"
 				v-bind="{
-					'aria-hidden': !showContent ? 'true' : null,
+					'aria-hidden': note.cw && !showContent ? 'true' : null,
 					tabindex: !showContent ? '-1' : null,
 				}"
 			>

From b8f90e192bc1205642ab9b3e64c3045da35781c5 Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Sun, 21 May 2023 19:17:13 +0200
Subject: [PATCH 03/10] Label deck and universal bar buttons for screen readers
 on mobile. Still needs translation and aria-selected

---
 packages/client/src/ui/deck.vue      | 6 ++++--
 packages/client/src/ui/universal.vue | 7 +++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 9de91fe56..f1cb40797 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -111,6 +111,7 @@
 
 		<div v-if="isMobile" class="buttons">
 			<button
+			aria-label="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="Home" class="button home _button" @click="mainRouter.push('/')">
 				<i class="ph-house ph-bold ph-lg"></i>
 			</button>
 			<button
+			aria-label="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="Post" class="button post _button" @click="os.post()">
 				<i class="ph-pencil ph-bold ph-lg"></i>
 			</button>
 		</div>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index f42f49513..84dd742a5 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -36,6 +36,7 @@
 
 		<div v-if="isMobile" class="buttons">
 			<button
+			aria-label="Menu"
 				class="button nav _button"
 				@click="drawerMenuShowing = true"
 			>
@@ -47,6 +48,7 @@
 				</div>
 			</button>
 			<button
+			aria-label="Home"
 				class="button home _button"
 				@click="
 					mainRouter.currentRoute.value.name === 'index'
@@ -63,6 +65,7 @@
 				</div>
 			</button>
 			<button
+			aria-label="Notifications"
 				class="button notifications _button"
 				@click="
 					mainRouter.push('/my/notifications');
@@ -80,6 +83,7 @@
 				</div>
 			</button>
 			<button
+			aria-label="Chat"
 				class="button messaging _button"
 				@click="
 					mainRouter.push('/my/messaging');
@@ -99,6 +103,7 @@
 				</div>
 			</button>
 			<button
+			aria-label="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="Post"
 			class="postButton button post _button"
 			@click="os.post()"
 		>
@@ -122,6 +128,7 @@
 			"
 			ref="postButton"
 			class="postButton button post _button"
+			aria-label="New Chat"
 			@click="messagingStart"
 		>
 			<i class="ph-user-plus ph-bold ph-lg"></i>

From 339c0705c05d882dc386968bb1d0cab366edf1a2 Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Sun, 21 May 2023 21:57:29 +0200
Subject: [PATCH 04/10] Accessible label in MKNote should be a computed value.
 Also Fixes renoted note labels

---
 packages/client/src/components/MkNote.vue | 30 ++++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index d267f2d4d..63aa8978d 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -461,21 +461,27 @@ function readPromo() {
 	isDeleted.value = true;
 }
 
-let accessibleLabel: string = getAccessibleLabel();
-
-function getAccessibleLabel(): string {
-	let label = `${note.user.name ? note.user.name : note.user.username}: `;
-	if (note.cw && note.isHidden) {
-		label += `Content Warning: ${note.cw}`;
-
+const accessibleLabel = computed(() => {
+	let label = `${props.note.user.username}; `;
+	if (props.note.renote) {
+		label += `boosted ${props.note.renote.user.username}; `;
+		if (props.note.renote.cw) {
+			label += `content warning: ${props.note.renote.cw}; `;
+		} else {
+			label += `${props.note.renote.text}; `;
+		}
 	} else {
-		label += `${note.text}`;
+		if (props.note.cw) {
+			label += `content warning: ${props.note.cw}; `;
+		} else {
+			label += `${props.note.text}; `;
+		}
 	}
-
-
-	label += `${note.createdAt.toLocaleUpperCase()}`;
+	const date = new Date(props.note.createdAt);
+	label += `${date.toDateString()}`;
 	return label;
-}
+})
+
 defineExpose({
 	focus,
 	blur,

From d7f751a1a0aa01b189ef6d80de5d534b15f150a1 Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Sun, 21 May 2023 23:02:22 +0200
Subject: [PATCH 05/10] Add translation to aria labels

---
 packages/client/src/components/MkNote.vue |  4 ++--
 packages/client/src/ui/universal.vue      | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 63aa8978d..c43ee0c3d 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -464,7 +464,7 @@ function readPromo() {
 const accessibleLabel = computed(() => {
 	let label = `${props.note.user.username}; `;
 	if (props.note.renote) {
-		label += `boosted ${props.note.renote.user.username}; `;
+		label += `${i18n.t("renoted")} ${props.note.renote.user.username}; `;
 		if (props.note.renote.cw) {
 			label += `content warning: ${props.note.renote.cw}; `;
 		} else {
@@ -478,7 +478,7 @@ const accessibleLabel = computed(() => {
 		}
 	}
 	const date = new Date(props.note.createdAt);
-	label += `${date.toDateString()}`;
+	label += `${date.toLocaleTimeString()}`;
 	return label;
 })
 
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 84dd742a5..6a39a739b 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -36,7 +36,7 @@
 
 		<div v-if="isMobile" class="buttons">
 			<button
-			aria-label="Menu"
+			:aria-label="i18n.t('menu')"
 				class="button nav _button"
 				@click="drawerMenuShowing = true"
 			>
@@ -48,7 +48,7 @@
 				</div>
 			</button>
 			<button
-			aria-label="Home"
+			:aria-label="i18n.t('home')"
 				class="button home _button"
 				@click="
 					mainRouter.currentRoute.value.name === 'index'
@@ -65,7 +65,7 @@
 				</div>
 			</button>
 			<button
-			aria-label="Notifications"
+			:aria-label="i18n.t('notifications')"
 				class="button notifications _button"
 				@click="
 					mainRouter.push('/my/notifications');
@@ -83,7 +83,7 @@
 				</div>
 			</button>
 			<button
-			aria-label="Chat"
+			:aria-label="i18n.t('messaging')"
 				class="button messaging _button"
 				@click="
 					mainRouter.push('/my/messaging');
@@ -103,7 +103,7 @@
 				</div>
 			</button>
 			<button
-			aria-label="Widgets"
+			:aria-label="i18n.t('_deck._columns.widgets')"
 				class="button widget _button"
 				@click="widgetsShowing = true"
 			>
@@ -116,7 +116,7 @@
 		<button
 			v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
 			ref="postButton"
-			aria-label="Post"
+			:aria-label="i18n.t('note')"
 			class="postButton button post _button"
 			@click="os.post()"
 		>
@@ -128,7 +128,7 @@
 			"
 			ref="postButton"
 			class="postButton button post _button"
-			aria-label="New Chat"
+			:aria-label="i18n.t('startMessaging')"
 			@click="messagingStart"
 		>
 			<i class="ph-user-plus ph-bold ph-lg"></i>

From 9a3e8556408ac8450fefd4a810dbf9a6fcbbb6f7 Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Mon, 22 May 2023 10:54:42 +0200
Subject: [PATCH 06/10] Add translations to deck.vue aria labels

---
 packages/client/src/ui/deck.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index f1cb40797..b669aae28 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -111,7 +111,7 @@
 
 		<div v-if="isMobile" class="buttons">
 			<button
-			aria-label="Menu"
+			:aria-label="i18n.t('menu')"
 				class="button nav _button"
 				@click="drawerMenuShowing = true"
 			>
@@ -120,11 +120,11 @@
 					><i class="ph-circle ph-fill"></i
 				></span>
 			</button>
-			<button aria-label="Home" 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="Notifications"
+			:aria-label="i18n.t('notifications')"
 				class="button notifications _button"
 				@click="mainRouter.push('/my/notifications')"
 			>
@@ -133,7 +133,7 @@
 					><i class="ph-circle ph-fill"></i
 				></span>
 			</button>
-			<button aria-label="Post" 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>

From 670d9ed4d3a16861a0fddc1162692c30ed64754d Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Mon, 22 May 2023 10:56:42 +0200
Subject: [PATCH 07/10] Add translation to content warning in MKNote.vue

---
 packages/client/src/components/MkNote.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index c43ee0c3d..cac0461b4 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -472,7 +472,7 @@ const accessibleLabel = computed(() => {
 		}
 	} else {
 		if (props.note.cw) {
-			label += `content warning: ${props.note.cw}; `;
+			label += `${i18n.t("cw")}: ${props.note.cw}; `;
 		} else {
 			label += `${props.note.text}; `;
 		}

From 67cd2357334ed4fa7dea01587eeeb9969aa9ae3a Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Mon, 22 May 2023 10:58:20 +0200
Subject: [PATCH 08/10] Add cw to english locale

---
 locales/en-US.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index b3944b1e5..9c658d668 100644
--- a/locales/en-US.yml
+++ b/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"

From a0701fada781420c1c939d6e80376c1cd7cbcb91 Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Mon, 22 May 2023 12:18:17 +0200
Subject: [PATCH 09/10] Emit event when cw is expanded

---
 packages/client/src/components/MkNote.vue     | 76 +++++++------------
 .../src/components/MkSubNoteContent.vue       |  2 +
 2 files changed, 30 insertions(+), 48 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index cac0461b4..8e6eb0d10 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -18,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>
@@ -461,18 +429,30 @@ function readPromo() {
 	isDeleted.value = true;
 }
 
+let postIsExpanded = false;
+
+function setPostExpanded(val: boolean) {
+	postIsExpanded = 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 += `content warning: ${props.note.renote.cw}; `;
+			if (postIsExpanded) {
+				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) {
+				label += `${props.note.text}; `;
+			}
 		} else {
 			label += `${props.note.text}; `;
 		}
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index b162bca0b..5a46a319c 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -54,6 +54,7 @@
 				v-model="showContent"
 				:note="note"
 				v-on:keydown="focusFooter"
+				v-on:update:model-value="(val) => emit('expanded', val)"
 			/>
 			<div
 				class="body"
@@ -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>();

From 116722a2313481fcea27dbb58829c5912bed6722 Mon Sep 17 00:00:00 2001
From: TalonTheDragon <talon@iamtalon.me>
Date: Mon, 22 May 2023 13:08:32 +0200
Subject: [PATCH 10/10] Set postIsExpanded to ref() for reactivity

---
 packages/client/src/components/MkNote.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 8e6eb0d10..fa82c0e21 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -429,10 +429,10 @@ function readPromo() {
 	isDeleted.value = true;
 }
 
-let postIsExpanded = false;
+let postIsExpanded = ref(false);
 
 function setPostExpanded(val: boolean) {
-	postIsExpanded = val;
+	postIsExpanded.value = val;
 }
 
 const accessibleLabel = computed(() => {
@@ -440,8 +440,8 @@ const accessibleLabel = computed(() => {
 	if (props.note.renote) {
 		label += `${i18n.t("renoted")} ${props.note.renote.user.username}; `;
 		if (props.note.renote.cw) {
-			label += `content warning: ${props.note.renote.cw}; `;
-			if (postIsExpanded) {
+			label += `${i18n.t('cw')}: ${props.note.renote.cw}; `;
+			if (postIsExpanded.value) {
 				label += `${props.note.renote.text}; `;	
 			}
 		} else {
@@ -450,7 +450,7 @@ const accessibleLabel = computed(() => {
 	} else {
 		if (props.note.cw) {
 			label += `${i18n.t("cw")}: ${props.note.cw}; `;
-			if (postIsExpanded) {
+			if (postIsExpanded.value) {
 				label += `${props.note.text}; `;
 			}
 		} else {