fix/a11y: fix focus server input, double focus on messsages view and show only active channel info button

frontend-vue/src/components/chat/MessageItem.vue

@@ -5,7 +5,7 @@
       { 'message--unsent': isUnsent }
     ]"
     :data-message-id="message.id"
-    :tabindex="tabindex || 0"
+    :tabindex="tabindex || -1"
     :aria-label="messageAriaLabel"
     role="listitem"
     @keydown="handleKeydown"

frontend-vue/src/components/chat/MessagesContainer.vue

@@ -1,33 +1,16 @@
 <template>
-  <div 
+  <div class="messages-container" ref="containerRef" @keydown="handleKeydown" tabindex="0" role="list"
-    class="messages-container" 
+    :aria-label="messagesAriaLabel">
-    ref="containerRef"
-    @keydown="handleKeydown"
-    tabindex="0"
-    role="list"
-    :aria-label="messagesAriaLabel"
-  >
     <div class="messages" role="presentation">
       <!-- Regular Messages -->
-      <MessageItem
+      <MessageItem v-for="(message, index) in messages" :key="message.id" :message="message"
-        v-for="(message, index) in messages"
+        :tabindex="index === focusedMessageIndex ? 0 : -1" :data-message-index="index"
-        :key="message.id"
+        @focus="focusedMessageIndex = index" />
-        :message="message"
-        :tabindex="index === focusedMessageIndex ? 0 : -1"
-        :data-message-index="index"
-        @focus="focusedMessageIndex = index"
-      />
 
       <!-- Unsent Messages -->
-      <MessageItem
+      <MessageItem v-for="(unsentMsg, index) in unsentMessages" :key="unsentMsg.id" :message="unsentMsg"
-        v-for="(unsentMsg, index) in unsentMessages"
+        :is-unsent="true" :tabindex="(messages.length + index) === focusedMessageIndex ? 0 : -1"
-        :key="unsentMsg.id"
+        :data-message-index="messages.length + index" @focus="focusedMessageIndex = messages.length + index" />
-        :message="unsentMsg"
-        :is-unsent="true"
-        :tabindex="(messages.length + index) === focusedMessageIndex ? 0 : -1"
-        :data-message-index="messages.length + index"
-        @focus="focusedMessageIndex = messages.length + index"
-      />
     </div>
   </div>
 </template>
@@ -65,7 +48,7 @@ const messagesAriaLabel = computed(() => {
   } else if (total === 1) {
     return 'Messages list, 1 message'
   } else {
-    return `Messages list, ${total} messages, currently focused on message ${current} of ${total}`
+    return `Messages list, ${total} messages`
   }
 })
 

frontend-vue/src/components/sidebar/ChannelListItem.vue

@@ -23,7 +23,7 @@
         </span>
       </button>
       
-      <button
+      <button v-if="isActive"
         class="channel-info-button"
         @click.stop="$emit('info', channel)"
         :aria-label="`Channel info for ${channel.name}`"

frontend-vue/src/views/AuthView.vue

@@ -9,6 +9,7 @@
       <form @submit.prevent="handleAuth" class="auth-form">
         <BaseInput
           v-model="serverUrl"
+          ref="serverInput"
           type="url"
           label="Server URL (optional)"
           :placeholder="defaultServerUrl"
@@ -59,7 +60,7 @@ const serverUrl = ref('')
 const error = ref('')
 const isLoading = ref(false)
 const tokenInput = ref()
-
+const serverInput = ref()
 // Get default server URL for placeholder
 const defaultServerUrl = authStore.getDefaultServerUrl()
 
@@ -80,7 +81,7 @@ const handleAuth = async () => {
       router.push('/')
     } else {
       error.value = 'Invalid authentication token or server URL'
-      tokenInput.value?.focus()
+      serverInput.value?.focus()
     }
   } catch (err) {
     error.value = 'Authentication failed. Please check your token and server URL.'
@@ -91,7 +92,7 @@ const handleAuth = async () => {
 }
 
 onMounted(() => {
-  tokenInput.value?.focus()
+  serverInput.value?.focus()
   playSound('intro')
 })
 </script>