Keyboard menu/widget navigation (#628)

* Keyboard menu navigation

* Fix dropdown keyboard navigation

* Fix merge error

* Some code review

* Interactive dropdowns

* Query by data attr not class name

* Add locking behaviour

* Change query selector style

* Change query selector style (again)

* Code review feedback

* Fix highlighted entry regression

* Styling and disabling checkbox tabindex in MenuLists

* Don't redirect space off canvas to backend

* Do not emit update if value same

* Escape closes all floating menus

* Close dropdowns on blur

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/widgets/buttons/TextButton.vue

@@ -4,6 +4,7 @@
 		:class="{ emphasized, disabled }"
 		:data-emphasized="emphasized || null"
 		:data-disabled="disabled || null"
+		data-text-button
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		@click="(e: MouseEvent) => action(e)"
 	>

frontend/src/components/widgets/groups/WidgetSection.vue

@@ -1,11 +1,11 @@
 <!-- TODO: Implement collapsable sections with properties system -->
 <template>
 	<LayoutCol class="widget-section">
-		<LayoutRow class="header" @click.stop="() => (expanded = !expanded)">
+		<button class="header" @click.stop="() => (expanded = !expanded)">
 			<div class="expand-arrow" :class="{ expanded }"></div>
 			<Separator :type="'Related'" />
 			<TextLabel :bold="true">{{ widgetData.name }}</TextLabel>
-		</LayoutRow>
+		</button>
 		<LayoutCol class="body" v-if="expanded">
 			<component :is="layoutRowType(layoutRow)" :widgetData="layoutRow" :layoutTarget="layoutTarget" v-for="(layoutRow, index) in widgetData.layout" :key="index"></component>
 		</LayoutCol>
@@ -17,11 +17,14 @@
 	flex: 0 0 auto;
 
 	.header {
+		display: flex;
 		flex: 0 0 24px;
-		background: var(--color-4-dimgray);
-		align-items: center;
+		border: 0;
+		text-align: left;
 		padding: 0 8px;
 		margin: 0 -4px;
+		background: var(--color-4-dimgray);
+		align-items: center;
 
 		.expand-arrow {
 			width: 6px;

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="disableTabIndex ? -1 : 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;
@@ -105,6 +107,7 @@ export default defineComponent({
 		checked: { type: Boolean as PropType<boolean>, default: false },
 		icon: { type: String as PropType<IconName>, default: "Checkmark" },
 		outlineStyle: { type: Boolean as PropType<boolean>, default: false },
+		disableTabIndex: { type: Boolean as PropType<boolean>, default: false },
 	},
 	components: {
 		IconLabel,

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

@@ -1,6 +1,16 @@
 <template>
 	<LayoutRow class="dropdown-input">
-		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => !disabled && (open = true)" ref="dropdownBox" data-hover-menu-spawner>
+		<LayoutRow
+			class="dropdown-box"
+			:class="{ disabled }"
+			:style="{ minWidth: `${minWidth}px` }"
+			tabindex="0"
+			@click="() => !disabled && (open = true)"
+			@blur="() => (open = false)"
+			@keydown="(e) => keydown(e)"
+			ref="dropdownBox"
+			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'" />
@@ -11,8 +21,10 @@
 			@naturalWidth="(newNaturalWidth: number) => (minWidth = newNaturalWidth)"
 			:entries="entries"
 			:drawIcon="drawIcon"
+			:interactive="interactive"
 			:direction="'Bottom'"
 			:scrollableY="true"
+			ref="menuList"
 		/>
 	</LayoutRow>
 </template>
@@ -99,6 +111,7 @@ export default defineComponent({
 		entries: { type: Array as PropType<SectionsOfMenuListEntries>, required: true },
 		selectedIndex: { type: Number as PropType<number>, required: false }, // When not provided, a dash is displayed
 		drawIcon: { type: Boolean as PropType<boolean>, default: false },
+		interactive: { type: Boolean as PropType<boolean>, default: true },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
@@ -129,6 +142,9 @@ export default defineComponent({
 			}
 			return DASH_ENTRY;
 		},
+		keydown(e: KeyboardEvent) {
+			(this.$refs.menuList as typeof MenuList).keydown(e, false);
+		},
 	},
 	components: {
 		IconLabel,

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

@@ -1,12 +1,20 @@
 <template>
 	<div class="menu-bar-input">
 		<div class="entry-container">
-			<div @click="() => visitWebsite('https://graphite.rs')" class="entry">
+			<button @click="() => visitWebsite('https://graphite.rs')" class="entry">
 				<IconLabel :icon="'GraphiteLogo'" />
-			</div>
+			</button>
 		</div>
 		<div class="entry-container" v-for="(entry, index) in entries" :key="index">
-			<div @click="() => onClick(entry)" class="entry" :class="{ open: entry.ref?.open }" data-hover-menu-spawner>
+			<div
+				@click="(e) => onClick(entry, e.target)"
+				@blur="() => close(entry)"
+				tabindex="0"
+				@keydown="entry.ref?.keydown"
+				class="entry"
+				:class="{ open: entry.ref?.open }"
+				data-hover-menu-spawner
+			>
 				<IconLabel v-if="entry.icon" :icon="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
@@ -36,6 +44,9 @@
 			align-items: center;
 			white-space: nowrap;
 			padding: 0 8px;
+			background: none;
+			border: 0;
+			margin: 0;
 
 			svg {
 				fill: var(--color-e-nearwhite);
@@ -207,10 +218,16 @@ function makeEntries(editor: Editor): MenuListEntries {
 export default defineComponent({
 	inject: ["editor"],
 	methods: {
-		onClick(menuEntry: MenuListEntry) {
+		onClick(menuEntry: MenuListEntry, target: EventTarget | null) {
+			// Focus the target so that keyboard inputs are sent to the dropdown
+			(target as HTMLElement)?.focus();
+
 			if (menuEntry.ref) menuEntry.ref.isOpen = true;
 			else throw new Error("The menu bar floating menu has no associated ref");
 		},
+		close(menuEntry: MenuListEntry) {
+			if (menuEntry.ref) menuEntry.ref.isOpen = false;
+		},
 		// TODO: Move to backend
 		visitWebsite(url: string) {
 			// This method is required because `window` isn't accessible from the Vue component HTML