Keyboard menu navigation

Author: Keavon

frontend/src/App.vue

@@ -186,6 +186,27 @@ img {
 	}
 }
 
+.icon-button,
+.text-button,
+.popover-button,
+.checkbox-input label,
+.color-input .swatch .swatch-button,
+.dropdown-input .dropdown-box,
+.font-input .dropdown-box,
+.radio-input button,
+.menu-list {
+	&:focus {
+		outline: 1px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+}
+
+.menu-list {
+	&:focus {
+		outline-offset: -1px;
+	}
+}
+
 // For placeholder messages (remove eventually)
 .floating-menu {
 	h1,

frontend/src/components/widgets/floating-menus/DialogModal.vue

@@ -90,5 +90,11 @@ export default defineComponent({
 			this.dialog.dismissDialog();
 		},
 	},
+	mounted() {
+		// Focus the first button in the popup
+		const element = this.$el as Element | null;
+		const emphasizedOrFirstButton = (element?.querySelector("button.emphasized") as HTMLButtonElement | null) || element?.querySelector("button");
+		emphasizedOrFirstButton?.focus();
+	},
 });
 </script>

frontend/src/components/widgets/floating-menus/MenuList.vue

@@ -2,7 +2,7 @@
 	<FloatingMenu class="menu-list" :direction="direction" :type="'Dropdown'" ref="floatingMenu" :windowEdgeMargin="0" :scrollableY="scrollableY" data-hover-menu-keep-open>
 		<template v-for="(section, sectionIndex) in menuEntries" :key="sectionIndex">
 			<Separator :type="'List'" :direction="'Vertical'" v-if="sectionIndex > 0" />
-			<LayoutRow
+			<button
 				v-for="(entry, entryIndex) in section"
 				:key="entryIndex"
 				class="row"
@@ -31,7 +31,7 @@
 					v-bind="{ defaultAction, minWidth, drawIcon, scrollableY }"
 					:ref="(ref: any) => setEntryRefs(entry, ref)"
 				/>
-			</LayoutRow>
+			</button>
 		</template>
 	</FloatingMenu>
 </template>
@@ -42,6 +42,15 @@
 		padding: 4px 0;
 
 		.row {
+			display: flex;
+			flex-direction: row;
+			flex-grow: 1; // TODO: Note, this is overridden by the flex shorthand rule below
+			min-width: 0;
+			min-height: 0;
+			border: 0;
+			padding: 0;
+			text-align: left;
+			background: none;
 			height: 20px;
 			align-items: center;
 			white-space: nowrap;
@@ -133,7 +142,6 @@ import { defineComponent, PropType } from "vue";
 
 import { IconName } from "@/utilities/icons";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
 import FloatingMenu, { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -277,7 +285,6 @@ const MenuList = defineComponent({
 		IconLabel,
 		CheckboxInput,
 		UserInputLabel,
-		LayoutRow,
 	},
 });
 export default MenuList;

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -1,7 +1,7 @@
 <template>
 	<LayoutRow class="checkbox-input" :class="{ 'outline-style': outlineStyle }">
 		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
-		<label :for="`checkbox-input-${id}`">
+		<label :for="`checkbox-input-${id}`" tabindex="0" @keydown.enter="(e) => ((e.target as HTMLElement).previousSibling as HTMLInputElement).click()">
 			<LayoutRow class="checkbox-box">
 				<IconLabel :icon="icon" />
 			</LayoutRow>
@@ -21,6 +21,8 @@
 	label {
 		display: flex;
 		height: 16px;
+		// Provides rounded corners for the :focus outline
+		border-radius: 2px;
 
 		.checkbox-box {
 			flex: 0 0 auto;

frontend/src/components/widgets/inputs/DropdownInput.vue

@@ -1,10 +1,10 @@
 <template>
 	<LayoutRow class="dropdown-input">
-		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
+		<button class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
 			<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
-		</LayoutRow>
+		</button>
 		<MenuList
 			v-model:activeEntry="activeEntry"
 			@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
@@ -23,6 +23,15 @@
 	position: relative;
 
 	.dropdown-box {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+		min-width: 0;
+		min-height: 0;
+		border: 0;
+		padding: 0;
+		text-align: left;
+
 		align-items: center;
 		white-space: nowrap;
 		background: var(--color-1-nearblack);

frontend/src/components/widgets/inputs/FontInput.vue

@@ -1,9 +1,9 @@
 <template>
 	<LayoutRow class="font-input">
-		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
+		<button class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
-		</LayoutRow>
+		</button>
 		<MenuList
 			v-model:activeEntry="activeEntry"
 			@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
@@ -20,6 +20,15 @@
 	position: relative;
 
 	.dropdown-box {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+		min-width: 0;
+		min-height: 0;
+		border: 0;
+		padding: 0;
+		text-align: left;
+
 		align-items: center;
 		white-space: nowrap;
 		background: var(--color-1-nearblack);

frontend/src/components/widgets/separators/Separator.vue

@@ -65,6 +65,8 @@
 			margin: 0 4px;
 		}
 	}
+
+	min-height: auto !important;
 }
 </style>