revert: fix(frontend): フォーカスの挙動を修正 (misskey-dev#14158)

kanarikanaru · Jul 12, 2024 · 5621400 · 5621400
1 parent 376fe1a
commit 5621400
Show file tree

Hide file tree

Showing 60 changed files with 436 additions and 986 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,8 +11,6 @@
 ### Client
 - Enhance: 内蔵APIドキュメントのデザイン・パフォーマンスを改善
 - Enhance: 非ログイン時のハイライトTLのデザインを改善
-- Enhance: フロントエンドのアクセシビリティ改善  
-  (Based on https://github.com/taiyme/misskey/pull/226)
 - Fix: `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正
 - Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968)
 - Fix: リバーシの対局を正しく共有できないことがある問題を修正

diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
@@ -153,7 +153,7 @@ onMounted(() => {
 		background: linear-gradient(0deg, #ffee20, #eb7018);
 	}
 
-	&::before {
+	&:before {
 		content: "";
 		display: block;
 		position: absolute;
@@ -173,7 +173,7 @@ onMounted(() => {
 		background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
 	}
 
-	&::before {
+	&:before {
 		content: "";
 		display: block;
 		position: absolute;

diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
@@ -250,6 +250,7 @@ function onMousedown(evt: MouseEvent): void {
 	}
 
 	&:focus-visible {
+		outline: solid 2px var(--focus);
 		outline-offset: 2px;
 	}
 

diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -87,7 +87,17 @@ async function onClick() {
 	}
 
 	&:focus-visible {
-		outline-offset: 2px;
+		&:after {
+			content: "";
+			pointer-events: none;
+			position: absolute;
+			top: -5px;
+			right: -5px;
+			bottom: -5px;
+			left: -5px;
+			border: 2px solid var(--focus);
+			border-radius: 32px;
+		}
 	}
 
 	&:hover {

diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div style="position: relative;">
-	<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" @click="updateLastReadedAt">
+	<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1" @click="updateLastReadedAt">
 		<div class="banner" :style="bannerStyle">
 			<div class="fade"></div>
 			<div class="name"><i class="ti ti-device-tv"></i> {{ channel.name }}</div>
@@ -80,30 +80,13 @@ const bannerStyle = computed(() => {
 <style lang="scss" scoped>
 .eftoefju {
 	display: block;
-	position: relative;
 	overflow: hidden;
 	width: 100%;
 
 	&:hover {
 		text-decoration: none;
 	}
 
-	&:focus-within {
-		outline: none;
-
-		&::after {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			border-radius: inherit;
-			pointer-events: none;
-			box-shadow: inset 0 0 0 2px var(--focus);
-		}
-	}
-
 	> .banner {
 		position: relative;
 		width: 100%;

diff --git a/packages/frontend/src/components/MkClipPreview.vue b/packages/frontend/src/components/MkClipPreview.vue
@@ -40,14 +40,6 @@ const remaining = computed(() => {
 .link {
 	display: block;
 
-	&:focus-visible {
-		outline: none;
-
-		.root {
-			box-shadow: inset 0 0 0 2px var(--focus);
-		}
-	}
-
 	&:hover {
 		text-decoration: none;
 		color: var(--accent);

diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:leaveToClass="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''"
 >
 	<div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
-		<MkMenu :items="items" :align="'left'" @close="emit('closed')"/>
+		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </Transition>
 </template>

diff --git a/packages/frontend/src/components/MkCwButton.vue b/packages/frontend/src/components/MkCwButton.vue
@@ -60,11 +60,11 @@ const toggle = () => {
 .label {
 	margin-left: 4px;
 
-	&::before {
+	&:before {
 		content: '(';
 	}
 
-	&::after {
+	&:after {
 		content: ')';
 	}
 }

diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" :preferType="'dialog'" :zPriority="'high'" @click="done(true)" @closed="emit('closed')" @esc="cancel()">
+<MkModal ref="modal" :preferType="'dialog'" :zPriority="'high'" @click="done(true)" @closed="emit('closed')">
 	<div :class="$style.root">
 		<div v-if="icon" :class="$style.icon">
 			<i :class="icon"></i>
@@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, computed } from 'vue';
+import { onBeforeUnmount, onMounted, ref, shallowRef, computed } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
@@ -156,13 +156,25 @@ function onBgClick() {
 	if (props.cancelableByBgClick) cancel();
 }
 */
+function onKeydown(evt: KeyboardEvent) {
+	if (evt.key === 'Escape') cancel();
+}
+
 function onInputKeydown(evt: KeyboardEvent) {
 	if (evt.key === 'Enter' && okButtonDisabledReason.value === null) {
 		evt.preventDefault();
 		evt.stopPropagation();
 		ok();
 	}
 }
+
+onMounted(() => {
+	document.addEventListener('keydown', onKeydown);
+});
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', onKeydown);
+});
 </script>
 
 <style lang="scss" module>

diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
@@ -115,14 +115,14 @@ function onDragend() {
 		background: rgba(#000, 0.05);
 
 		> .label {
-			&::before,
-			&::after {
+			&:before,
+			&:after {
 				background: #0b65a5;
 			}
 
 			&.red {
-				&::before,
-				&::after {
+				&:before,
+				&:after {
 					background: #c12113;
 				}
 			}
@@ -133,14 +133,14 @@ function onDragend() {
 		background: rgba(#000, 0.1);
 
 		> .label {
-			&::before,
-			&::after {
+			&:before,
+			&:after {
 				background: #0b588c;
 			}
 
 			&.red {
-				&::before,
-				&::after {
+				&:before,
+				&:after {
 					background: #ce2212;
 				}
 			}
@@ -159,8 +159,8 @@ function onDragend() {
 		}
 
 		> .label {
-			&::before,
-			&::after {
+			&:before,
+			&:after {
 				display: none;
 			}
 		}
@@ -181,32 +181,32 @@ function onDragend() {
 	left: 0;
 	pointer-events: none;
 
-	&::before,
-	&::after {
+	&:before,
+	&:after {
 		content: "";
 		display: block;
 		position: absolute;
 		z-index: 1;
 		background: #0c7ac9;
 	}
 
-	&::before {
+	&:before {
 		top: 0;
 		left: 57px;
 		width: 28px;
 		height: 8px;
 	}
 
-	&::after {
+	&:after {
 		top: 57px;
 		left: 0;
 		width: 8px;
 		height: 28px;
 	}
 
 	&.red {
-		&::before,
-		&::after {
+		&:before,
+		&:after {
 			background: #c12113;
 		}
 	}

diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
@@ -296,7 +296,7 @@ function onContextmenu(ev: MouseEvent) {
 	cursor: pointer;
 
 	&.draghover {
-		&::after {
+		&:after {
 			content: "";
 			pointer-events: none;
 			position: absolute;

diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -5,19 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer, asWindow }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
-	<input
-		ref="searchEl"
-		:value="q"
-		class="search"
-		data-prevent-emoji-insert
-		:class="{ filled: q != null && q != '' }"
-		:placeholder="i18n.ts.search"
-		type="search"
-		autocapitalize="off"
-		@input="input()"
-		@paste.stop="paste"
-		@keydown="onKeydown"
-	>
+	<input ref="searchEl" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" autocapitalize="off" @input="input()" @paste.stop="paste" @keydown.stop.prevent.enter="onEnter">
 	<!-- FirefoxのTabフォーカスが想定外の挙動となるためtabindex="-1"を追加 https://github.com/misskey-dev/misskey/issues/10744 -->
 	<div ref="emojisEl" class="emojis" tabindex="-1">
 		<section class="result">
@@ -151,7 +139,6 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'chosen', v: string): void;
-	(ev: 'esc'): void;
 }>();
 
 const searchEl = shallowRef<HTMLInputElement>();
@@ -446,18 +433,9 @@ function paste(event: ClipboardEvent): void {
 	}
 }
 
-function onKeydown(ev: KeyboardEvent) {
+function onEnter(ev: KeyboardEvent) {
 	if (ev.isComposing || ev.key === 'Process' || ev.keyCode === 229) return;
-	if (ev.key === 'Enter') {
-		ev.preventDefault();
-		ev.stopPropagation();
-		done();
-	}
-	if (ev.key === 'Escape') {
-		ev.preventDefault();
-		ev.stopPropagation();
-		emit('esc');
-	}
+	done();
 }
 
 function done(query?: string): boolean | void {
@@ -724,6 +702,11 @@ defineExpose({
 					border-radius: 4px;
 					font-size: 24px;
 
+					&:focus-visible {
+						outline: solid 2px var(--focus);
+						z-index: 1;
+					}
+
 					&:hover {
 						background: rgba(0, 0, 0, 0.05);
 					}

diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -13,7 +13,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:manualShowing="manualShowing"
 	:src="src"
 	@click="modal?.close()"
-	@esc="modal?.close()"
 	@opening="opening"
 	@close="emit('close')"
 	@closed="emit('closed')"
@@ -29,7 +28,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:asDrawer="type === 'drawer'"
 		:max-height="maxHeight"
 		@chosen="chosen"
-		@esc="modal?.close()"
 	/>
 </MkModal>
 </template>

diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkA :to="`/play/${flash.id}`" class="vhpxefrk _panel">
+<MkA :to="`/play/${flash.id}`" class="vhpxefrk _panel" tabindex="-1">
 	<article>
 		<header>
 			<h1 :title="flash.title">{{ flash.title }}</h1>
@@ -39,10 +39,6 @@ const props = defineProps<{
 		color: var(--accent);
 	}
 
-	&:focus-visible {
-		outline-offset: -2px;
-	}
-
 	> article {
 		padding: 16px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -250,6 +250,7 @@ function onMousedown(evt: MouseEvent): void { @@
     	}
     	&:focus-visible {
+    		outline: solid 2px var(--focus);
     		outline-offset: 2px;
     	}
@@ Expand Down @@