a11y: more cosmetic ARIA changes

This commit is contained in:
2025-08-22 19:08:59 +02:00
parent b312065d3d
commit 420ff46f05

View File

@@ -12,9 +12,11 @@
class="channel-button" class="channel-button"
@click="$emit('select', channel.id)" @click="$emit('select', channel.id)"
@focus="handleFocus" @focus="handleFocus"
role="option"
:aria-current="isActive"
aria-selected="true"
@keydown="handleKeydown" @keydown="handleKeydown"
:tabindex="tabindex" :tabindex="tabindex"
:aria-pressed="isActive"
:aria-label="channelAriaLabel" :aria-label="channelAriaLabel"
> >
<span class="channel-name">{{ channel.name }}</span> <span class="channel-name">{{ channel.name }}</span>
@@ -58,7 +60,7 @@ const props = defineProps<Props>()
// Better ARIA label that announces the channel name and unread count // Better ARIA label that announces the channel name and unread count
const channelAriaLabel = computed(() => { const channelAriaLabel = computed(() => {
let label = `${props.channel.name} channel` let label = `#${props.channel.name}`
if (props.unreadCount) { if (props.unreadCount) {
label += `, ${props.unreadCount} unread message${props.unreadCount > 1 ? 's' : ''}` label += `, ${props.unreadCount} unread message${props.unreadCount > 1 ? 's' : ''}`
} }