From ef9707034e0770a3dae589cd03406e7bd77487c0 Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Sun, 28 Aug 2022 13:55:08 +0200
Subject: [PATCH 01/11] feat: add `UnstyledButton`

---
 src/components/base/UnstyledButton.vue | 50 ++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/components/base/UnstyledButton.vue

diff --git a/src/components/base/UnstyledButton.vue b/src/components/base/UnstyledButton.vue
new file mode 100644
index 00000000..c657435c
--- /dev/null
+++ b/src/components/base/UnstyledButton.vue
@@ -0,0 +1,50 @@
+<template>
+	<button class="unstyled">
+		<slot />
+	</button>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss">
+/* See https://github.com/necolas/normalize.css/blob/fc091cce1534909334c1911709a39c22d406977b/normalize.css#L155-L223 */
+button.unstyled {
+	/* Change the font styles in all browsers. */
+	font-family: inherit;
+	font-size: 100%;
+	line-height: 1.15;
+
+	/* Remove the margin in Firefox and Safari. */
+	margin: 0;
+
+	/* Show the overflow in IE. */
+	overflow: visible;
+
+	/* Remove the inheritance of text transform in Edge, Firefox, and IE. */
+	text-transform: none;
+
+	/* Correct the inability to style clickable types in iOS and Safari. */
+	-webkit-appearance: button;
+
+	/* Remove border */
+	border: none;
+
+	/* Show pointer on hover */
+	cursor: pointer;
+
+	/* Use same color and text-align as parent */
+	color: inherit;
+	text-align: inherit;
+}
+
+button.unstyled::-moz-focus-inner {
+	/* Remove the inner border and padding in Firefox. */
+	border-style: none;
+	padding: 0;
+}
+
+button.unstyled:-moz-focusring {
+	/* Restore the focus styles unset by the previous rule. */
+	outline: 1px dotted ButtonText;
+}
+</style>

From b559d2a1e9f0a86319f2edab2370aea75d696b26 Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Sun, 28 Aug 2022 14:13:47 +0200
Subject: [PATCH 02/11] fix: mark user tag as disabled if not clickable

---
 src/components/utility/UserTag.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/utility/UserTag.vue b/src/components/utility/UserTag.vue
index 7304fb67..5c2cfeb8 100644
--- a/src/components/utility/UserTag.vue
+++ b/src/components/utility/UserTag.vue
@@ -8,6 +8,7 @@
 		class="user-tag unstyled-link"
 		:clickable="clickable"
 		:href="clickable && user?.id ? `/users/${user?.id}` : undefined"
+		:aria-disabled="!clickable"
 		@click.right="toggleCard"
 		@click="toggleCard"
 	>

From 26a2d8161e6651f9a47630497a8d5cc8646ef81b Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Sun, 28 Aug 2022 14:15:42 +0200
Subject: [PATCH 03/11] fix: mark modal as dialog and modal

---
 src/components/modal/ModalViewport.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/modal/ModalViewport.vue b/src/components/modal/ModalViewport.vue
index ec0a3012..b34e3a6b 100644
--- a/src/components/modal/ModalViewport.vue
+++ b/src/components/modal/ModalViewport.vue
@@ -5,6 +5,9 @@
 			:key="k"
 			:animate="{ scale: [0, 0.5, 1], transition: { duration: 0.15 } }"
 			class="modal-state"
+			role="dialog"
+			aria-modal="true"
+			:aria-labelledby="(m.name ?? 'dialog') + '-title'"
 			:modal-name="k"
 		>
 			<Transition appear name="zoom">

From 6ac71b3fdd45cca3223af72ce51008e5cd0c027c Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Sun, 28 Aug 2022 14:16:40 +0200
Subject: [PATCH 04/11] fix: use button as close-element

---
 src/components/modal/ModalBase.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/ModalBase.vue b/src/components/modal/ModalBase.vue
index 0b8cb73c..b85ee753 100644
--- a/src/components/modal/ModalBase.vue
+++ b/src/components/modal/ModalBase.vue
@@ -4,9 +4,9 @@
 			<div class="modal-heading">
 				<div />
 				<slot name="heading" />
-				<div class="modal-close" @click="close()">
+				<UnstyledButton class="modal-close" @click="close()">
 					<Icon icon="close" />
-				</div>
+				</UnstyledButton>
 			</div>
 
 			<div class="modal-content">
@@ -24,6 +24,7 @@
 import { onMounted, ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { ModalEvent, useModal } from "@store/modal";
+import UnstyledButton from "@base/UnstyledButton.vue";
 import Icon from "../utility/Icon.vue";
 
 const props = withDefaults(

From fdd812e025a46d7c013df1b4c16f68f4557fcc1b Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Sun, 28 Aug 2022 14:17:57 +0200
Subject: [PATCH 05/11] fix(select-emote-set): use buttons where possible

---
 .../modal/SelectEmoteSet/SelectEmoteSet.vue   | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
index 2c71b5d8..cf3df5ee 100644
--- a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
+++ b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
@@ -9,11 +9,12 @@
 				<div class="available-sets">
 					<div v-for="set of editableEmoteSets.values()" :key="set.id" class="card">
 						<!-- Set Details (name, owner) -->
-						<div
+						<UnstyledButton
 							v-wave="{ duration: 0.3 }"
 							:selected="selection.has(set.id)"
 							:error="notes.get(set.id)"
 							selector="card-details"
+							:title="t('emote.use')"
 							@contextmenu="defaultEmoteSetID = set.id"
 							@click="toggleSet(set.id, true)"
 						>
@@ -63,30 +64,35 @@
 								/>
 								<Radio v-else-if="isAssignMode" v-model="defaultEmoteSetID" :item-i-d="set.id" />
 							</div>
-						</div>
+						</UnstyledButton>
 
 						<!-- Rename emote Button -->
-						<div
+						<UnstyledButton
 							selector="card-actions"
+							:title="t('emote_set.modal.context_rename')"
 							@click="(ev) => [(contextMenu.mode = 'rename'), (contextMenu.set = set)]"
 						>
 							<Icon size="xl" icon="pen-field" />
-						</div>
+						</UnstyledButton>
 
 						<!-- Context Menu Button -->
-						<div selector="card-actions" @click="(ev) => openContext(ev, set)">
+						<UnstyledButton
+							:title="t('common.more')"
+							selector="card-actions"
+							@click="(ev) => openContext(ev, set)"
+						>
 							<Icon size="xl" icon="chevron-down" />
-						</div>
+						</UnstyledButton>
 					</div>
 
 					<!-- Create Set Card -->
-					<div class="card" @click="createSet">
-						<div selector="card-details">
+					<div class="card">
+						<UnstyledButton selector="card-details" @click="createSet">
 							<span selector="set-name">
 								<Icon size="lg" icon="hexagon-plus" :style="{ marginRight: '0.5em' }" />
 								<span> {{ t("emote_set.create") }} </span>
 							</span>
-						</div>
+						</UnstyledButton>
 					</div>
 				</div>
 			</div>
@@ -128,6 +134,7 @@ import ModalCreateEmoteSet from "@components/modal/ModalCreateEmoteSet.vue";
 import SelectEmoteSetContext from "./SelectEmoteSetContext.vue";
 import Icon from "@/components/utility/Icon.vue";
 import Radio from "@/components/form/Radio.vue";
+import UnstyledButton from "@base/UnstyledButton.vue";
 
 const { t } = useI18n();
 
@@ -345,12 +352,11 @@ const onRename = (set: EmoteSet | null) => {
 
 		> .card {
 			display: flex;
-			cursor: pointer;
 			margin-top: 0.25em;
 			margin-bottom: 0.25em;
 
 			@include themify() {
-				> div[selector="card-details"] {
+				> button[selector="card-details"] {
 					background-color: darken(themed("backgroundColor"), 4);
 
 					&[selected="true"] {
@@ -381,7 +387,7 @@ const onRename = (set: EmoteSet | null) => {
 						}
 					}
 				}
-				> div[selector="card-actions"] {
+				> button[selector="card-actions"] {
 					display: flex;
 					align-items: center;
 					justify-content: center;

From af11f1d3af478aca6f86a8b687e8d3f97dc833e2 Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Sun, 28 Aug 2022 14:19:14 +0200
Subject: [PATCH 06/11] fix(select-emote-set): connect heading

---
 src/components/modal/SelectEmoteSet/SelectEmoteSet.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
index cf3df5ee..fd14022a 100644
--- a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
+++ b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
@@ -1,7 +1,7 @@
 <template>
 	<ModalBase width="32em" @close="shouldClose">
 		<template #heading>
-			<h3>{{ t("emote_set.select") }}</h3>
+			<h3 id="emote-set-select-at-card-title">{{ t("emote_set.select") }}</h3>
 		</template>
 
 		<template #content>

From cbf7f151747cb46afdd48c9dbb505a31317fc3ee Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Mon, 5 Sep 2022 18:21:51 +0200
Subject: [PATCH 07/11] feat: use focus-trap in dialogs

---
 package.json                       |  4 ++-
 src/components/modal/ModalBase.vue |  1 +
 yarn.lock                          | 49 +++++++++++++++++++++---------
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 10d66a59..ca3fae84 100644
--- a/package.json
+++ b/package.json
@@ -26,12 +26,14 @@
 		"@vue/apollo-composable": "^4.0.0-alpha.18",
 		"@vuelidate/core": "^2.0.0-alpha.44",
 		"@vuelidate/validators": "^2.0.0-alpha.31",
-		"@vueuse/core": "^9.1.1",
+		"@vueuse/core": "^9.2.0",
 		"@vueuse/head": "^0.7.9",
+		"@vueuse/integrations": "^9.2.0",
 		"apollo-link-context": "^1.0.20",
 		"crypto-hash": "^2.0.1",
 		"date-fns": "^2.29.1",
 		"dompurify": "^2.3.12",
+		"focus-trap": "^7.0.0",
 		"graphql": "^16.5.0",
 		"marked": "^4.0.19",
 		"no-darkreader": "^1.0.3",
diff --git a/src/components/modal/ModalBase.vue b/src/components/modal/ModalBase.vue
index b85ee753..4cc1f47d 100644
--- a/src/components/modal/ModalBase.vue
+++ b/src/components/modal/ModalBase.vue
@@ -26,6 +26,7 @@ import { onClickOutside } from "@vueuse/core";
 import { ModalEvent, useModal } from "@store/modal";
 import UnstyledButton from "@base/UnstyledButton.vue";
 import Icon from "../utility/Icon.vue";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/yarn.lock b/yarn.lock
index 821f290c..798636b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -651,14 +651,14 @@
   dependencies:
     vue-demi "^0.13.4"
 
-"@vueuse/core@^9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.1.1.tgz#a5c09c33ccee58cfd53bc3ec2d5a0d304155529e"
-  integrity sha512-QfuaNWRDMQcCUwXylCyYhPC3ScS9Tiiz4J0chdwr3vOemBwRToSywq8MP+ZegKYFnbETzRY8G/5zC+ca30wrRQ==
+"@vueuse/core@9.2.0", "@vueuse/core@^9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.2.0.tgz#58e3588b9bc5a69010aa9104b00056ee9ebff738"
+  integrity sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==
   dependencies:
     "@types/web-bluetooth" "^0.0.15"
-    "@vueuse/metadata" "9.1.1"
-    "@vueuse/shared" "9.1.1"
+    "@vueuse/metadata" "9.2.0"
+    "@vueuse/shared" "9.2.0"
     vue-demi "*"
 
 "@vueuse/head@^0.7.9":
@@ -666,15 +666,24 @@
   resolved "https://registry.yarnpkg.com/@vueuse/head/-/head-0.7.9.tgz#888ab87667ab6dbe6edba10d176fa91c1b0ec021"
   integrity sha512-5wnRiH2XIUSLLXJDLDDTcpvAg5QXgTIVZl46AU7to/T91KHsdBLHSE4WhRO7kP0jbkAhlxnx64E29cQtwBrMjg==
 
-"@vueuse/metadata@9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.1.1.tgz#b3fe4b97e62096f7566cd8eb107c503998b2c9a6"
-  integrity sha512-XZ2KtSW+85LLHB/IdGILPAtbIVHasPsAW7aqz3BRMzJdAQWRiM/FGa1OKBwLbXtUw/AmjKYFlZJo7eOFIBXRog==
+"@vueuse/integrations@^9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-9.2.0.tgz#fdc53f120ff124e173a9400e634cf5095646eba4"
+  integrity sha512-0NerkCPUUWnbEb0ZZaJyrO8YKPPClR9+aLLF8yBbG/XRsoEo7pcpVq8d+uMhfHrXABoUpKD+9FZ+Tz/aRb7yFg==
+  dependencies:
+    "@vueuse/core" "9.2.0"
+    "@vueuse/shared" "9.2.0"
+    vue-demi "*"
 
-"@vueuse/shared@9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.1.1.tgz#811f47629e281a19013ae6dcdf11ed3e1e91e023"
-  integrity sha512-c+IfcOYmHiHqoEa3ED1Tbpue5GHmoUmTp8PtO4YbczthtY155Rt6DmWhjxMLXBF1Bcidagxljmp/7xtAzEHXLw==
+"@vueuse/metadata@9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.2.0.tgz#6bf7c9c44b9f5ece405837226a0e04a997994458"
+  integrity sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw==
+
+"@vueuse/shared@9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.2.0.tgz#7831051b2c1d01c3413c749468ee53a86024510e"
+  integrity sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==
   dependencies:
     vue-demi "*"
 
@@ -1558,6 +1567,13 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+focus-trap@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.0.0.tgz#4e2cd9aab5b673e2cbad945c52bd232f6160c2cb"
+  integrity sha512-uT4Bl8TwU+5vVAx/DHil/1eVS54k9unqhK/vGy2KSh7esPmqgC0koAB9J2sJ+vtj8+vmiFyGk2unLkhNLQaxoA==
+  dependencies:
+    tabbable "^6.0.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2939,6 +2955,11 @@ symbol-observable@^4.0.0:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
   integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
 
+tabbable@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.0.0.tgz#7f95ea69134e9335979092ba63866fe67b521b01"
+  integrity sha512-SxhZErfHc3Yozz/HLAl/iPOxuIj8AtUw13NRewVOjFW7vbsqT1f3PuiHrPQbUkRcLNEgAedAv2DnjLtzynJXiw==
+
 table@^6.8.0:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"

From f5308a7e94cf76f36a24cf2422b7ebfa14c8cfc7 Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Mon, 5 Sep 2022 18:24:33 +0200
Subject: [PATCH 08/11] feat: allow `Checkbox` and `Radio` to be skipped

---
 src/components/form/Checkbox.vue | 3 ++-
 src/components/form/Radio.vue    | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/form/Checkbox.vue b/src/components/form/Checkbox.vue
index 18d28a06..3fa19178 100644
--- a/src/components/form/Checkbox.vue
+++ b/src/components/form/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
 	<label ref="checkbox" class="checkbox" :class="{ disabled }">
-		<input type="checkbox" :checked="checked" @change="onInput" />
+		<input type="checkbox" :checked="checked" :tabindex="skipTab ? -1 : null" @change="onInput" />
 		<span class="checkmark">
 			<Icon class="check-icon" icon="check" />
 		</span>
@@ -16,6 +16,7 @@ const props = defineProps({
 	label: String,
 	checked: Boolean,
 	disabled: Boolean,
+	skipTab: Boolean,
 	scale: {
 		type: String,
 		default: "1.25em",
diff --git a/src/components/form/Radio.vue b/src/components/form/Radio.vue
index 201eb1e0..66ea1018 100644
--- a/src/components/form/Radio.vue
+++ b/src/components/form/Radio.vue
@@ -1,6 +1,12 @@
 <template>
 	<label ref="radio" class="radio">
-		<input type="radio" :checked="itemID == modelValue" :value="itemID" @change="onInput" />
+		<input
+			type="radio"
+			:checked="itemID == modelValue"
+			:value="itemID"
+			:tabindex="skipTab ? -1 : null"
+			@change="onInput"
+		/>
 		<div class="circle"></div>
 		<span>{{ label }}</span>
 	</label>
@@ -16,6 +22,7 @@ const props = defineProps({
 		required: true,
 	},
 	modelValue: String,
+	skipTab: Boolean,
 	scale: {
 		type: String,
 		default: "1.25em",

From 7f999360432c1b9fac3e904fae75bf00fcdb3d9c Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Mon, 5 Sep 2022 18:25:44 +0200
Subject: [PATCH 09/11] fix: skip `card-check` when tabbing

---
 src/components/modal/SelectEmoteSet/SelectEmoteSet.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
index fd14022a..443b8d30 100644
--- a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
+++ b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
@@ -61,8 +61,14 @@
 								<Checkbox
 									v-if="!isAssignMode && emote && (selection.has(set.id) || !notes.get(set.id))"
 									:checked="selection.has(set.id)"
+									skip-tab
+								/>
+								<Radio
+									v-else-if="isAssignMode"
+									v-model="defaultEmoteSetID"
+									:item-i-d="set.id"
+									skip-tab
 								/>
-								<Radio v-else-if="isAssignMode" v-model="defaultEmoteSetID" :item-i-d="set.id" />
 							</div>
 						</UnstyledButton>
 

From a90fb5facd8200c198fd02a9c5267a2397785f6b Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Mon, 5 Sep 2022 18:39:31 +0200
Subject: [PATCH 10/11] fix: add focus-visible rule to close button

---
 src/components/modal/ModalBase.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/modal/ModalBase.vue b/src/components/modal/ModalBase.vue
index 4cc1f47d..b2858735 100644
--- a/src/components/modal/ModalBase.vue
+++ b/src/components/modal/ModalBase.vue
@@ -144,6 +144,10 @@ const close = () => {
 				}
 				@include themify() {
 					background-color: themed("warning");
+
+					&:focus-visible {
+						background-color: darken(themed("warning"), 14);
+					}
 				}
 			}
 		}

From d477b3d5a14923fcac7346c15f088f3986ca6ecb Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Mon, 5 Sep 2022 18:40:35 +0200
Subject: [PATCH 11/11] fix: add focus-visible rule to buttons

---
 .../modal/SelectEmoteSet/SelectEmoteSet.vue          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
index 443b8d30..82777be6 100644
--- a/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
+++ b/src/components/modal/SelectEmoteSet/SelectEmoteSet.vue
@@ -364,6 +364,8 @@ const onRename = (set: EmoteSet | null) => {
 			@include themify() {
 				> button[selector="card-details"] {
 					background-color: darken(themed("backgroundColor"), 4);
+					transition: outline-color 100ms;
+					outline-color: transparent;
 
 					&[selected="true"] {
 						background-color: mix(themed("backgroundColor"), themed("primary"), 85%);
@@ -375,6 +377,10 @@ const onRename = (set: EmoteSet | null) => {
 						background-color: darken(themed("backgroundColor"), 8);
 					}
 
+					&:focus-visible {
+						outline: themed("primary") 2px solid;
+					}
+
 					> div > div[selector="set-name"] > div[selector="label-list"] {
 						> span[label] {
 							background-color: themed("backgroundColor");
@@ -398,6 +404,12 @@ const onRename = (set: EmoteSet | null) => {
 					align-items: center;
 					justify-content: center;
 					background-color: darken(themed("backgroundColor"), 4);
+					transition: outline-color 100ms;
+					outline-color: transparent;
+
+					&:focus-visible {
+						outline: themed("primary") 2px solid;
+					}
 				}
 			}