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

client/components/Channel.vue

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

client/components/ChannelWrapper.vue

@@ -2,8 +2,8 @@
 	<div
 		v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)"
 		:class="[ channel.type, { active: activeChannel && channel === activeChannel.channel } ]"
-		:aria-label="channel.name"
-		:title="channel.name"
+		:aria-label="getAriaLabel()"
+		:title="getAriaLabel()"
 		:data-id="channel.id"
 		:data-target="'#chan-' + channel.id"
 		:aria-controls="'#chan-' + channel.id"
@@ -25,5 +25,24 @@ export default {
 		channel: 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>