natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add aria-label to note container. This makes screen-readers read out the content while navigating with the keyboard.

This commit is contained in:
TalonTheDragon 2023-05-21 16:10:48 +02:00
parent 7dfb4ff3d4
commit 84ea25771d
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/client/src/components/MkNote.vue
View File

@ -1,19 +1,8 @@
<template>
<div
v-if="!muted.muted"
v-show="!isDeleted"
ref="el"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="tkcbzcuz note-container"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
>
<MkNoteSub
v-if="appearNote.reply && !detailedView"
:note="appearNote.reply"
class="reply-to"
/>
<div :aria-label="accessibleLabel" v-if="!muted.muted" v-show="!isDeleted" ref="el" v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }" class="tkcbzcuz note-container" :tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }">
<MkNoteSub v-if="appearNote.reply && !detailedView" :note="appearNote.reply" class="reply-to" />
<div v-if="!detailedView" class="note-context" @click="noteClick">
<div class="line"></div>
<div v-if="appearNote._prId_" class="info">
@ -472,6 +461,21 @@ function readPromo() {
isDeleted.value = true;
}
let accessibleLabel: string = getAccessibleLabel();
function getAccessibleLabel(): string {
let label = `${note.user.name ? note.user.name : note.user.username}: `;
if (note.cw && note.isHidden) {
label += `Content Warning: ${note.cw}`;
} else {
label += `${note.text}`;
}
label += `${note.createdAt.toLocaleUpperCase()}`;
return label;
}
defineExpose({
focus,
blur,