Fix more unfocusable elements

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 {

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>

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"

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;

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