fix: tabIndex not working after changing messages to use "display: contents;"

This commit is contained in:
SauceyRed 2025-06-03 20:50:28 +02:00
parent 82fde5671d
commit 263c823ceb
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462

View file

@ -1,19 +1,19 @@
<template> <template>
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message"> <div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
<div class="left-column"> <div class="left-column">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username"> <img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
<Icon v-else name="lucide:user" class="message-author-avatar" /> <Icon v-else name="lucide:user" class="message-author-avatar" />
</div> </div>
<div class="message-data"> <div class="message-data">
<div class="message-metadata"> <div class="message-metadata">
<span class="message-author-username"> <span class="message-author-username" tabindex="0">
{{ username }} {{ username }}
</span> </span>
<span class="message-date" :title="date.toString()"> <span class="message-date" :title="date.toString()">
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }} {{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
</span> </span>
</div> </div>
<div class="message-text" v-html="sanitized"></div> <div class="message-text" v-html="sanitized" tabindex="0"></div>
</div> </div>
</div> </div>
<div v-else ref="messageElement" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }"> <div v-else ref="messageElement" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<div class="message-data" :id="props.last ? 'last-message' : undefined"> <div class="message-data" :id="props.last ? 'last-message' : undefined">
<div class="message-text" v-html="sanitized"></div> <div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
</div> </div>
</div> </div>
</template> </template>