Put unreads and highlights in aria-label/title in the channel list

This commit is contained in:
Pavel Djundik 2018-10-05 12:14:30 +03:00
parent 759e69ed07
commit 89355e50c3
2 changed files with 22 additions and 5 deletions

View File

@ -3,9 +3,7 @@
:network="network" :network="network"
:channel="channel" :channel="channel"
:active-channel="activeChannel"> :active-channel="activeChannel">
<span <span class="name">{{ channel.name }}</span>
:title="channel.name"
class="name">{{ channel.name }}</span>
<span v-if="channel.type === 'channel' && channel.state === 0">(parted)</span> <span v-if="channel.type === 'channel' && channel.state === 0">(parted)</span>
<span <span
v-if="channel.unread" v-if="channel.unread"

View File

@ -2,8 +2,8 @@
<div <div
v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)" v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)"
:class="[ channel.type, { active: activeChannel && channel === activeChannel.channel } ]" :class="[ channel.type, { active: activeChannel && channel === activeChannel.channel } ]"
:aria-label="channel.name" :aria-label="getAriaLabel()"
:title="channel.name" :title="getAriaLabel()"
:data-id="channel.id" :data-id="channel.id"
:data-target="'#chan-' + channel.id" :data-target="'#chan-' + channel.id"
:aria-controls="'#chan-' + channel.id" :aria-controls="'#chan-' + channel.id"
@ -25,5 +25,24 @@ export default {
channel: Object, channel: Object,
activeChannel: Object, activeChannel: Object,
}, },
methods: {
getAriaLabel() {
const extra = [];
if (this.channel.unread > 0) {
extra.push(`${this.channel.unread} unread`);
}
if (this.channel.highlight > 0) {
extra.push(`${this.channel.highlight} mention`);
}
if (extra.length > 0) {
return `${this.channel.name} (${extra.join(", ")})`;
}
return this.channel.name;
},
},
}; };
</script> </script>