Improve usability

src/client/app/common/views/components/reaction-picker.vue

@@ -3,7 +3,7 @@
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ compact, big }" ref="popover">
 		<p v-if="!compact">{{ title }}</p>
-		<div>
+		<div ref="buttons" :class="{ showFocus }">
 			<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
 			<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
 			<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
@@ -50,12 +50,19 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+
+		showFocus: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 
 	data() {
 		return {
-			title: placeholder
+			title: placeholder,
+			focus: null
 		};
 	},
 
@@ -63,6 +70,9 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'esc': this.close,
+				'enter': this.choose,
+				'space': this.choose,
+				'numpad plus': this.choose,
 				'1': () => this.react('like'),
 				'numpad 1': () => this.react('like'),
 				'2': () => this.react('love'),
@@ -83,12 +93,24 @@ export default Vue.extend({
 				'numpad 9': () => this.react('rip'),
 				'0': () => this.react('pudding'),
 				'numpad 0': () => this.react('pudding'),
+				'up': this.focusUp,
+				'right': this.focusRight,
+				'down': this.focusDown,
+				'left': this.focusLeft,
 			};
 		}
 	},
 
+	watch: {
+		focus(i) {
+			this.$refs.buttons.childNodes[i].focus();
+		}
+	},
+
 	mounted() {
 		this.$nextTick(() => {
+			this.focus = 0;
+
 			const popover = this.$refs.popover as any;
 
 			const rect = this.source.getBoundingClientRect();
@@ -164,6 +186,26 @@ export default Vue.extend({
 					this.destroyDom();
 				}
 			});
+		},
+
+		focusUp() {
+			this.focus = this.focus == 0 ? 9 : this.focus < 5 ? (this.focus + 4) : (this.focus - 5);
+		},
+
+		focusDown() {
+			this.focus = this.focus == 9 ? 0 : this.focus >= 5 ? (this.focus - 4) : (this.focus + 5);
+		},
+
+		focusRight() {
+			this.focus = this.focus == 9 ? 0 : (this.focus + 1);
+		},
+
+		focusLeft() {
+			this.focus = this.focus == 0 ? 9 : (this.focus - 1);
+		},
+
+		choose() {
+			this.$refs.buttons.childNodes[this.focus].click();
 		}
 	}
 });
@@ -249,6 +291,21 @@ root(isDark)
 			width 240px
 			text-align center
 
+			&.showFocus
+				> button:focus
+					z-index 1
+
+					&:after
+						content ""
+						pointer-events none
+						position absolute
+						top 0
+						right 0
+						bottom 0
+						left 0
+						border 2px solid rgba($theme-color, 0.3)
+						border-radius 4px
+
 			> button
 				padding 0
 				width 40px