ServerList keyboard controls

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>

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);
 		}