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/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,