Improving keyboard support, part 1™

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 {

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;

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;

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 },
 		);
 

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

packages/client/src/style.scss

@@ -178,10 +178,6 @@ hr {
 		pointer-events: none;
 	}
 
-	&:focus-visible {
-		outline: none;
-	}
-
 	&:disabled {
 		opacity: 0.5;
 		cursor: default;

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