Browsers already do what these listeners were doing

src/components/sidebar/CollapsibleSection.vue

@@ -1,7 +1,7 @@
 <template>
 	<section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}">
 		<button :id="`${name}-heading`" type="button" class="section__heading"
-		        @click.prevent="toggle" @keydown="handleKeydown" :title="title"
+		        @click.prevent="toggle" :title="title"
 		        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
 			<span>
 				<slot name="heading"></slot>
@@ -43,16 +43,6 @@
 		},
 
 		methods: {
-			handleKeydown(e: KeyboardEvent) {
-				if(e.key !== ' ' && e.key !== 'Enter') {
-					return;
-				}
-
-				e.preventDefault();
-
-				this.toggle();
-			},
-
 			toggle() {
 				useStore().commit(MutationTypes.TOGGLE_SIDEBAR_SECTION_COLLAPSED_STATE, this.name);
 			}

src/components/sidebar/FollowTarget.vue

@@ -25,8 +25,7 @@
 				<span class="target__status" v-show="target.hidden">{{ messageHidden }}</span>
 			</span>
 			<button class="target__unfollow" type="button" :title="messageUnfollowTitle"
-				@click.prevent="unfollow"
-				@keydown="onKeydown">{{ messageUnfollow }}</button>
+				@click.prevent="unfollow">{{ messageUnfollow }}</button>
 		</div>
 	</section>
 </template>
@@ -60,13 +59,6 @@ export default defineComponent({
 			unfollow = () => {
 				useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
 			},
-			onKeydown = (e: KeyboardEvent) => {
-				if(e.key !== ' ') {
-					return;
-				}
-
-				unfollow();
-			},
 			updatePlayerImage = async () => {
 				image.value = defaultImage;
 
@@ -83,7 +75,6 @@ export default defineComponent({
 
 		return {
 			image,
-			onKeydown,
 			unfollow,
 			heading,
 			messageUnfollow,

src/components/sidebar/ServerListItem.vue

@@ -18,7 +18,7 @@
 	<li :class="{'server': true, 'server--selected': selected}" role="none">
 		<button type="button" :class="{'active': selected}"
 		        role="option" :aria-pressed="selected" :title="server.label || server.id"
-			    @click="setCurrentServer(server.id)" @keydown="(e) => handleKeydown(e, server.id)">{{ server.label || server.id }}
+			    @click="setCurrentServer(server.id)">{{ server.label || server.id }}
 		</button>
 	</li>
 </template>
@@ -48,16 +48,6 @@ export default defineComponent({
 	},
 
 	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);
 		}