From d3466948d1746b581f741ea895f8295f17d12bc7 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Mon, 6 Feb 2023 15:52:00 -0500 Subject: [PATCH 01/90] =?UTF-8?q?Improving=20keyboard=20support,=20part=20?= =?UTF-8?q?1=E2=84=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/client/src/components/MkButton.vue | 3 +- packages/client/src/components/form/radio.vue | 3 ++ .../client/src/components/form/switch.vue | 3 ++ packages/client/src/directives/tooltip.ts | 33 ++++++++++++------- packages/client/src/pages/admin/_header_.vue | 6 +--- packages/client/src/style.scss | 4 --- packages/client/src/ui/_common_/navbar.vue | 13 ++++++-- 7 files changed, 39 insertions(+), 26 deletions(-) diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue index 9042500b4e..5220e8c954 100644 --- a/packages/client/src/components/MkButton.vue +++ b/packages/client/src/components/MkButton.vue @@ -184,8 +184,7 @@ function onMousedown(evt: MouseEvent): void { } &:focus-visible { - outline: solid 2px var(--focus); - outline-offset: 2px; + outline: auto; } &.inline { diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue index b36f7e9fdc..4060385827 100644 --- a/packages/client/src/components/form/radio.vue +++ b/packages/client/src/components/form/radio.vue @@ -68,6 +68,9 @@ function toggle(): void { &:hover { border-color: var(--inputBorderHover) !important; } + &:focus-within { + outline: auto; + } &.checked { background-color: var(--accentedBg) !important; diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue index 1ed00ae655..ef717ab6f9 100644 --- a/packages/client/src/components/form/switch.vue +++ b/packages/client/src/components/form/switch.vue @@ -98,6 +98,9 @@ const toggle = () => { border-color: var(--inputBorderHover) !important; } } + &:focus-within > .button { + outline: auto; + } > .label { margin-left: 12px; diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts index 7738d14e8c..91024a6e3d 100644 --- a/packages/client/src/directives/tooltip.ts +++ b/packages/client/src/directives/tooltip.ts @@ -76,23 +76,32 @@ export default { ev.preventDefault(); }); + function showTooltip() { + window.clearTimeout(self.showTimer); + window.clearTimeout(self.hideTimer); + self.showTimer = window.setTimeout(self.show, delay); + } + function hideTooltip() { + window.clearTimeout(self.showTimer); + window.clearTimeout(self.hideTimer); + self.hideTimer = window.setTimeout(self.close, delay); + } + el.addEventListener( - start, - () => { - window.clearTimeout(self.showTimer); - window.clearTimeout(self.hideTimer); - self.showTimer = window.setTimeout(self.show, delay); - }, + start, showTooltip, + { passive: true }, + ); + el.addEventListener( + "focusin", showTooltip, { passive: true }, ); el.addEventListener( - end, - () => { - window.clearTimeout(self.showTimer); - window.clearTimeout(self.hideTimer); - self.hideTimer = window.setTimeout(self.close, delay); - }, + end, hideTooltip, + { passive: true }, + ); + el.addEventListener( + "focusout", hideTooltip, { passive: true }, ); diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue index bdb41b2d2c..12702790ec 100644 --- a/packages/client/src/pages/admin/_header_.vue +++ b/packages/client/src/pages/admin/_header_.vue @@ -265,11 +265,7 @@ onUnmounted(() => { font-weight: normal; opacity: 0.7; - &:hover { - opacity: 1; - } - - &.active { + &:hover, &:focus-visible, &.active { opacity: 1; } diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index ca8bd8b435..01bff888a9 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -178,10 +178,6 @@ hr { pointer-events: none; } - &:focus-visible { - outline: none; - } - &:disabled { opacity: 0.5; cursor: default; diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue index c44c766b3c..e99656ed69 100644 --- a/packages/client/src/ui/_common_/navbar.vue +++ b/packages/client/src/ui/_common_/navbar.vue @@ -341,8 +341,6 @@ function more(ev: MouseEvent) { padding-left: 30px; line-height: 2.85rem; margin-bottom: 0.5rem; - text-overflow: ellipsis; - overflow: hidden; white-space: nowrap; width: 100%; text-align: left; @@ -368,6 +366,8 @@ function more(ev: MouseEvent) { > .text { position: relative; font-size: 0.9em; + overflow: hidden; + text-overflow: ellipsis; } &:hover { @@ -380,7 +380,7 @@ function more(ev: MouseEvent) { color: var(--navActive); } - &:hover, &.active { + &:hover, &:focus-within, &.active { color: var(--accent); transition: all 0.4s ease; @@ -562,5 +562,12 @@ function more(ev: MouseEvent) { } } } + + .item { + outline: none; + &:focus-visible:before { + outline: auto; + } + } } From 49ea503fe6a8167c4fa22ccff83c9971f493e928 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Mon, 6 Feb 2023 23:23:56 -0500 Subject: [PATCH 02/90] Fix tabbing orders & allow closing modals w/ esc --- packages/client/src/components/MkMenu.vue | 14 +++++++------- packages/client/src/components/MkModal.vue | 8 ++++++-- packages/client/src/components/MkPopupMenu.vue | 2 +- packages/client/src/components/MkSuperMenu.vue | 6 +++--- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue index 78c1ff2238..c9f8dbfd6d 100644 --- a/packages/client/src/components/MkMenu.vue +++ b/packages/client/src/components/MkMenu.vue @@ -12,33 +12,33 @@ {{ item.text }} - + - + {{ item.text }} - + {{ item.text }} - - + {{ item.text }} - -