From 2566c1fac69f9e7e148ae967878d3abc7d655159 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Fri, 6 May 2022 14:24:16 -0700
Subject: [PATCH 01/16] Keyboard menu navigation

---
 frontend/src/App.vue                          | 21 +++++++++++++++++++
 .../widgets/floating-menus/DialogModal.vue    |  6 ++++++
 .../widgets/floating-menus/MenuList.vue       | 15 +++++++++----
 .../widgets/inputs/CheckboxInput.vue          |  4 +++-
 .../widgets/inputs/DropdownInput.vue          | 13 ++++++++++--
 .../components/widgets/inputs/FontInput.vue   | 13 ++++++++++--
 .../widgets/separators/Separator.vue          |  2 ++
 7 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7c457fea40..75184b83be 100644
--- a/frontend/src/App.vue
+++ b/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,
diff --git a/frontend/src/components/widgets/floating-menus/DialogModal.vue b/frontend/src/components/widgets/floating-menus/DialogModal.vue
index 728f32c28a..789e6ec6a5 100644
--- a/frontend/src/components/widgets/floating-menus/DialogModal.vue
+++ b/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>
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index be67022aac..970569d4d4 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/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;
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.vue b/frontend/src/components/widgets/inputs/CheckboxInput.vue
index 4b69003f9f..9851efdda5 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.vue
+++ b/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;
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index a28aee1af7..4632e2bfbd 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/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);
diff --git a/frontend/src/components/widgets/inputs/FontInput.vue b/frontend/src/components/widgets/inputs/FontInput.vue
index 7626c71d5c..1203ffe4e9 100644
--- a/frontend/src/components/widgets/inputs/FontInput.vue
+++ b/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);
diff --git a/frontend/src/components/widgets/separators/Separator.vue b/frontend/src/components/widgets/separators/Separator.vue
index 76f7bba31f..c2ca438ec1 100644
--- a/frontend/src/components/widgets/separators/Separator.vue
+++ b/frontend/src/components/widgets/separators/Separator.vue
@@ -65,6 +65,8 @@
 			margin: 0 4px;
 		}
 	}
+
+	min-height: auto !important;
 }
 </style>
 

From 5fa20a9305ead7fcd204cbb5b019ac6b5b329e1e Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Mon, 16 May 2022 19:54:04 +0100
Subject: [PATCH 02/16] Fix dropdown keyboard navigation

---
 .../src/components/widgets/WidgetSection.vue  | 13 ++-
 .../widgets/floating-menus/DialogModal.vue    |  2 +-
 .../widgets/floating-menus/FloatingMenu.vue   |  3 +
 .../widgets/floating-menus/MenuList.vue       | 98 ++++++++++++++++---
 .../widgets/inputs/DropdownInput.vue          | 23 +++--
 .../widgets/inputs/MenuBarInput.vue           |  7 +-
 frontend/src/lifetime/input.ts                |  2 +-
 7 files changed, 115 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/widgets/WidgetSection.vue b/frontend/src/components/widgets/WidgetSection.vue
index b0d55b12a3..10f027db8c 100644
--- a/frontend/src/components/widgets/WidgetSection.vue
+++ b/frontend/src/components/widgets/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,6 +17,15 @@
 	flex: 0 0 auto;
 
 	.header {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+		min-width: 0;
+		min-height: 0;
+		border: 0;
+		padding: 0;
+		text-align: left;
+
 		flex: 0 0 24px;
 		background: var(--color-4-dimgray);
 		align-items: center;
diff --git a/frontend/src/components/widgets/floating-menus/DialogModal.vue b/frontend/src/components/widgets/floating-menus/DialogModal.vue
index 789e6ec6a5..9bfcc95784 100644
--- a/frontend/src/components/widgets/floating-menus/DialogModal.vue
+++ b/frontend/src/components/widgets/floating-menus/DialogModal.vue
@@ -7,7 +7,7 @@
 			</LayoutCol>
 			<LayoutCol class="main-column">
 				<WidgetLayout v-if="dialog.state.widgets.layout.length > 0" :layout="dialog.state.widgets" class="details" />
-				<LayoutRow v-if="dialog.state.jsCallbackBasedButtons?.length > 0" class="panic-buttons-row">
+				<LayoutRow v-if="dialog.state.jsCallbackBasedButtons?.length" class="panic-buttons-row">
 					<TextButton v-for="(button, index) in dialog.state.jsCallbackBasedButtons" :key="index" :action="() => button.callback?.()" v-bind="button.props" />
 				</LayoutRow>
 			</LayoutCol>
diff --git a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue b/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
index e6971682d6..37ec7a4b40 100644
--- a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
+++ b/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
@@ -298,6 +298,7 @@ export default defineComponent({
 		},
 		getWidth(callback: (width: number) => void) {
 			this.$nextTick(() => {
+				if (!this.$refs.floatingMenuContent) return;
 				const floatingMenuContent: HTMLElement = (this.$refs.floatingMenuContent as typeof LayoutCol).$el;
 				const width = floatingMenuContent.clientWidth;
 				callback(width);
@@ -305,6 +306,7 @@ export default defineComponent({
 		},
 		disableMinWidth(callback: (minWidth: string) => void) {
 			this.$nextTick(() => {
+				if (!this.$refs.floatingMenuContent) return;
 				const floatingMenuContent: HTMLElement = (this.$refs.floatingMenuContent as typeof LayoutCol).$el;
 				const initialMinWidth = floatingMenuContent.style.minWidth;
 				floatingMenuContent.style.minWidth = "0";
@@ -312,6 +314,7 @@ export default defineComponent({
 			});
 		},
 		enableMinWidth(minWidth: string) {
+			if (!this.$refs.floatingMenuContent) return;
 			const floatingMenuContent: HTMLElement = (this.$refs.floatingMenuContent as typeof LayoutCol).$el;
 			floatingMenuContent.style.minWidth = minWidth;
 		},
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index 970569d4d4..3dbb7b13cf 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -2,11 +2,11 @@
 	<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" />
-			<button
+			<LayoutRow
 				v-for="(entry, entryIndex) in section"
 				:key="entryIndex"
 				class="row"
-				:class="{ open: isMenuEntryOpen(entry), active: entry === activeEntry }"
+				:class="{ open: isMenuEntryOpen(entry), active: entry === highlighted }"
 				@click="() => handleEntryClick(entry)"
 				@pointerenter="() => handleEntryPointerEnter(entry)"
 				@pointerleave="() => handleEntryPointerLeave(entry)"
@@ -31,7 +31,7 @@
 					v-bind="{ defaultAction, minWidth, drawIcon, scrollableY }"
 					:ref="(ref: any) => setEntryRefs(entry, ref)"
 				/>
-			</button>
+			</LayoutRow>
 		</template>
 	</FloatingMenu>
 </template>
@@ -42,15 +42,6 @@
 		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;
@@ -142,6 +133,7 @@ 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";
@@ -217,6 +209,8 @@ const MenuList = defineComponent({
 		},
 		setOpen() {
 			(this.$refs.floatingMenu as typeof FloatingMenu).setOpen();
+			// Reset the highlighted entry to the active one
+			this.setHighlighted(this.activeEntry);
 		},
 		setClosed() {
 			(this.$refs.floatingMenu as typeof FloatingMenu).setClosed();
@@ -225,6 +219,77 @@ const MenuList = defineComponent({
 			const floatingMenu = this.$refs.floatingMenu as typeof FloatingMenu;
 			return Boolean(floatingMenu?.isOpen());
 		},
+		/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
+		keydown(e: KeyboardEvent, submenu: boolean): boolean {
+			const menuOpen = this.isOpen();
+			const flatEntries = this.menuEntries.flat();
+			const openChild = flatEntries.map(this.isMenuEntryOpen).indexOf(true);
+
+			const openSubmenu = (highlighted: MenuListEntry<string>): void => {
+				if (highlighted.children?.length) {
+					highlighted.ref?.setOpen();
+
+					// Highlight first item
+					if (highlighted.ref) highlighted.ref.setHighlighted(highlighted.children[0][0]);
+				}
+			};
+
+			if (!menuOpen && (e.key === " " || e.key === "Enter")) {
+				// Allow opening menu with space or enter
+				this.setOpen();
+			} else if (menuOpen && openChild >= 0) {
+				// Redirect the keyboard navigation to a submenu if one is open
+				const shouldCloseStack = flatEntries[openChild].ref?.keydown(e, true);
+
+				// Highlight the menu item in the parent list that corresponds with the open submenu
+				if (e.key !== "Escape" && this.highlighted) this.setHighlighted(flatEntries[openChild]);
+
+				// Handle the child closing the entire menu stack
+				if (shouldCloseStack) {
+					this.setClosed();
+					return true;
+				}
+			} else if (menuOpen && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+				// Navigate to the next and previous entries with arrow keys
+
+				let newIndex = e.key === "ArrowUp" ? flatEntries.length - 1 : 0;
+				if (this.highlighted) {
+					const index = this.highlighted ? flatEntries.indexOf(this.highlighted) : 0;
+					newIndex = (index + (e.key === "ArrowUp" ? -1 : 1) + flatEntries.length) % flatEntries.length;
+				}
+
+				const newEntry = flatEntries[newIndex];
+				this.setHighlighted(newEntry);
+			} else if (menuOpen && e.key === "Escape") {
+				// Close menu with escape key
+				this.setClosed();
+
+				// Reset active to before open
+				this.setHighlighted(this.activeEntry);
+			} else if (menuOpen && this.highlighted && e.key === "Enter") {
+				// Handle clicking on an option if enter is pressed
+				if (!this.highlighted.children?.length) this.handleEntryClick(this.highlighted);
+				else openSubmenu(this.highlighted);
+
+				// Stop the event from triggering a press on a new dialog
+				e.preventDefault();
+
+				// Enter should close the entire menu stack
+				return true;
+			} else if (menuOpen && this.highlighted && e.key === "ArrowRight") {
+				// Right arrow opens a submenu
+				openSubmenu(this.highlighted);
+			} else if (menuOpen && e.key === "ArrowLeft") {
+				// Left arrow closes a submenu
+				if (submenu) this.setClosed();
+			}
+
+			// By default, keep the menu stack open
+			return false;
+		},
+		setHighlighted(newHighlight: MenuListEntry<string> | undefined) {
+			this.highlighted = newHighlight;
+		},
 		async measureAndReportWidth() {
 			// API is experimental but supported in all browsers - https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -263,9 +328,6 @@ const MenuList = defineComponent({
 	mounted() {
 		this.measureAndReportWidth();
 	},
-	updated() {
-		this.measureAndReportWidth();
-	},
 	watch: {
 		menuEntriesWithoutRefs: {
 			handler() {
@@ -273,10 +335,15 @@ const MenuList = defineComponent({
 			},
 			deep: true,
 		},
+		activeEntry(newEntry: MenuListEntry<string>) {
+			this.setHighlighted(newEntry);
+		},
 	},
 	data() {
 		return {
 			keyboardLockInfoMessage: this.fullscreen.keyboardLockApiSupported ? KEYBOARD_LOCK_USE_FULLSCREEN : KEYBOARD_LOCK_SWITCH_BROWSER,
+			// The highlighted entry (the current active one unless keyboard navigation is taking place)
+			highlighted: this.activeEntry,
 		};
 	},
 	components: {
@@ -285,6 +352,7 @@ const MenuList = defineComponent({
 		IconLabel,
 		CheckboxInput,
 		UserInputLabel,
+		LayoutRow,
 	},
 });
 export default MenuList;
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index 4632e2bfbd..f39c797a85 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -1,10 +1,10 @@
 <template>
 	<LayoutRow class="dropdown-input">
-		<button class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
+		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" tabindex="0" @click="() => clickDropdownBox()" @keydown="keydown" 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'" />
-		</button>
+		</LayoutRow>
 		<MenuList
 			v-model:activeEntry="activeEntry"
 			@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
@@ -23,15 +23,6 @@
 	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);
@@ -133,16 +124,24 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		// retrieves the menu list component
+		menuList() {
+			return this.$refs.menuList as typeof MenuList;
+		},
 		// Called only when `activeEntry` is changed from the child MenuList component via user input
 		activeEntryChanged(newActiveEntry: MenuListEntry) {
 			this.$emit("update:selectedIndex", this.menuEntries.flat().indexOf(newActiveEntry));
 		},
 		clickDropdownBox() {
-			if (!this.disabled) (this.$refs.menuList as typeof MenuList).setOpen();
+			if (!this.disabled) this.menuList().setOpen();
 		},
 		onWidthChanged(newWidth: number) {
 			this.minWidth = newWidth;
 		},
+		keydown(e: KeyboardEvent) {
+			// If not disabled, redirect key to the menulist (for keyboard selection)
+			if (!this.disabled) this.menuList().keydown(e);
+		},
 	},
 	components: {
 		IconLabel,
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index e4733da827..58d65e0b86 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -6,7 +6,7 @@
 			</div>
 		</div>
 		<div class="entry-container" v-for="(entry, index) in menuEntries" :key="index">
-			<div @click="() => handleEntryClick(entry)" class="entry" :class="{ open: entry.ref?.isOpen() }" data-hover-menu-spawner>
+			<div @click="(e) => handleEntryClick(entry, e.target)" tabindex="0" @keydown="entry.ref?.keydown" class="entry" :class="{ open: entry.ref?.isOpen() }" data-hover-menu-spawner>
 				<IconLabel :icon="entry.icon" v-if="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
@@ -195,7 +195,10 @@ export default defineComponent({
 		setEntryRefs(menuEntry: MenuListEntry, ref: typeof MenuList) {
 			if (ref) menuEntry.ref = ref;
 		},
-		handleEntryClick(menuEntry: MenuListEntry) {
+		handleEntryClick(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.setOpen();
 			else throw new Error("The menu bar floating menu has no associated ref");
 		},
diff --git a/frontend/src/lifetime/input.ts b/frontend/src/lifetime/input.ts
index 2ad9faa30c..d6d36e1b0e 100644
--- a/frontend/src/lifetime/input.ts
+++ b/frontend/src/lifetime/input.ts
@@ -72,7 +72,7 @@ export function createInputManager(editor: EditorState, container: HTMLElement,
 
 		// Don't redirect tab or enter if not in canvas (to allow navigating elements)
 		const inCanvas = e.target instanceof Element && e.target.closest("[data-canvas]");
-		if (!inCanvas && (key === "tab" || key === "enter")) return false;
+		if (!inCanvas && ["tab", "enter", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(key)) return false;
 
 		// Redirect to the backend
 		return true;

From 2cca3e5c8167dc60b5d408205670c2ed27e64bad Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Thu, 19 May 2022 16:58:32 +0100
Subject: [PATCH 03/16] Fix merge error

---
 frontend/src/components/widgets/floating-menus/MenuList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index f7a14cb686..af269fd4a2 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -222,7 +222,7 @@ const MenuList = defineComponent({
 		/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
 		keydown(e: KeyboardEvent, submenu: boolean): boolean {
 			const menuOpen = this.isOpen();
-			const flatEntries = this.menuEntries.flat();
+			const flatEntries = this.entries.flat();
 			const openChild = flatEntries.map(this.isMenuEntryOpen).indexOf(true);
 
 			const openSubmenu = (highlighted: MenuListEntry<string>): void => {

From 8e0e14417b4edc439c1d90c6531131fb60679862 Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Sun, 22 May 2022 11:32:47 +0100
Subject: [PATCH 04/16] Some code review

---
 frontend/src/App.vue                                 |  9 ++-------
 frontend/src/components/widgets/WidgetSection.vue    | 12 +++---------
 frontend/src/components/widgets/inputs/FontInput.vue |  9 ---------
 .../src/components/widgets/inputs/MenuBarInput.vue   |  7 +++++--
 .../src/components/widgets/separators/Separator.vue  |  2 --
 frontend/src/io-managers/input.ts                    |  2 +-
 6 files changed, 11 insertions(+), 30 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 91fd1aed22..20ece0acf1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -198,19 +198,14 @@ img {
 .dropdown-input .dropdown-box,
 .font-input .dropdown-box,
 .radio-input button,
-.menu-list {
+.menu-list,
+.menu-bar-input .entry {
 	&:focus {
 		outline: 1px solid var(--color-accent);
 		outline-offset: 2px;
 	}
 }
 
-.menu-list {
-	&:focus {
-		outline-offset: -1px;
-	}
-}
-
 // For placeholder messages (remove eventually)
 .floating-menu {
 	h1,
diff --git a/frontend/src/components/widgets/WidgetSection.vue b/frontend/src/components/widgets/WidgetSection.vue
index e026a6c7c2..08e88dae81 100644
--- a/frontend/src/components/widgets/WidgetSection.vue
+++ b/frontend/src/components/widgets/WidgetSection.vue
@@ -18,19 +18,13 @@
 
 	.header {
 		display: flex;
-		flex-direction: row;
-		flex-grow: 1;
-		min-width: 0;
-		min-height: 0;
+		flex: 0 0 24px;
 		border: 0;
-		padding: 0;
 		text-align: left;
-
-		flex: 0 0 24px;
-		background: var(--color-4-dimgray);
-		align-items: center;
 		padding: 0 8px;
 		margin: 0 -4px;
+		background: var(--color-4-dimgray);
+		align-items: center;
 
 		.expand-arrow {
 			width: 6px;
diff --git a/frontend/src/components/widgets/inputs/FontInput.vue b/frontend/src/components/widgets/inputs/FontInput.vue
index 3ae7c45234..eb1468f673 100644
--- a/frontend/src/components/widgets/inputs/FontInput.vue
+++ b/frontend/src/components/widgets/inputs/FontInput.vue
@@ -20,15 +20,6 @@
 	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);
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index 10260d0d2d..88c33b66ce 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -1,9 +1,9 @@
 <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="(e) => onClick(entry, e.target)" tabindex="0" @keydown="entry.ref?.keydown" class="entry" :class="{ open: entry.ref?.open }" data-hover-menu-spawner>
@@ -36,6 +36,9 @@
 			align-items: center;
 			white-space: nowrap;
 			padding: 0 8px;
+			background: none;
+			border: 0;
+			margin: 0;
 
 			svg {
 				fill: var(--color-e-nearwhite);
diff --git a/frontend/src/components/widgets/separators/Separator.vue b/frontend/src/components/widgets/separators/Separator.vue
index cc5a26ef58..8f39d5a34e 100644
--- a/frontend/src/components/widgets/separators/Separator.vue
+++ b/frontend/src/components/widgets/separators/Separator.vue
@@ -69,8 +69,6 @@
 			margin: 0 4px;
 		}
 	}
-
-	min-height: auto !important;
 }
 </style>
 
diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index 02af1191cb..90ae5b859f 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -72,7 +72,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 
 		// Don't redirect tab or enter if not in canvas (to allow navigating elements)
 		const inCanvas = e.target instanceof Element && e.target.closest("[data-canvas]");
-		if (!inCanvas && ["tab", "enter", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(key)) return false;
+		if (!inCanvas && ["tab", "enter", "arrowdown", "arrowup", "arrowleft", "arrowright"].includes(key.toLowerCase())) return false;
 
 		// Redirect to the backend
 		return true;

From 1106407e42b23a6bf21ad4d8b73c98dfe8619cd5 Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Sun, 22 May 2022 12:11:14 +0100
Subject: [PATCH 05/16] Interactive dropdowns

---
 editor/src/dialog/dialogs/export_dialog.rs                | 1 +
 editor/src/document/document_message_handler.rs           | 2 ++
 editor/src/layout/widgets.rs                              | 1 +
 .../src/components/widgets/floating-menus/MenuList.vue    | 8 +++++++-
 frontend/src/components/widgets/inputs/DropdownInput.vue  | 2 ++
 5 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/editor/src/dialog/dialogs/export_dialog.rs b/editor/src/dialog/dialogs/export_dialog.rs
index 1a4e505827..7744fc661c 100644
--- a/editor/src/dialog/dialogs/export_dialog.rs
+++ b/editor/src/dialog/dialogs/export_dialog.rs
@@ -86,6 +86,7 @@ impl PropertyHolder for Export {
 			WidgetHolder::new(Widget::DropdownInput(DropdownInput {
 				selected_index: Some(index as u32),
 				entries,
+				interactive: false,
 				..Default::default()
 			})),
 		];
diff --git a/editor/src/document/document_message_handler.rs b/editor/src/document/document_message_handler.rs
index 18e26ebb17..01e3b71048 100644
--- a/editor/src/document/document_message_handler.rs
+++ b/editor/src/document/document_message_handler.rs
@@ -693,6 +693,7 @@ impl DocumentMessageHandler {
 					]],
 					selected_index: Some(self.document_mode as u32),
 					draw_icon: true,
+					interactive: false, // TODO: set to true when dialogs are not spawned
 					..Default::default()
 				})),
 				WidgetHolder::new(Widget::Separator(Separator {
@@ -779,6 +780,7 @@ impl DocumentMessageHandler {
 					entries: blend_mode_menu_entries,
 					selected_index: blend_mode.map(|blend_mode| blend_mode as u32),
 					disabled: blend_mode.is_none() && !blend_mode_is_mixed,
+					interactive: true,
 					draw_icon: false,
 				})),
 				WidgetHolder::new(Widget::Separator(Separator {
diff --git a/editor/src/layout/widgets.rs b/editor/src/layout/widgets.rs
index 9a66bf7fad..5fec747ffd 100644
--- a/editor/src/layout/widgets.rs
+++ b/editor/src/layout/widgets.rs
@@ -368,6 +368,7 @@ pub struct DropdownInput {
 	pub selected_index: Option<u32>,
 	#[serde(rename = "drawIcon")]
 	pub draw_icon: bool,
+	pub interactive: bool,
 	// `on_update` exists on the `DropdownEntryData`, not this parent `DropdownInput`
 	pub disabled: bool,
 }
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index 14853b4c67..a21a9a2f09 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -179,6 +179,7 @@ const MenuList = defineComponent({
 		direction: { type: String as PropType<MenuDirection>, default: "Bottom" },
 		minWidth: { type: Number as PropType<number>, default: 0 },
 		drawIcon: { type: Boolean as PropType<boolean>, default: false },
+		interactive: { type: Boolean as PropType<boolean>, default: false },
 		scrollableY: { type: Boolean as PropType<boolean>, default: false },
 		defaultAction: { type: Function as PropType<() => void>, required: false },
 	},
@@ -244,6 +245,9 @@ const MenuList = defineComponent({
 
 		/// Handles keyboard navigation for the menu. Returns if the entire menu stack should be dismissed
 		keydown(e: KeyboardEvent, submenu: boolean): boolean {
+			// Interactive menus should keep the active entry the same as the highlighted one
+			if (this.interactive) this.highlighted = this.activeEntry;
+
 			const menuOpen = this.isOpen;
 			const flatEntries = this.entries.flat();
 			const openChild = flatEntries.findIndex((entry) => entry.children?.length && entry.ref?.isOpen);
@@ -272,7 +276,7 @@ const MenuList = defineComponent({
 					this.isOpen = false;
 					return true;
 				}
-			} else if (menuOpen && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+			} else if ((menuOpen || this.interactive) && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
 				// Navigate to the next and previous entries with arrow keys
 
 				let newIndex = e.key === "ArrowUp" ? flatEntries.length - 1 : 0;
@@ -312,6 +316,8 @@ const MenuList = defineComponent({
 		},
 		setHighlighted(newHighlight: MenuListEntry<string> | undefined) {
 			this.highlighted = newHighlight;
+			// Interactive menus should keep the active entry the same as the highlighted one
+			if (this.interactive) this.$emit("update:activeEntry", newHighlight);
 		},
 	},
 	computed: {
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index 95881cd397..ecbf818eff 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -20,6 +20,7 @@
 			@naturalWidth="(newNaturalWidth: number) => (minWidth = newNaturalWidth)"
 			:entries="entries"
 			:drawIcon="drawIcon"
+			:interactive="interactive"
 			:direction="'Bottom'"
 			:scrollableY="true"
 			ref="menuList"
@@ -109,6 +110,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() {

From 99704546b47d54fdfb5669ad2a8afc5f45fdf8e8 Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Mon, 23 May 2022 17:13:29 +0100
Subject: [PATCH 06/16] Query by data attr not class name

---
 frontend/src/components/widgets/floating-menus/DialogModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/widgets/floating-menus/DialogModal.vue b/frontend/src/components/widgets/floating-menus/DialogModal.vue
index 8bf90c653c..7c73a7d226 100644
--- a/frontend/src/components/widgets/floating-menus/DialogModal.vue
+++ b/frontend/src/components/widgets/floating-menus/DialogModal.vue
@@ -93,7 +93,7 @@ export default defineComponent({
 	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");
+		const emphasizedOrFirstButton = (element?.querySelector("button[data-emphasized='true']") as HTMLButtonElement | null) || element?.querySelector("button");
 		emphasizedOrFirstButton?.focus();
 	},
 });

From 641740a8139c3b644df057f77b6b7c6b0d2b5eb2 Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Mon, 23 May 2022 17:59:00 +0100
Subject: [PATCH 07/16] Add locking behaviour

---
 frontend/src/components/widgets/floating-menus/MenuList.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index a21a9a2f09..1fa8d8a331 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/frontend/src/components/widgets/floating-menus/MenuList.vue
@@ -282,7 +282,11 @@ const MenuList = defineComponent({
 				let newIndex = e.key === "ArrowUp" ? flatEntries.length - 1 : 0;
 				if (this.highlighted) {
 					const index = this.highlighted ? flatEntries.map((entry) => entry.label).indexOf(this.highlighted.label) : 0;
-					newIndex = (index + (e.key === "ArrowUp" ? -1 : 1) + flatEntries.length) % flatEntries.length;
+					newIndex = index + (e.key === "ArrowUp" ? -1 : 1);
+
+					// Interactive dropdowns should lock at the end whereas other dropdowns should loop
+					if (this.interactive) newIndex = Math.min(flatEntries.length - 1, Math.max(0, newIndex));
+					else newIndex = (newIndex + flatEntries.length) % flatEntries.length;
 				}
 
 				const newEntry = flatEntries[newIndex];

From 5e8a477185dd188756da1c8dfb44048ad65cb73c Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Tue, 24 May 2022 18:23:21 +0100
Subject: [PATCH 08/16] Change query selector style

---
 frontend/src/components/floating-menus/DialogModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/floating-menus/DialogModal.vue b/frontend/src/components/floating-menus/DialogModal.vue
index 0fca56b832..ad44efcf7a 100644
--- a/frontend/src/components/floating-menus/DialogModal.vue
+++ b/frontend/src/components/floating-menus/DialogModal.vue
@@ -93,7 +93,7 @@ export default defineComponent({
 	mounted() {
 		// Focus the first button in the popup
 		const element = this.$el as Element | null;
-		const emphasizedOrFirstButton = (element?.querySelector("button[data-emphasized='true']") as HTMLButtonElement | null) || element?.querySelector("button");
+		const emphasizedOrFirstButton = (element?.querySelector("button[data-emphasized]") as HTMLButtonElement | null) || element?.querySelector("button");
 		emphasizedOrFirstButton?.focus();
 	},
 });

From 8795117ad888c835efaa9a988ac40c81659b35ab Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Tue, 24 May 2022 18:29:04 +0100
Subject: [PATCH 09/16] Change query selector style (again)

---
 frontend/src/components/floating-menus/DialogModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/floating-menus/DialogModal.vue b/frontend/src/components/floating-menus/DialogModal.vue
index ad44efcf7a..d9b090f5a6 100644
--- a/frontend/src/components/floating-menus/DialogModal.vue
+++ b/frontend/src/components/floating-menus/DialogModal.vue
@@ -93,7 +93,7 @@ export default defineComponent({
 	mounted() {
 		// Focus the first button in the popup
 		const element = this.$el as Element | null;
-		const emphasizedOrFirstButton = (element?.querySelector("button[data-emphasized]") as HTMLButtonElement | null) || element?.querySelector("button");
+		const emphasizedOrFirstButton = (element?.querySelector("[data-emphasized]") as HTMLButtonElement | null) || element?.querySelector("button");
 		emphasizedOrFirstButton?.focus();
 	},
 });

From 85d2cbd9c661b814200ab09d49d38f221365189f Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Tue, 24 May 2022 16:47:47 -0700
Subject: [PATCH 10/16] Code review feedback

---
 editor/src/dialog/dialogs/export_dialog.rs             | 1 -
 editor/src/document/document_message_handler.rs        | 3 +--
 editor/src/layout/widgets.rs                           | 5 +++--
 frontend/src/components/floating-menus/DialogModal.vue | 2 +-
 frontend/src/components/widgets/buttons/TextButton.vue | 1 +
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/editor/src/dialog/dialogs/export_dialog.rs b/editor/src/dialog/dialogs/export_dialog.rs
index 7744fc661c..1a4e505827 100644
--- a/editor/src/dialog/dialogs/export_dialog.rs
+++ b/editor/src/dialog/dialogs/export_dialog.rs
@@ -86,7 +86,6 @@ impl PropertyHolder for Export {
 			WidgetHolder::new(Widget::DropdownInput(DropdownInput {
 				selected_index: Some(index as u32),
 				entries,
-				interactive: false,
 				..Default::default()
 			})),
 		];
diff --git a/editor/src/document/document_message_handler.rs b/editor/src/document/document_message_handler.rs
index 01e3b71048..7925549e3a 100644
--- a/editor/src/document/document_message_handler.rs
+++ b/editor/src/document/document_message_handler.rs
@@ -693,7 +693,6 @@ impl DocumentMessageHandler {
 					]],
 					selected_index: Some(self.document_mode as u32),
 					draw_icon: true,
-					interactive: false, // TODO: set to true when dialogs are not spawned
 					..Default::default()
 				})),
 				WidgetHolder::new(Widget::Separator(Separator {
@@ -780,8 +779,8 @@ impl DocumentMessageHandler {
 					entries: blend_mode_menu_entries,
 					selected_index: blend_mode.map(|blend_mode| blend_mode as u32),
 					disabled: blend_mode.is_none() && !blend_mode_is_mixed,
-					interactive: true,
 					draw_icon: false,
+					..Default::default()
 				})),
 				WidgetHolder::new(Widget::Separator(Separator {
 					separator_type: SeparatorType::Related,
diff --git a/editor/src/layout/widgets.rs b/editor/src/layout/widgets.rs
index 5fec747ffd..0999e0d2d4 100644
--- a/editor/src/layout/widgets.rs
+++ b/editor/src/layout/widgets.rs
@@ -359,8 +359,8 @@ pub struct PopoverButton {
 	pub text: String,
 }
 
-#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
-#[derivative(Debug, PartialEq)]
+#[derive(Clone, Serialize, Deserialize, Derivative)]
+#[derivative(Debug, PartialEq, Default)]
 pub struct DropdownInput {
 	pub entries: Vec<Vec<DropdownEntryData>>,
 	// This uses `u32` instead of `usize` since it will be serialized as a normal JS number (replace with usize when we switch to a native UI)
@@ -368,6 +368,7 @@ pub struct DropdownInput {
 	pub selected_index: Option<u32>,
 	#[serde(rename = "drawIcon")]
 	pub draw_icon: bool,
+	#[derivative(Default(value = "true"))]
 	pub interactive: bool,
 	// `on_update` exists on the `DropdownEntryData`, not this parent `DropdownInput`
 	pub disabled: bool,
diff --git a/frontend/src/components/floating-menus/DialogModal.vue b/frontend/src/components/floating-menus/DialogModal.vue
index d9b090f5a6..3fc8c72d11 100644
--- a/frontend/src/components/floating-menus/DialogModal.vue
+++ b/frontend/src/components/floating-menus/DialogModal.vue
@@ -93,7 +93,7 @@ export default defineComponent({
 	mounted() {
 		// Focus the first button in the popup
 		const element = this.$el as Element | null;
-		const emphasizedOrFirstButton = (element?.querySelector("[data-emphasized]") as HTMLButtonElement | null) || element?.querySelector("button");
+		const emphasizedOrFirstButton = (element?.querySelector("[data-emphasized]") as HTMLButtonElement | null) || element?.querySelector("[data-text-button]");
 		emphasizedOrFirstButton?.focus();
 	},
 });
diff --git a/frontend/src/components/widgets/buttons/TextButton.vue b/frontend/src/components/widgets/buttons/TextButton.vue
index 0d2b07a905..a3e2493024 100644
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/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)"
 	>

From f8d695e9a8eb7cf9646e60bdc40af05443831ea2 Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Wed, 25 May 2022 17:26:26 +0100
Subject: [PATCH 11/16] Fix highlighted entry regression

---
 frontend/src/components/floating-menus/MenuList.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/floating-menus/MenuList.vue b/frontend/src/components/floating-menus/MenuList.vue
index 41dece4743..de84017b1f 100644
--- a/frontend/src/components/floating-menus/MenuList.vue
+++ b/frontend/src/components/floating-menus/MenuList.vue
@@ -194,6 +194,7 @@ const MenuList = defineComponent({
 		// Called only when `open` is changed from outside this component (with v-model)
 		open(newOpen: boolean) {
 			this.isOpen = newOpen;
+			this.highlighted = this.activeEntry;
 		},
 		isOpen(newIsOpen: boolean) {
 			this.$emit("update:open", newIsOpen);
@@ -264,6 +265,7 @@ const MenuList = defineComponent({
 			if (!menuOpen && (e.key === " " || e.key === "Enter")) {
 				// Allow opening menu with space or enter
 				this.isOpen = true;
+				this.highlighted = this.activeEntry;
 			} else if (menuOpen && openChild >= 0) {
 				// Redirect the keyboard navigation to a submenu if one is open
 				const shouldCloseStack = flatEntries[openChild].ref?.keydown(e, true);

From a3a8b72b764864fe82bb4757d8376949096dd46b Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 25 May 2022 11:27:07 -0700
Subject: [PATCH 12/16] Styling and disabling checkbox tabindex in MenuLists

---
 frontend/src/App.vue                                     | 7 ++++---
 frontend/src/components/floating-menus/MenuList.vue      | 2 +-
 frontend/src/components/widgets/inputs/CheckboxInput.vue | 3 ++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e4e37f396a..5ba2482389 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -200,9 +200,10 @@ img {
 .radio-input button,
 .menu-list,
 .menu-bar-input .entry {
-	&:focus {
-		outline: 1px solid var(--color-accent);
-		outline-offset: 2px;
+	&:focus-visible,
+	&.dropdown-box:focus {
+		outline: 1px dashed var(--color-accent);
+		outline-offset: -1px;
 	}
 }
 
diff --git a/frontend/src/components/floating-menus/MenuList.vue b/frontend/src/components/floating-menus/MenuList.vue
index de84017b1f..c35bcb29de 100644
--- a/frontend/src/components/floating-menus/MenuList.vue
+++ b/frontend/src/components/floating-menus/MenuList.vue
@@ -20,7 +20,7 @@
 				@pointerenter="() => onEntryPointerEnter(entry)"
 				@pointerleave="() => onEntryPointerLeave(entry)"
 			>
-				<CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" class="entry-checkbox" />
+				<CheckboxInput v-if="entry.checkbox" v-model:checked="entry.checked" :outlineStyle="true" :disableTabIndex="true" class="entry-checkbox" />
 				<IconLabel v-else-if="entry.icon && drawIcon" :icon="entry.icon" class="entry-icon" />
 				<div v-else-if="drawIcon" class="no-icon"></div>
 
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.vue b/frontend/src/components/widgets/inputs/CheckboxInput.vue
index 24741e0c84..2b5c59e01c 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.vue
+++ b/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}`" tabindex="0" @keydown.enter="(e) => ((e.target as HTMLElement).previousSibling as HTMLInputElement).click()">
+		<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>
@@ -107,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,

From 7e79b16beb75a6d76b1ee5c64c819916b70e619b Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Wed, 25 May 2022 21:17:44 +0100
Subject: [PATCH 13/16] Don't redirect space off canvas to backend

---
 frontend/src/io-managers/input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts
index a61b287878..7b2f3e20a3 100644
--- a/frontend/src/io-managers/input.ts
+++ b/frontend/src/io-managers/input.ts
@@ -67,7 +67,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
 
 		// Don't redirect tab or enter if not in canvas (to allow navigating elements)
 		const inCanvas = e.target instanceof Element && e.target.closest("[data-canvas]");
-		if (!inCanvas && ["tab", "enter", "arrowdown", "arrowup", "arrowleft", "arrowright"].includes(key.toLowerCase())) return false;
+		if (!inCanvas && ["tab", "enter", " ", "arrowdown", "arrowup", "arrowleft", "arrowright"].includes(key.toLowerCase())) return false;
 
 		// Redirect to the backend
 		return true;

From 0a9f197f7efda763dde8a521d35d65bb3467fe3b Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Wed, 25 May 2022 21:24:11 +0100
Subject: [PATCH 14/16] Do not emit update if value same

---
 frontend/src/components/floating-menus/MenuList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/floating-menus/MenuList.vue b/frontend/src/components/floating-menus/MenuList.vue
index c35bcb29de..ce1b5d9713 100644
--- a/frontend/src/components/floating-menus/MenuList.vue
+++ b/frontend/src/components/floating-menus/MenuList.vue
@@ -323,7 +323,7 @@ const MenuList = defineComponent({
 		setHighlighted(newHighlight: MenuListEntry<string> | undefined) {
 			this.highlighted = newHighlight;
 			// Interactive menus should keep the active entry the same as the highlighted one
-			if (this.interactive) this.$emit("update:activeEntry", newHighlight);
+			if (this.interactive && newHighlight?.value !== this.activeEntry?.value) this.$emit("update:activeEntry", newHighlight);
 		},
 	},
 	computed: {

From fb3a1ceb6860df2c08b1db4b110de81a310bc71e Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Wed, 25 May 2022 21:52:09 +0100
Subject: [PATCH 15/16] Escape closes all floating menus

---
 frontend/src/components/floating-menus/FloatingMenu.vue | 9 +++++++++
 frontend/src/components/floating-menus/MenuList.vue     | 1 +
 2 files changed, 10 insertions(+)

diff --git a/frontend/src/components/floating-menus/FloatingMenu.vue b/frontend/src/components/floating-menus/FloatingMenu.vue
index 98dd0a0174..ba9852296f 100644
--- a/frontend/src/components/floating-menus/FloatingMenu.vue
+++ b/frontend/src/components/floating-menus/FloatingMenu.vue
@@ -193,6 +193,7 @@ export default defineComponent({
 		windowEdgeMargin: { type: Number as PropType<number>, default: 6 },
 		scrollableY: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
+		escapeCloses: { type: Boolean as PropType<boolean>, default: true },
 	},
 	data() {
 		// The resize observer is attached to the floating menu container, which is the zero-height div of the width of the parent element's floating menu spawner.
@@ -374,6 +375,11 @@ export default defineComponent({
 				window.removeEventListener("pointerup", this.pointerUpHandler);
 			}
 		},
+		keyDownHandler(e: KeyboardEvent) {
+			if (this.escapeCloses && e.key.toLowerCase() === "escape") {
+				this.$emit("update:open", false);
+			}
+		},
 		pointerDownHandler(e: PointerEvent) {
 			// Close the floating menu if the pointer clicked outside the floating menu (but within stray distance)
 			if (this.isPointerEventOutsideFloatingMenu(e)) {
@@ -423,6 +429,8 @@ export default defineComponent({
 			if (newState && !oldState) {
 				// Close floating menu if pointer strays far enough away
 				window.addEventListener("pointermove", this.pointerMoveHandler);
+				// Close floating menu if esc is pressed
+				window.addEventListener("keydown", this.keyDownHandler);
 				// Close floating menu if pointer is outside (but within stray distance)
 				window.addEventListener("pointerdown", this.pointerDownHandler);
 				// Cancel the subsequent click event to prevent the floating menu from reopening if the floating menu's button is the click event target
@@ -444,6 +452,7 @@ export default defineComponent({
 				this.containerResizeObserver.disconnect();
 
 				window.removeEventListener("pointermove", this.pointerMoveHandler);
+				window.removeEventListener("keydown", this.keyDownHandler);
 				window.removeEventListener("pointerdown", this.pointerDownHandler);
 				// The `pointerup` event is removed in `pointerMoveHandler()` and `pointerDownHandler()`
 			}
diff --git a/frontend/src/components/floating-menus/MenuList.vue b/frontend/src/components/floating-menus/MenuList.vue
index ce1b5d9713..fd125c1440 100644
--- a/frontend/src/components/floating-menus/MenuList.vue
+++ b/frontend/src/components/floating-menus/MenuList.vue
@@ -5,6 +5,7 @@
 		@naturalWidth="(newNaturalWidth: number) => $emit('naturalWidth', newNaturalWidth)"
 		:type="'Dropdown'"
 		:windowEdgeMargin="0"
+		:escapeCloses="false"
 		v-bind="{ direction, scrollableY, minWidth }"
 		ref="floatingMenu"
 		data-hover-menu-keep-open

From 8752110d69a1dc0cfffe70dcf8ca10c0c630d442 Mon Sep 17 00:00:00 2001
From: 0hypercube <0hypercube@gmail.com>
Date: Wed, 25 May 2022 21:56:29 +0100
Subject: [PATCH 16/16] Close dropdowns on blur

---
 .../src/components/widgets/inputs/DropdownInput.vue |  1 +
 .../src/components/widgets/inputs/MenuBarInput.vue  | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index 1737a2e705..15840f1b0e 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/frontend/src/components/widgets/inputs/DropdownInput.vue
@@ -6,6 +6,7 @@
 			:style="{ minWidth: `${minWidth}px` }"
 			tabindex="0"
 			@click="() => !disabled && (open = true)"
+			@blur="() => (open = false)"
 			@keydown="(e) => keydown(e)"
 			ref="dropdownBox"
 			data-hover-menu-spawner
diff --git a/frontend/src/components/widgets/inputs/MenuBarInput.vue b/frontend/src/components/widgets/inputs/MenuBarInput.vue
index 534414b90f..be092e3b6e 100644
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -6,7 +6,15 @@
 			</button>
 		</div>
 		<div class="entry-container" v-for="(entry, index) in entries" :key="index">
-			<div @click="(e) => onClick(entry, e.target)" tabindex="0" @keydown="entry.ref?.keydown" 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>
@@ -217,6 +225,9 @@ export default defineComponent({
 			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