From bbf057c84b0d455ea4eefa3762d0201fd060cc61 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 26 May 2021 03:04:37 +0100
Subject: [PATCH] ServerList keyboard controls

---
 src/components/sidebar/ServerList.vue     |  2 +-
 src/components/sidebar/ServerListItem.vue | 20 +++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/ServerList.vue b/src/components/sidebar/ServerList.vue
index 1236e87..efdddf3 100644
--- a/src/components/sidebar/ServerList.vue
+++ b/src/components/sidebar/ServerList.vue
@@ -18,7 +18,7 @@
 	<CollapsibleSection v-if="servers.size > 1" name="servers">
 		<template v-slot:heading>{{ heading }}</template>
 		<template v-slot:default>
-			<ul class="section__content menu" role="listbox">
+			<ul class="section__content menu" role="listbox" aria-labelledby="servers-heading">
 				<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
 			</ul>
 		</template>
diff --git a/src/components/sidebar/ServerListItem.vue b/src/components/sidebar/ServerListItem.vue
index d34944b..e467867 100644
--- a/src/components/sidebar/ServerListItem.vue
+++ b/src/components/sidebar/ServerListItem.vue
@@ -15,9 +15,10 @@
   -->
 
 <template>
-	<li :class="{'server': true, 'server--selected': currentServer && server.id === currentServer.id}">
-		<button type="button" :class="{'active': currentServer && server.id === currentServer.id}"
-			:title="server.label || server.id" @click="setCurrentServer(server.id)">{{ server.label || server.id }}
+	<li :class="{'server': true, 'server--selected': selected}" role="none">
+		<button type="button" :class="{'active': selected}"
+		        role="menuitemradio" :aria-checked="selected" :title="server.label || server.id"
+			    @click="setCurrentServer(server.id)" @keydown="(e) => handleKeydown(e, server.id)">{{ server.label || server.id }}
 		</button>
 	</li>
 </template>
@@ -40,10 +41,23 @@ export default defineComponent({
 	computed: {
 		currentServer(): LiveAtlasServerDefinition | undefined {
 			return useStore().state.currentServer;
+		},
+		selected(): boolean {
+			return this.currentServer && this.server.id === this.currentServer.id;
 		}
 	},
 
 	methods: {
+		handleKeydown(e: KeyboardEvent, serverId: string) {
+			if(e.key !== ' ' && e.key !== 'Enter') {
+				return;
+			}
+
+			e.preventDefault();
+
+			this.setCurrentServer(serverId);
+		},
+
 		setCurrentServer(serverId: string) {
 			useStore().commit(MutationTypes.SET_CURRENT_SERVER, serverId);
 		}