From 89355e50c33efb390ecbb196253e8c1f3d77883f Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Fri, 5 Oct 2018 12:14:30 +0300
Subject: [PATCH] Put unreads and highlights in aria-label/title in the channel
 list

---
 client/components/Channel.vue        |  4 +---
 client/components/ChannelWrapper.vue | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/client/components/Channel.vue b/client/components/Channel.vue
index 7b6f30eb..09f706a5 100644
--- a/client/components/Channel.vue
+++ b/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"
diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index c9e4ba95..4eed18f3 100644
--- a/client/components/ChannelWrapper.vue
+++ b/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>