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; + } + } }