From f5867f25412a48fc7b2f72170dbf90535f97fc18 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 10 May 2023 17:44:08 -0400
Subject: [PATCH] Fix more unfocusable elements

---
 packages/client/src/components/MkMediaImage.vue   |  9 +++++++--
 packages/client/src/components/MkNote.vue         |  5 +++--
 packages/client/src/components/MkPostForm.vue     |  2 +-
 .../client/src/components/global/MkPageHeader.vue | 15 ++++++++++-----
 packages/client/src/pages/settings/theme.vue      |  6 ++++--
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 3cfb0f465..37fe5174b 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="hide" class="qjewsnkg" @click="hide = false">
+	<button v-if="hide" class="qjewsnkg" @click="hide = false">
 		<ImgWithBlurhash
 			class="bg"
 			:hash="image.blurhash"
@@ -15,7 +15,7 @@
 				<span style="display: block">{{ i18n.ts.clickToShow }}</span>
 			</div>
 		</div>
-	</div>
+	</button>
 	<div v-else class="gqnyydlz">
 		<a :href="image.url" :title="image.name">
 			<ImgWithBlurhash
@@ -79,6 +79,7 @@ watch(
 
 <style lang="scss" scoped>
 .qjewsnkg {
+	all: unset;
 	position: relative;
 
 	> .bg {
@@ -103,6 +104,10 @@ watch(
 			color: #fff;
 		}
 	}
+
+	&:focus-visible {
+		border: 2px solid var(--accent);
+	}
 }
 
 .gqnyydlz {
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 08bd27fc0..f36af4a71 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -197,7 +197,7 @@
 			</div>
 		</article>
 	</div>
-	<div v-else class="muted" @click="muted.muted = false">
+	<button v-else class="muted _button" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
 			<template #name>
 				<MkA
@@ -212,7 +212,7 @@
 				<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
 			</template>
 		</I18n>
-	</div>
+	</button>
 </template>
 
 <script lang="ts" setup>
@@ -747,5 +747,6 @@ function readPromo() {
 	padding: 8px;
 	text-align: center;
 	opacity: 0.7;
+	width: 100%;
 }
 </style>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 115211ede..d6bf3b37b 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -3,7 +3,7 @@
 		v-size="{ max: [310, 500] }"
 		class="gafaadew"
 		:class="{ modal, _popup: modal }"
-		:aria-label="i18n.ts.blocks.post"
+		:aria-label="i18n.ts._pages.blocks.post"
 		@dragover.stop="onDragover"
 		@dragenter="onDragenter"
 		@dragleave="onDragleave"
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 67747e620..9d8676795 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -7,12 +7,17 @@
 		:style="{ background: bg }"
 		@click="onClick"
 	>
-		<i
-			@click="goBack()"
+		<button
 			v-if="props.displayBackButton"
+			class="_button button icon backButton"
+			@click.stop="goBack()"
+			@touchstart="preventDrag"
 			v-tooltip.noDelay="i18n.ts.goBack"
-			class="icon backButton ph-caret-left ph-bold ph-lg"
-		></i>
+		>
+			<i
+				class="ph-caret-left ph-bold ph-lg"
+			></i>
+		</button>
 		<div v-if="narrow" class="buttons left" @click="openAccountMenu">
 			<MkAvatar
 				v-if="props.displayMyAvatar && $i"
@@ -377,7 +382,7 @@ onUnmounted(() => {
 			display: none;
 		}
 
-		> .button {
+		> .button/*, @at-root .backButton*/ { /* I don't know how to get this to work */
 			display: flex;
 			align-items: center;
 			justify-content: center;
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 67e940fa1..1e9384bd1 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -296,7 +296,6 @@ definePageMetadata({
 		> .toggleWrapper {
 			display: inline-block;
 			text-align: left;
-			overflow: clip;
 			padding: 0 100px;
 			vertical-align: bottom;
 
@@ -304,6 +303,10 @@ definePageMetadata({
 				position: absolute;
 				left: -99em;
 			}
+
+			&:focus-within > .toggle {
+				outline: auto;
+			}
 		}
 
 		.toggle {
@@ -506,7 +509,6 @@ definePageMetadata({
 			}
 		}
 	}
-
 	> .sync {
 		padding: 14px 16px;
 		border-top: solid 0.5px var(--divider);