Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 42 commits into from
Jul 12, 2024
Merged
Changes from 1 commit
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
5372b25
fix(frontend): 直前のパターンを記録するように
kakkokari-gtyih Jul 9, 2024
d8cf64a
fix(frontend): フォーカス/タブ移動に関する挙動を調整 (#226)
kakkokari-gtyih Jul 9, 2024
aaf02d5
focusのデザイン修正
kakkokari-gtyih Jul 9, 2024
4340895
move scripts
kakkokari-gtyih Jul 9, 2024
b104485
Modalにfocus trapを追加
kakkokari-gtyih Jul 9, 2024
40a7509
記録するホットキーはレートリミット式にする
kakkokari-gtyih Jul 9, 2024
2a322ed
escキーのハンドリングをMkModalに統一
kakkokari-gtyih Jul 9, 2024
783509f
fix
kakkokari-gtyih Jul 9, 2024
7d56db2
enterで子メニューを開けるように
kakkokari-gtyih Jul 9, 2024
3dcf7da
lint
kakkokari-gtyih Jul 9, 2024
fe046ef
fix focus trap
kakkokari-gtyih Jul 9, 2024
93b2b98
improve switch accessibility
kakkokari-gtyih Jul 9, 2024
8f602b7
一部のmodalのフォーカストラップが外れない問題を修正
kakkokari-gtyih Jul 9, 2024
2a9b8dc
fix
kakkokari-gtyih Jul 9, 2024
33523d8
fix
kakkokari-gtyih Jul 9, 2024
bdac342
Revert "記録するホットキーはレートリミット式にする"
kakkokari-gtyih Jul 9, 2024
a9bb52e
Revert "fix(frontend): 直前のパターンを記録するように"
kakkokari-gtyih Jul 9, 2024
c24be37
Revert "Revert "fix(frontend): 直前のパターンを記録するように""
kakkokari-gtyih Jul 9, 2024
f85c709
Revert "Revert "記録するホットキーはレートリミット式にする""
kakkokari-gtyih Jul 9, 2024
7db27f7
試験的にCypressでのFocustrapを無効化
kakkokari-gtyih Jul 9, 2024
bf542b0
fix
kakkokari-gtyih Jul 9, 2024
4aa49b7
fix focus-trap
kakkokari-gtyih Jul 9, 2024
2f3f678
Update Changelog
kakkokari-gtyih Jul 9, 2024
d356ec8
Merge branch 'develop' into fix-14157
kakkokari-gtyih Jul 9, 2024
eaaee12
:v:
kakkokari-gtyih Jul 9, 2024
cf3e1a8
fix focustrap invocation logic
kakkokari-gtyih Jul 10, 2024
b4b09f7
スクロールがsticky headerを考慮するように
kakkokari-gtyih Jul 10, 2024
afc4f14
:art:
kakkokari-gtyih Jul 10, 2024
9293922
スタイルの微調整
kakkokari-gtyih Jul 10, 2024
2f1760c
:art:
kakkokari-gtyih Jul 10, 2024
a0d748f
remove deprecated key aliases
kakkokari-gtyih Jul 11, 2024
06b7f01
Merge branch 'develop' into fix-14157
kakkokari-gtyih Jul 11, 2024
7dc685b
focusElementが足りなかったので修正
kakkokari-gtyih Jul 11, 2024
7478b71
preview系にfocus時スタイルが足りなかったので修正
kakkokari-gtyih Jul 11, 2024
1f80c08
`returnFocusElement` -> `returnFocusTo`
kakkokari-gtyih Jul 11, 2024
54fd871
lint
kakkokari-gtyih Jul 11, 2024
565bcb5
Update packages/frontend/src/components/MkModalWindow.vue
syuilo Jul 11, 2024
69abbd6
Apply suggestions from code review
kakkokari-gtyih Jul 11, 2024
d278f30
keydownイベントをまとめる
kakkokari-gtyih Jul 11, 2024
4bc2b85
use correct pesudo-element selector
kakkokari-gtyih Jul 11, 2024
dd5da58
fix
kakkokari-gtyih Jul 11, 2024
e1838e6
rename
kakkokari-gtyih Jul 12, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
focusのデザイン修正
kakkokari-gtyih committed Jul 9, 2024
commit aaf02d575fa9327ed75de7e5ccb3be2fb434e9fa
6 changes: 3 additions & 3 deletions packages/frontend/src/components/MkSuperMenu.vue
Original file line number Diff line number Diff line change
@@ -10,15 +10,15 @@ SPDX-License-Identifier: AGPL-3.0-only

<div class="items">
<template v-for="(item, i) in group.items">
<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
<a v-if="item.type === 'a'" :href="item.href" :target="item.target" class="_button item" :class="{ danger: item.danger, active: item.active }">
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span>
</a>
<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
<button v-else-if="item.type === 'button'" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span>
</button>
<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
<MkA v-else :to="item.to" class="_button item" :class="{ danger: item.danger, active: item.active }">
<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
<span class="text">{{ item.text }}</span>
</MkA>
74 changes: 72 additions & 2 deletions packages/frontend/src/ui/_common_/navbar.vue
Original file line number Diff line number Diff line change
@@ -166,6 +166,15 @@ function more(ev: MouseEvent) {
display: block;
text-align: center;
width: 100%;

&:focus-visible {
outline: none;

> .instanceIcon {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
}
}

.instanceIcon {
@@ -207,6 +216,15 @@ function more(ev: MouseEvent) {
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}

&:focus-visible {
outline: none;

&:before {
kakkokari-gtyih marked this conversation as resolved.
Show resolved Hide resolved
outline: 2px solid var(--fgOnAccent);
outline-offset: -4px;
}
}

&:hover, &.active {
&:before {
background: var(--accentLighten);
@@ -234,6 +252,14 @@ function more(ev: MouseEvent) {
text-align: left;
box-sizing: border-box;
overflow: clip;

&:focus-visible {
outline: none;

> .avatar {
box-shadow: 0 0 0 4px var(--focus);
}
}
}

.avatar {
@@ -282,7 +308,16 @@ function more(ev: MouseEvent) {
color: var(--navActive);
}

&:hover, &.active {
&:focus-visible {
outline: none;

&:before {
kakkokari-gtyih marked this conversation as resolved.
Show resolved Hide resolved
outline: 2px solid var(--focus);
outline-offset: -2px;
}
}

&:hover, &.active, &:focus {
color: var(--accent);

&:before {
@@ -352,6 +387,15 @@ function more(ev: MouseEvent) {
display: block;
text-align: center;
width: 100%;

&:focus-visible {
outline: none;

> .instanceIcon {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
}
}

.instanceIcon {
@@ -391,6 +435,15 @@ function more(ev: MouseEvent) {
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}

&:focus-visible {
outline: none;

&:before {
kakkokari-gtyih marked this conversation as resolved.
Show resolved Hide resolved
outline: 2px solid var(--fgOnAccent);
outline-offset: -4px;
}
}

&:hover, &.active {
&:before {
background: var(--accentLighten);
@@ -413,6 +466,14 @@ function more(ev: MouseEvent) {
padding: 20px 0;
width: 100%;
overflow: clip;

&:focus-visible {
outline: none;

> .avatar {
box-shadow: 0 0 0 4px var(--focus);
}
}
}

.avatar {
@@ -442,7 +503,16 @@ function more(ev: MouseEvent) {
width: 100%;
text-align: center;

&:hover, &.active {
&:focus-visible {
outline: none;

&:before {
kakkokari-gtyih marked this conversation as resolved.
Show resolved Hide resolved
outline: 2px solid var(--focus);
outline-offset: -2px;
}
}

&:hover, &.active, &:focus {
text-decoration: none;
color: var(--accent);