From 9849aab40283cbde2184e74d4795aec8ef8ccba3 Mon Sep 17 00:00:00 2001
From: zyoshoka <107108195+zyoshoka@users.noreply.github.com>
Date: Sat, 8 Jun 2024 18:00:54 +0900
Subject: test(#10336): add `components/MkC.*` stories (#13830)
* test(storybook): add `components/MkC.*` stories
* test(storybook): add some tests
* test: add sleep
* test: comment-out flaky test
* test(storybook): add test for `MkChannelFollowButton`
* chore(storybook): tweak sleep duration in `MkChannelFollowButton` story test
* fix(chromatic): add delay to `MkChannelList`
* chore: replace `mswDecorator` with `mswLoader`
* fix(storybook): tweak some parameters
* chore: serve static files
* fix(chromatic): add delay to `MkCwButton`
* chore: delete logging for debug
* fix: add right click in `MkContextMenu` play
* refactor: remove unused imports
---
packages/frontend/src/components/MkChannelFollowButton.vue | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
(limited to 'packages/frontend/src/components/MkChannelFollowButton.vue')
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
index 6b1b380e41..841d37a568 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.vue
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -26,17 +26,18 @@ SPDX-License-Identifier: AGPL-3.0-only
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index e73d032000..e2f04eb764 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -286,6 +286,7 @@ definePageMetadata(() => ({
background-color: var(--accentedBg);
color: var(--accent);
text-decoration: none;
+ outline: none;
}
}
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 60bf9b4d3d..a328933686 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -342,6 +342,7 @@ definePageMetadata(() => ({
&:hover, &:focus {
opacity: .7;
}
+
&:active {
cursor: pointer;
}
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 0a4bd4b826..7d192bcbea 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -213,12 +213,18 @@ definePageMetadata(() => ({
}
}
+ .dn:focus-visible ~ .toggle {
+ outline: 2px solid var(--focus);
+ outline-offset: 2px;
+ }
+
.toggle {
cursor: pointer;
display: inline-block;
position: relative;
width: 90px;
height: 50px;
+ margin: 4px; // focus用のアウトライン
background-color: #83D8FF;
border-radius: 90px - 6;
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
diff --git a/packages/frontend/src/scripts/focus-trap.ts b/packages/frontend/src/scripts/focus-trap.ts
new file mode 100644
index 0000000000..734c73652f
--- /dev/null
+++ b/packages/frontend/src/scripts/focus-trap.ts
@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { getHTMLElementOrNull } from '@/scripts/get-dom-node-or-null.js';
+
+const focusTrapElements = new Set();
+const ignoreElements = [
+ 'script',
+ 'style',
+];
+
+function containsFocusTrappedElements(el: HTMLElement): boolean {
+ return Array.from(focusTrapElements).some((focusTrapElement) => {
+ return el.contains(focusTrapElement);
+ });
+}
+
+function releaseFocusTrap(el: HTMLElement): void {
+ focusTrapElements.delete(el);
+ if (el.parentElement != null && el !== document.body) {
+ el.parentElement.childNodes.forEach((siblingNode) => {
+ const siblingEl = getHTMLElementOrNull(siblingNode);
+ if (!siblingEl) return;
+ if (siblingEl !== el && (focusTrapElements.has(siblingEl) || containsFocusTrappedElements(siblingEl) || focusTrapElements.size === 0)) {
+ siblingEl.inert = false;
+ } else if (
+ focusTrapElements.size > 0 &&
+ !containsFocusTrappedElements(siblingEl) &&
+ !focusTrapElements.has(siblingEl) &&
+ !ignoreElements.includes(siblingEl.tagName.toLowerCase())
+ ) {
+ siblingEl.inert = true;
+ } else {
+ siblingEl.inert = false;
+ }
+ });
+ releaseFocusTrap(el.parentElement);
+ }
+}
+
+export function focusTrap(el: HTMLElement, parent: true): void;
+export function focusTrap(el: HTMLElement, parent?: false): { release: () => void; };
+export function focusTrap(el: HTMLElement, parent = false): { release: () => void; } | void {
+ if (el.parentElement != null && el !== document.body) {
+ el.parentElement.childNodes.forEach((siblingNode) => {
+ const siblingEl = getHTMLElementOrNull(siblingNode);
+ if (!siblingEl) return;
+ if (siblingEl !== el && !ignoreElements.includes(siblingEl.tagName.toLowerCase())) {
+ siblingEl.inert = true;
+ }
+ });
+ focusTrap(el.parentElement, true);
+ }
+
+ if (!parent) {
+ focusTrapElements.add(el);
+
+ return {
+ release: () => {
+ releaseFocusTrap(el);
+ },
+ };
+ }
+}
diff --git a/packages/frontend/src/scripts/focus.ts b/packages/frontend/src/scripts/focus.ts
index ea6ee61c88..eb2da5ad86 100644
--- a/packages/frontend/src/scripts/focus.ts
+++ b/packages/frontend/src/scripts/focus.ts
@@ -3,30 +3,78 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
-export function focusPrev(el: Element | null, self = false, scroll = true) {
- if (el == null) return;
- if (!self) el = el.previousElementSibling;
- if (el) {
- if (el.hasAttribute('tabindex')) {
- (el as HTMLElement).focus({
- preventScroll: !scroll,
- });
- } else {
- focusPrev(el.previousElementSibling, true);
- }
+import { getScrollPosition, getScrollContainer, getStickyBottom, getStickyTop } from '@/scripts/scroll.js';
+import { getElementOrNull, getNodeOrNull } from '@/scripts/get-dom-node-or-null.js';
+
+type MaybeHTMLElement = EventTarget | Node | Element | HTMLElement;
+
+export const isFocusable = (input: MaybeHTMLElement | null | undefined): input is HTMLElement => {
+ if (input == null || !(input instanceof HTMLElement)) return false;
+
+ if (input.tabIndex < 0) return false;
+ if ('disabled' in input && input.disabled === true) return false;
+ if ('readonly' in input && input.readonly === true) return false;
+
+ if (!input.ownerDocument.contains(input)) return false;
+
+ const style = window.getComputedStyle(input);
+ if (style.display === 'none') return false;
+ if (style.visibility === 'hidden') return false;
+ if (style.opacity === '0') return false;
+ if (style.pointerEvents === 'none') return false;
+
+ return true;
+};
+
+export const focusPrev = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => {
+ const element = self ? input : getElementOrNull(input)?.previousElementSibling;
+ if (element == null) return;
+ if (isFocusable(element)) {
+ focusOrScroll(element, scroll);
+ } else {
+ focusPrev(element, false, scroll);
}
-}
-
-export function focusNext(el: Element | null, self = false, scroll = true) {
- if (el == null) return;
- if (!self) el = el.nextElementSibling;
- if (el) {
- if (el.hasAttribute('tabindex')) {
- (el as HTMLElement).focus({
- preventScroll: !scroll,
- });
- } else {
- focusPrev(el.nextElementSibling, true);
+};
+
+export const focusNext = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => {
+ const element = self ? input : getElementOrNull(input)?.nextElementSibling;
+ if (element == null) return;
+ if (isFocusable(element)) {
+ focusOrScroll(element, scroll);
+ } else {
+ focusNext(element, false, scroll);
+ }
+};
+
+export const focusParent = (input: MaybeHTMLElement | null | undefined, self = false, scroll = true) => {
+ const element = self ? input : getNodeOrNull(input)?.parentElement;
+ if (element == null) return;
+ if (isFocusable(element)) {
+ focusOrScroll(element, scroll);
+ } else {
+ focusParent(element, false, scroll);
+ }
+};
+
+const focusOrScroll = (element: HTMLElement, scroll: boolean) => {
+ if (scroll) {
+ const scrollContainer = getScrollContainer(element) ?? document.documentElement;
+ const scrollContainerTop = getScrollPosition(scrollContainer);
+ const stickyTop = getStickyTop(element, scrollContainer);
+ const stickyBottom = getStickyBottom(element, scrollContainer);
+ const top = element.getBoundingClientRect().top;
+ const bottom = element.getBoundingClientRect().bottom;
+
+ let scrollTo = scrollContainerTop;
+ if (top < stickyTop) {
+ scrollTo += top - stickyTop;
+ } else if (bottom > window.innerHeight - stickyBottom) {
+ scrollTo += bottom - window.innerHeight + stickyBottom;
}
+ scrollContainer.scrollTo({ top: scrollTo, behavior: 'instant' });
+ }
+
+ if (document.activeElement !== element) {
+ element.focus({ preventScroll: true });
}
-}
+};
diff --git a/packages/frontend/src/scripts/get-dom-node-or-null.ts b/packages/frontend/src/scripts/get-dom-node-or-null.ts
new file mode 100644
index 0000000000..fbf54675fd
--- /dev/null
+++ b/packages/frontend/src/scripts/get-dom-node-or-null.ts
@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export const getNodeOrNull = (input: unknown): Node | null => {
+ if (input instanceof Node) return input;
+ return null;
+};
+
+export const getElementOrNull = (input: unknown): Element | null => {
+ if (input instanceof Element) return input;
+ return null;
+};
+
+export const getHTMLElementOrNull = (input: unknown): HTMLElement | null => {
+ if (input instanceof HTMLElement) return input;
+ return null;
+};
diff --git a/packages/frontend/src/scripts/hotkey.ts b/packages/frontend/src/scripts/hotkey.ts
index fd79baa604..ff3cbe98ac 100644
--- a/packages/frontend/src/scripts/hotkey.ts
+++ b/packages/frontend/src/scripts/hotkey.ts
@@ -2,6 +2,7 @@
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
+import { getHTMLElementOrNull } from "@/scripts/get-dom-node-or-null.js";
//#region types
export type Keymap = Record;
@@ -30,8 +31,8 @@ type Action = {
//#region consts
const KEY_ALIASES = {
'esc': 'Escape',
- 'enter': ['Enter', 'NumpadEnter'],
- 'space': [' ', 'Spacebar'],
+ 'enter': 'Enter',
+ 'space': ' ',
'up': 'ArrowUp',
'down': 'ArrowDown',
'left': 'ArrowLeft',
@@ -44,6 +45,10 @@ const MODIFIER_KEYS = ['ctrl', 'alt', 'shift'];
const IGNORE_ELEMENTS = ['input', 'textarea'];
//#endregion
+//#region store
+let latestHotkey: Pattern & { callback: CallbackFunction } | null = null;
+//#endregion
+
//#region impl
export const makeHotkey = (keymap: Keymap) => {
const actions = parseKeymap(keymap);
@@ -51,13 +56,14 @@ export const makeHotkey = (keymap: Keymap) => {
if ('pswp' in window && window.pswp != null) return;
if (document.activeElement != null) {
if (IGNORE_ELEMENTS.includes(document.activeElement.tagName.toLowerCase())) return;
- if ((document.activeElement as HTMLElement).isContentEditable) return;
+ if (getHTMLElementOrNull(document.activeElement)?.isContentEditable) return;
}
- for (const { patterns, callback, options } of actions) {
- if (matchPatterns(ev, patterns, options)) {
+ for (const action of actions) {
+ if (matchPatterns(ev, action)) {
ev.preventDefault();
ev.stopPropagation();
- callback(ev);
+ action.callback(ev);
+ storePattern(ev, action.callback);
}
}
};
@@ -102,10 +108,21 @@ const parseOptions = (rawCallback: Keymap[keyof Keymap]) => {
return { ...defaultOptions } as const satisfies Action['options'];
};
-const matchPatterns = (ev: KeyboardEvent, patterns: Action['patterns'], options: Action['options']) => {
+const matchPatterns = (ev: KeyboardEvent, action: Action) => {
+ const { patterns, options, callback } = action;
if (ev.repeat && !options.allowRepeat) return false;
const key = ev.key.toLowerCase();
return patterns.some(({ which, ctrl, shift, alt }) => {
+ if (
+ latestHotkey != null &&
+ latestHotkey.which.includes(key) &&
+ latestHotkey.ctrl === ctrl &&
+ latestHotkey.alt === alt &&
+ latestHotkey.shift === shift &&
+ latestHotkey.callback === callback
+ ) {
+ return false;
+ }
if (!which.includes(key)) return false;
if (ctrl !== (ev.ctrlKey || ev.metaKey)) return false;
if (alt !== ev.altKey) return false;
@@ -114,6 +131,26 @@ const matchPatterns = (ev: KeyboardEvent, patterns: Action['patterns'], options:
});
};
+let lastHotKeyStoreTimer: number | null = null;
+
+const storePattern = (ev: KeyboardEvent, callback: CallbackFunction) => {
+ if (lastHotKeyStoreTimer != null) {
+ clearTimeout(lastHotKeyStoreTimer);
+ }
+
+ latestHotkey = {
+ which: [ev.key.toLowerCase()],
+ ctrl: ev.ctrlKey || ev.metaKey,
+ alt: ev.altKey,
+ shift: ev.shiftKey,
+ callback,
+ };
+
+ lastHotKeyStoreTimer = window.setTimeout(() => {
+ latestHotkey = null;
+ }, 500);
+};
+
const parseKeyCode = (input?: string | null) => {
if (input == null) return [];
const raw = getValueByKey(KEY_ALIASES, input);
diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts
index 8edb6fca05..f0274034b5 100644
--- a/packages/frontend/src/scripts/scroll.ts
+++ b/packages/frontend/src/scripts/scroll.ts
@@ -23,6 +23,14 @@ export function getStickyTop(el: HTMLElement, container: HTMLElement | null = nu
return getStickyTop(el.parentElement, container, newTop);
}
+export function getStickyBottom(el: HTMLElement, container: HTMLElement | null = null, bottom = 0) {
+ if (!el.parentElement) return bottom;
+ const data = el.dataset.stickyContainerFooterHeight;
+ const newBottom = data ? Number(data) + bottom : bottom;
+ if (el === container) return newBottom;
+ return getStickyBottom(el.parentElement, container, newBottom);
+}
+
export function getScrollPosition(el: HTMLElement | null): number {
const container = getScrollContainer(el);
return container == null ? window.scrollY : container.scrollTop;
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 250a2616a7..2feb79ef81 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -113,6 +113,10 @@ a {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
+ &:focus-visible {
+ outline-offset: 2px;
+ }
+
&:hover {
text-decoration: underline;
}
@@ -143,12 +147,21 @@ rt {
white-space: initial;
}
+:focus-visible {
+ outline: var(--focus) solid 2px;
+ outline-offset: -2px;
+
+ &:hover {
+ text-decoration: none;
+ }
+}
+
.ti {
width: 1.28em;
vertical-align: -12%;
line-height: 1em;
- &:before {
+ &::before {
font-size: 128%;
}
}
@@ -230,10 +243,6 @@ rt {
line-height: inherit;
max-width: 100%;
- &:focus-visible {
- outline: none;
- }
-
&:disabled {
opacity: 0.5;
cursor: default;
@@ -270,13 +279,17 @@ rt {
._help {
color: var(--accent);
- cursor: help
+ cursor: help;
}
._textButton {
@extend ._button;
color: var(--accent);
+ &:focus-visible {
+ outline-offset: 2px;
+ }
+
&:not(:disabled):hover {
text-decoration: underline;
}
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 822b552837..d7df2d10f9 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -227,7 +227,7 @@ if ($i) {
right: 15px;
pointer-events: none;
- &:before {
+ &::before {
content: "";
display: block;
width: 18px;
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 699aa1e1c8..87e9e45e63 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -139,7 +139,7 @@ function more() {
font-weight: bold;
text-align: left;
- &:before {
+ &::before {
content: "";
display: block;
width: calc(100% - 38px);
@@ -155,7 +155,7 @@ function more() {
}
&:hover, &.active {
- &:before {
+ &::before {
background: var(--accentLighten);
}
}
@@ -226,7 +226,7 @@ function more() {
}
&:hover, &.active {
- &:before {
+ &::before {
content: "";
display: block;
width: calc(100% - 24px);
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index b029533f28..8307da0d42 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -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 {
@@ -192,7 +201,7 @@ function more(ev: MouseEvent) {
font-weight: bold;
text-align: left;
- &:before {
+ &::before {
content: "";
display: block;
width: calc(100% - 38px);
@@ -207,8 +216,17 @@ function more(ev: MouseEvent) {
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
+ &:focus-visible {
+ outline: none;
+
+ &::before {
+ outline: 2px solid var(--fgOnAccent);
+ outline-offset: -4px;
+ }
+ }
+
&:hover, &.active {
- &:before {
+ &::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,10 +308,19 @@ function more(ev: MouseEvent) {
color: var(--navActive);
}
- &:hover, &.active {
+ &:focus-visible {
+ outline: none;
+
+ &::before {
+ outline: 2px solid var(--focus);
+ outline-offset: -2px;
+ }
+ }
+
+ &:hover, &.active, &:focus {
color: var(--accent);
- &:before {
+ &::before {
content: "";
display: block;
width: calc(100% - 34px);
@@ -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 {
@@ -376,7 +420,7 @@ function more(ev: MouseEvent) {
height: 52px;
text-align: center;
- &:before {
+ &::before {
content: "";
display: block;
position: absolute;
@@ -391,8 +435,17 @@ function more(ev: MouseEvent) {
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
+ &:focus-visible {
+ outline: none;
+
+ &::before {
+ outline: 2px solid var(--fgOnAccent);
+ outline-offset: -4px;
+ }
+ }
+
&:hover, &.active {
- &:before {
+ &::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,11 +503,20 @@ function more(ev: MouseEvent) {
width: 100%;
text-align: center;
- &:hover, &.active {
+ &:focus-visible {
+ outline: none;
+
+ &::before {
+ outline: 2px solid var(--focus);
+ outline-offset: -2px;
+ }
+ }
+
+ &:hover, &.active, &:focus {
text-decoration: none;
color: var(--accent);
- &:before {
+ &::before {
content: "";
display: block;
height: 100%;
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 07845bacbb..e96402d13b 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -271,7 +271,7 @@ function onDrop(ev) {
border-radius: 10px;
&.draghover {
- &:after {
+ &::after {
content: "";
display: block;
position: absolute;
@@ -285,7 +285,7 @@ function onDrop(ev) {
}
&.dragging {
- &:after {
+ &::after {
content: "";
display: block;
position: absolute;
diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue
index c688e8a0b1..6ece33eff3 100644
--- a/packages/frontend/src/widgets/WidgetCalendar.vue
+++ b/packages/frontend/src/widgets/WidgetCalendar.vue
@@ -121,7 +121,7 @@ defineExpose({
.root {
padding: 16px 0;
- &:after {
+ &::after {
content: "";
display: block;
clear: both;
--
cgit v1.2.3-freya