a11y: more cosmetic ARIA changes
This commit is contained in:
@@ -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' : ''}`
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user