From b8517719af16078bc5003718d3d2a832cdb2b935 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Wed, 8 Feb 2023 19:53:38 -0500
Subject: [PATCH] Use v-bind instead for focus, change tabindex's

---
 packages/client/src/components/MkMenu.vue  | 16 ++++++++--------
 packages/client/src/components/MkModal.vue |  6 +++---
 packages/client/src/directives/focus.ts    |  3 +++
 packages/client/src/directives/index.ts    |  2 ++
 4 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 packages/client/src/directives/focus.ts

diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index c9f8dbfd6..dd9939dcf 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div tabindex="-1" v-focus>
 	<div
 		ref="itemsEl" v-hotkey="keymap"
 		class="rrevdjwt _popup _shadow"
@@ -12,33 +12,33 @@
 			<span v-else-if="item.type === 'label'" class="label item">
 				<span>{{ item.text }}</span>
 			</span>
-			<span v-else-if="item.type === 'pending'" :tabindex="0" class="pending item">
+			<span v-else-if="item.type === 'pending'" :tabindex="-1" class="pending item">
 				<span><MkEllipsis/></span>
 			</span>
-			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="0" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="-1" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
 				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 				<span>{{ item.text }}</span>
 				<span v-if="item.indicate" class="indicator"><i class="ph-circle-fill"></i></span>
 			</MkA>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="0" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="-1" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
 				<span>{{ item.text }}</span>
 				<span v-if="item.indicate" class="indicator"><i class="ph-circle-fill"></i></span>
 			</a>
-			<button v-else-if="item.type === 'user'" :tabindex="0" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<button v-else-if="item.type === 'user'" :tabindex="-1" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
 				<span v-if="item.indicate" class="indicator"><i class="ph-circle-fill"></i></span>
 			</button>
-			<span v-else-if="item.type === 'switch'" :tabindex="0" class="item" @click.passive="onItemMouseEnter(item)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<span v-else-if="item.type === 'switch'" :tabindex="-1" class="item" @click.passive="onItemMouseEnter(item)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
 			</span>
-			<button v-else-if="item.type === 'parent'" :tabindex="0" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)" @click="showChildren(item, $event)">
+			<button v-else-if="item.type === 'parent'" :tabindex="-1" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)" @click="showChildren(item, $event)">
 				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
 				<span>{{ item.text }}</span>
 				<span class="caret"><i class="ph-caret-right-bold ph-lg ph-fw ph-lg"></i></span>
 			</button>
-			<button v-else :tabindex="0" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<button v-else :tabindex="-1" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
 				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 				<span>{{ item.text }}</span>
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 62f67a380..6a0744487 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -2,7 +2,7 @@
 <transition :name="$store.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? 200 : 0" appear @after-leave="emit('closed')" @enter="emit('opening')" @keyup.esc="emit('click')" @after-enter="onOpened">
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ drawer: type === 'drawer', dialog: type === 'dialog' || type === 'dialog:top', popup: type === 'popup' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<div class="bg _modalBg" :class="{ transparent: transparentBg && (type === 'popup') }" :style="{ zIndex }" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
-		<div ref="content" class="content" :class="{ fixed, top: type === 'dialog:top' }" :style="{ zIndex }" @click.self="onBgClick" tabindex="-1">
+		<div ref="content" class="content" :class="{ fixed, top: type === 'dialog:top' }" :style="{ zIndex }" @click.self="onBgClick" tabindex="-1" v-focus>
 			<slot :max-height="maxHeight" :type="type"></slot>
 		</div>
 	</div>
@@ -214,7 +214,7 @@ const align = () => {
 const onOpened = () => {
 	emit('opened');
 
-	content?.focus()
+	// content?.focus()
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
 	el.addEventListener('mousedown', ev => {
@@ -330,7 +330,7 @@ defineExpose({
 
 .qzhlnise {
 	> .content {
-		border-radius: 16px;
+		border-radius: var(--radius);
 	}
 	> .bg {
 		&.transparent {
diff --git a/packages/client/src/directives/focus.ts b/packages/client/src/directives/focus.ts
new file mode 100644
index 000000000..4d34fbf1f
--- /dev/null
+++ b/packages/client/src/directives/focus.ts
@@ -0,0 +1,3 @@
+export default {
+	mounted: (el) => el.focus()
+}
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index 0a5c32326..77639e2f3 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -11,6 +11,7 @@ import anim from "./anim";
 import clickAnime from "./click-anime";
 import panel from "./panel";
 import adaptiveBorder from "./adaptive-border";
+import focus from "./focus";
 
 export default function (app: App) {
 	app.directive("userPreview", userPreview);
@@ -25,4 +26,5 @@ export default function (app: App) {
 	app.directive("click-anime", clickAnime);
 	app.directive("panel", panel);
 	app.directive("adaptive-border", adaptiveBorder);
+	app.directive("focus", focus);
 }