From de1c25f9db51db8c1b1ac35c2c125a2f9d196210 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 10 May 2023 15:15:27 -0400
Subject: [PATCH 1/3] Use tooltips as aria-labels

---
 packages/client/src/directives/tooltip.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
index 4b495cf66..9dabd0756 100644
--- a/packages/client/src/directives/tooltip.ts
+++ b/packages/client/src/directives/tooltip.ts
@@ -20,6 +20,12 @@ export default {
 		self.hideTimer = null;
 		self.checkTimer = null;
 
+		if (!binding.modifiers.noLabel) {
+			if (!document.body.contains(el)) return;
+			if (self.text == null) return;
+			el.setAttribute("aria-label", self.text);
+		}
+
 		self.close = () => {
 			if (self._close) {
 				window.clearInterval(self.checkTimer);

From 5e23d960abe8705f70cc969f5b96201e5f0006f6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 10 May 2023 16:20:52 -0400
Subject: [PATCH 2/3] some semantics

---
 packages/client/src/components/MkPostForm.vue          | 5 +++--
 packages/client/src/components/MkSuperMenu.vue         | 8 ++++----
 packages/client/src/components/global/MkPageHeader.vue | 8 ++++----
 packages/client/src/pages/settings/index.vue           | 4 ++--
 packages/client/src/ui/_common_/navbar.vue             | 8 ++++----
 packages/client/src/ui/universal.widgets.vue           | 4 ++--
 6 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 60d5dee2f..115211ede 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1,8 +1,9 @@
 <template>
-	<div
+	<section
 		v-size="{ max: [310, 500] }"
 		class="gafaadew"
 		:class="{ modal, _popup: modal }"
+		:aria-label="i18n.ts.blocks.post"
 		@dragover.stop="onDragover"
 		@dragenter="onDragenter"
 		@dragleave="onDragleave"
@@ -218,7 +219,7 @@
 				/>
 			</datalist>
 		</div>
-	</div>
+	</section>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index d66f838d1..2cfda6426 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="rrevdjwu" :class="{ grid }">
-		<div v-for="group in def" class="group">
+	<nav class="rrevdjwu" :class="{ grid }">
+		<section v-for="group in def" class="group">
 			<div v-if="group.title" class="title">{{ group.title }}</div>
 
 			<div class="items">
@@ -48,8 +48,8 @@
 					</MkA>
 				</template>
 			</div>
-		</div>
-	</div>
+		</section>
+	</nav>
 </template>
 
 <script lang="ts">
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index c78ef0c10..67747e620 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -1,5 +1,5 @@
 <template>
-	<div
+	<header
 		v-if="show"
 		ref="el"
 		class="fdidabkb"
@@ -63,7 +63,7 @@
 					</div>
 				</div>
 			</div>
-			<div ref="tabsEl" v-if="hasTabs" class="tabs">
+			<nav ref="tabsEl" v-if="hasTabs" class="tabs">
 				<button
 					v-for="tab in tabs"
 					:ref="(el) => (tabRefs[tab.key] = el)"
@@ -79,7 +79,7 @@
 					<span class="title">{{ tab.title }}</span>
 				</button>
 				<div ref="tabHighlightEl" class="highlight"></div>
-			</div>
+			</nav>
 		</template>
 		<div class="buttons right">
 			<template v-for="action in actions">
@@ -94,7 +94,7 @@
 				</button>
 			</template>
 		</div>
-	</div>
+	</header>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index a3c748271..0ff824bb4 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -26,14 +26,14 @@
 							></MkSuperMenu>
 						</div>
 					</div>
-					<div
+					<section
 						v-if="!(narrow && currentPage?.route.name == null)"
 						class="main"
 					>
 						<div class="bkzroven">
 							<RouterView />
 						</div>
-					</div>
+					</section>
 				</div>
 			</div>
 		</MkSpacer>
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 14e1f1cd1..4ff10845f 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="mvcprjjd" :class="{ iconOnly }">
+	<header class="mvcprjjd" :class="{ iconOnly }">
 		<div class="body">
 			<div class="top">
 				<div
@@ -22,7 +22,7 @@
 					/><!-- <MkAcct class="text" :user="$i"/> -->
 				</button>
 			</div>
-			<div class="middle">
+			<nav class="middle">
 				<MkA
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.timeline"
@@ -111,7 +111,7 @@
 					<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.settings }}</span>
 				</MkA>
-			</div>
+			</nav>
 			<div class="bottom">
 				<button
 					v-tooltip.noDelay.right="i18n.ts.note"
@@ -137,7 +137,7 @@
 			</button> -->
 			</div>
 		</div>
-	</div>
+	</header>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 8144d3aae..d86d41ed8 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="efzpzdvf">
+	<aside class="efzpzdvf" :aria-label="i18n.ts._deck._columns.widgets">
 		<MkAd class="a" :prefer="['widget']" />
 		<XWidgets
 			:edit="editMode"
@@ -26,7 +26,7 @@
 		>
 			<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
 		</button>
-	</div>
+	</aside>
 </template>
 
 <script lang="ts" setup>

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 3/3] 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);