add the focus trap thingies again

packages/client/src/components/MkEmojiPicker.vue

@@ -1,4 +1,5 @@
 <template>
+	<FocusTrap v-bind:active="isActive">
 		<div
 			class="omfetrab"
 			:class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]"
@@ -152,6 +153,7 @@
 				</button>
 			</div>
 		</div>
+	</FocusTrap>
 </template>
 
 <script lang="ts" setup>
@@ -171,6 +173,7 @@ import { deviceKind } from "@/scripts/device-kind";
 import { emojiCategories, instance } from "@/instance";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import { FocusTrap } from 'focus-trap-vue';
 
 const props = withDefaults(
 	defineProps<{

packages/client/src/components/MkMenu.vue

@@ -1,8 +1,8 @@
 <template>
-	<div>
+	<FocusTrap v-bind:active="isActive">
+	<div tabindex="-1" v-focus>
 			<div
 				ref="itemsEl"
-			v-hotkey="keymap"
 				class="rrevdjwt _popup _shadow"
 				:class="{ center: align === 'center', asDrawer }"
 				:style="{
@@ -18,7 +18,6 @@
 					</span>
 					<span
 						v-else-if="item.type === 'pending'"
-					:tabindex="i"
 						class="pending item"
 					>
 						<span><MkEllipsis /></span>
@@ -26,7 +25,6 @@
 					<MkA
 						v-else-if="item.type === 'link'"
 						:to="item.to"
-					:tabindex="i"
 						class="_button item"
 						@click.passive="close(true)"
 						@mouseenter.passive="onItemMouseEnter(item)"
@@ -59,7 +57,6 @@
 						:href="item.href"
 						:target="item.target"
 						:download="item.download"
-					:tabindex="i"
 						class="_button item"
 						@click="close(true)"
 						@mouseenter.passive="onItemMouseEnter(item)"
@@ -84,7 +81,6 @@
 					</a>
 					<button
 						v-else-if="item.type === 'user' && !items.hidden"
-					:tabindex="i"
 						class="_button item"
 						:class="{ active: item.active }"
 						:disabled="item.active"
@@ -101,7 +97,6 @@
 					</button>
 					<span
 						v-else-if="item.type === 'switch'"
-					:tabindex="i"
 						class="item"
 						@mouseenter.passive="onItemMouseEnter(item)"
 						@mouseleave.passive="onItemMouseLeave(item)"
@@ -116,7 +111,6 @@
 					</span>
 					<button
 						v-else-if="item.type === 'parent'"
-					:tabindex="i"
 						class="_button item parent"
 						:class="{ childShowing: childShowingItem === item }"
 						@mouseenter="showChildren(item, $event)"
@@ -140,7 +134,6 @@
 					</button>
 					<button
 						v-else-if="!item.hidden"
-					:tabindex="i"
 						class="_button item"
 						:class="{ danger: item.danger, active: item.active }"
 						:disabled="item.active"
@@ -186,6 +179,7 @@
 				/>
 			</div>
 		</div>
+	</FocusTrap>
 </template>
 
 <script lang="ts" setup>
@@ -229,12 +223,6 @@ let items2: InnerMenuItem[] = $ref([]);
 
 let child = $ref<InstanceType<typeof XChild>>();
 
-let keymap = computed(() => ({
-	"up|k|shift+tab": focusUp,
-	"down|j|tab": focusDown,
-	esc: close,
-}));
-
 let childShowingItem = $ref<MenuItem | null>();
 
 watch(

packages/client/src/components/MkModal.vue

@@ -35,6 +35,8 @@
 					: 'none',
 				'--transformOrigin': transformOrigin,
 			}"
+			tabindex="-1"
+			v-focus
 		>
 			<div
 				class="_modalBg data-cy-bg"
@@ -50,6 +52,7 @@
 				@mousedown="onBgClick"
 				@contextmenu.prevent.stop="() => {}"
 			></div>
+			<focus-trap v-model:active="isActive">
 				<div
 					ref="content"
 					:class="[
@@ -61,6 +64,7 @@
 				>
 					<slot :max-height="maxHeight" :type="type"></slot>
 				</div>
+			</focus-trap>
 		</div>
 	</Transition>
 </template>

packages/client/src/components/MkModalWindow.vue

@@ -3,8 +3,10 @@
 		ref="modal"
 		:prefer-type="'dialog'"
 		@click="onBgClick"
+		@keyup.esc="$emit('close')"
 		@closed="$emit('closed')"
 	>
+		<focus-trap v-model:active="isActive">
 			<div
 				ref="rootEl"
 				class="ebkgoccj"
@@ -51,6 +53,7 @@
 					<slot :width="bodyWidth" :height="bodyHeight"></slot>
 				</div>
 			</div>
+		</focus-trap>
 	</MkModal>
 </template>