From 76952922bfcb54ae687afd4909c50132b00f077e Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Mon, 2 Jun 2025 11:40:57 +0200
Subject: [PATCH] feat: add tabbing for channels list, members list, and
 messages

---
 components/Channel.vue                            | 8 ++++----
 components/Message.vue                            | 4 ++--
 pages/servers/[serverId]/channels/[channelId].vue | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/Channel.vue b/components/Channel.vue
index a41974a..1828641 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
-	<NuxtLink class="channel-list-link" :href="props.href">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
+	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container rounded-corners">
-	<NuxtLink class="channel-list-link" :href="props.href">
+  <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
+	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>
diff --git a/components/Message.vue b/components/Message.vue
index 3979a88..64af1d9 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }" tabindex="0">
 		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
@@ -16,7 +16,7 @@
 			<div class="message-text" v-html="sanitized"></div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message">
+	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
 		<div class="left-column">
 			<div>
 				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index f931863..31efe9b 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -26,7 +26,7 @@
 		<MessageArea :channel-url="channelUrlPath" />
 		<div id="members-container">
 			<div id="members-list">
-				<div class="member-item" v-for="member of members">
+				<div class="member-item" v-for="member of members" tabindex="0">
 					<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
 					<Icon v-else class="member-avatar" name="lucide:user" />
 					<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>