nanka iroiro

src/client/components/menu.vue

@@ -1,6 +1,6 @@
 <template>
-<x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
-	<sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction">
+<x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
+	<sequential-entrance class="rrevdjwt" :class="{ left: align === 'left' }" :delay="15" :direction="direction" ref="items">
 		<template v-for="(item, i) in items.filter(item => item !== undefined)">
 			<div v-if="item === null" class="divider" :key="i"></div>
 			<span v-else-if="item.type === 'label'" class="label item" :key="i">
@@ -36,6 +36,7 @@
 import Vue from 'vue';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';
 import XPopup from './popup.vue';
+import { focusPrev, focusNext } from '../scripts/focus';
 
 export default Vue.extend({
 	components: {
@@ -69,12 +70,31 @@ export default Vue.extend({
 			type: String,
 			required: false
 		},
+		viaKeyboard: {
+			type: Boolean,
+			required: false
+		},
 	},
 	data() {
 		return {
 			faCircle
 		};
 	},
+	computed: {
+		keymap(): any {
+			return {
+				'up|k|shift+tab': this.focusUp,
+				'down|j|tab': this.focusDown,
+			};
+		},
+	},
+	mounted() {
+		if (this.viaKeyboard) {
+			this.$nextTick(() => {
+				focusNext(this.$refs.items.$slots.default[0].elm, true);
+			});
+		}
+	},
 	methods: {
 		clicked(fn) {
 			fn();
@@ -82,6 +102,12 @@ export default Vue.extend({
 		},
 		close() {
 			this.$refs.popup.close();
+		},
+		focusUp() {
+			focusPrev(document.activeElement);
+		},
+		focusDown() {
+			focusNext(document.activeElement);
 		}
 	}
 });
@@ -119,6 +145,10 @@ export default Vue.extend({
 			background: var(--accentDarken);
 		}
 
+		&:not(:active):focus {
+			box-shadow: 0 0 0 2px var(--focus) inset;
+		}
+
 		&.label {
 			pointer-events: none;
 			font-size: 0.7em;