From 0aabacd549fa374ea58416a75775cfcc07e68de1 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Tue, 20 Apr 2021 18:04:31 -0700
Subject: [PATCH 1/5] Initial accessibility improvements

Set aria-hidden to true for cosmetic and repetitive elements
Improve channel/network aria labels in network list
Experiment with different aria-roles for landmarks
---
 client/components/App.vue              |  7 ++++++-
 client/components/ChannelWrapper.vue   | 15 ++++++++++++---
 client/components/Chat.vue             |  4 +++-
 client/components/Message.vue          | 20 ++++++++++++--------
 client/components/NetworkList.vue      |  5 +++--
 client/components/Sidebar.vue          |  2 ++
 client/components/Windows/Settings.vue |  4 ++--
 client/index.html.tpl                  |  4 ++--
 8 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/client/components/App.vue b/client/components/App.vue
index b136874f..376767f2 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -1,7 +1,12 @@
 <template>
 	<div id="viewport" :class="viewportClasses" role="tablist">
 		<Sidebar v-if="$store.state.appLoaded" :overlay="$refs.overlay" />
-		<div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" />
+		<div
+			aria-hidden="true"
+			id="sidebar-overlay"
+			ref="overlay"
+			@click="$store.commit('sidebarOpen', false)"
+		/>
 		<router-view ref="window"></router-view>
 		<Mentions />
 		<ImageViewer ref="imageViewer" />
diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index c979007f..78904f06 100644
--- a/client/components/ChannelWrapper.vue
+++ b/client/components/ChannelWrapper.vue
@@ -52,17 +52,26 @@ export default {
 	methods: {
 		getAriaLabel() {
 			const extra = [];
+			const type = this.channel.type;
 
 			if (this.channel.unread > 0) {
-				extra.push(`${this.channel.unread} unread`);
+				if (this.channel.unread > 1) {
+					extra.push(`${this.channel.unread} unread messages`);
+				} else {
+					extra.push(`${this.channel.unread} unread message`);
+				}
 			}
 
 			if (this.channel.highlight > 0) {
-				extra.push(`${this.channel.highlight} mention`);
+				if (this.channel.highlight > 1) {
+					extra.push(`${this.channel.highlight} mentions`);
+				} else {
+					extra.push(`${this.channel.highlight} mention`);
+				}
 			}
 
 			if (extra.length > 0) {
-				return `${this.channel.name} (${extra.join(", ")})`;
+				return `${type}: ${this.channel.name} (${extra.join(", ")})`;
 			}
 
 			return this.channel.name;
diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 79be4d74..24e54b7b 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -18,7 +18,9 @@
 			>
 				<div class="header">
 					<SidebarToggle />
-					<span class="title">{{ channel.name }}</span>
+					<span class="title" :aria-label="'Currently open ' + channel.type">{{
+						channel.name
+					}}</span>
 					<div v-if="channel.editTopic === true" class="topic-container">
 						<input
 							ref="topicInput"
diff --git a/client/components/Message.vue b/client/components/Message.vue
index e931ac46..7e807af9 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -9,8 +9,12 @@
 		:data-command="message.command"
 		:data-from="message.from && message.from.nick"
 	>
-		<span :aria-label="messageTimeLocale" class="time tooltipped tooltipped-e"
-			>{{ messageTime }}
+		<span
+			aria-hidden="true"
+			:aria-label="messageTimeLocale"
+			class="time tooltipped tooltipped-e"
+		>
+			{{ messageTime }}
 		</span>
 		<template v-if="message.type === 'unhandled'">
 			<span class="from">[{{ message.command }}]</span>
@@ -40,23 +44,23 @@
 		<template v-else>
 			<span v-if="message.type === 'message'" class="from">
 				<template v-if="message.from && message.from.nick">
-					<span class="only-copy">&lt;</span>
+					<span class="only-copy" aria-hidden="true">&lt;</span>
 					<Username :user="message.from" />
-					<span class="only-copy">&gt; </span>
+					<span class="only-copy" aria-hidden="true">&gt; </span>
 				</template>
 			</span>
 			<span v-else-if="message.type === 'plugin'" class="from">
 				<template v-if="message.from && message.from.nick">
-					<span class="only-copy">[</span>
+					<span class="only-copy" aria-hidden="true">[</span>
 					{{ message.from.nick }}
-					<span class="only-copy">] </span>
+					<span class="only-copy" aria-hidden="true">] </span>
 				</template>
 			</span>
 			<span v-else class="from">
 				<template v-if="message.from && message.from.nick">
-					<span class="only-copy">-</span>
+					<span class="only-copy" aria-hidden="true">-</span>
 					<Username :user="message.from" />
-					<span class="only-copy">- </span>
+					<span class="only-copy" aria-hidden="true">- </span>
 				</template>
 			</span>
 			<span class="content" dir="auto">
diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index 607f3752..2a7a86ff 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -1,8 +1,8 @@
 <template>
-	<div v-if="$store.state.networks.length === 0" class="empty">
+	<div v-if="$store.state.networks.length === 0" class="empty" role="navigation">
 		You are not connected to any networks yet.
 	</div>
-	<div v-else ref="networklist">
+	<div v-else ref="networklist" role="navigation">
 		<div class="jump-to-input">
 			<input
 				ref="searchInput"
@@ -74,6 +74,7 @@
 				}"
 				class="network"
 				role="region"
+				aria-live="polite"
 			>
 				<NetworkLobby
 					:network="network"
diff --git a/client/components/Sidebar.vue b/client/components/Sidebar.vue
index 724dac00..bb056215 100644
--- a/client/components/Sidebar.vue
+++ b/client/components/Sidebar.vue
@@ -6,11 +6,13 @@
 					:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
 					class="logo"
 					alt="The Lounge"
+					role="presentation"
 				/>
 				<img
 					:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
 					class="logo-inverted"
 					alt="The Lounge"
+					role="presentation"
 				/>
 				<span
 					v-if="isDevelopment"
diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index c10c0fb9..898e1613 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -91,7 +91,7 @@
 						type="checkbox"
 						name="showSeconds"
 					/>
-					Show seconds in timestamp
+					Include seconds in timestamp
 				</label>
 			</div>
 			<div>
@@ -101,7 +101,7 @@
 						type="checkbox"
 						name="use12hClock"
 					/>
-					Show 12-hour timestamps
+					Use 12-hour timestamps
 				</label>
 			</div>
 			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
diff --git a/client/index.html.tpl b/client/index.html.tpl
index 847c9477..3557fcf1 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -52,8 +52,8 @@
 		<div id="loading">
 			<div class="window">
 				<div id="loading-status-container">
-					<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
-					<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
+					<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="" width="256" height="170">
+					<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="" width="256" height="170">
 					<p id="loading-page-message">The Lounge requires a modern browser with JavaScript enabled.</p>
 				</div>
 				<div id="loading-reload-container">

From 867fff33c093144965c4a3ded552a2313f1574c9 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Mon, 21 Jun 2021 21:55:54 -0700
Subject: [PATCH 2/5] Adjust chat layout so messages directly above input

---
 client/components/Chat.vue | 2 +-
 client/css/style.css       | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 24cdfe38..1761d4bc 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -95,13 +95,13 @@
 					>
 						<div class="scroll-down-arrow" />
 					</div>
+					<ChatUserList v-if="channel.type === 'channel'" :channel="channel" />
 					<MessageList
 						ref="messageList"
 						:network="network"
 						:channel="channel"
 						:focused="focused"
 					/>
-					<ChatUserList v-if="channel.type === 'channel'" :channel="channel" />
 				</div>
 			</div>
 		</div>
diff --git a/client/css/style.css b/client/css/style.css
index 080ad044..755282c9 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1147,6 +1147,7 @@ textarea.input {
 
 #chat .chat-content {
 	display: flex;
+	flex-direction: row-reverse;
 	flex-grow: 1;
 	overflow: hidden;
 	position: relative;

From 7107372a6f483647b02a16dbdd9c5cb4e92b7aef Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Mon, 21 Jun 2021 22:14:00 -0700
Subject: [PATCH 3/5] Fix channel alt text in user list to mention type

---
 client/components/ChannelWrapper.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index 61635372..62dcb297 100644
--- a/client/components/ChannelWrapper.vue
+++ b/client/components/ChannelWrapper.vue
@@ -72,11 +72,7 @@ export default {
 				}
 			}
 
-			if (extra.length > 0) {
-				return `${type}: ${this.channel.name} (${extra.join(", ")})`;
-			}
-
-			return this.channel.name;
+			return `${type}: ${this.channel.name} ${extra.length ? `(${extra.join(", ")})` : ""}`;
 		},
 		click() {
 			if (this.isFiltering) {

From f23cc0712c75acd24c3f07eca11e917700770bf5 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Mon, 21 Jun 2021 22:21:36 -0700
Subject: [PATCH 4/5] Aria-label improvements for chatuserlist/networklist

---
 client/components/ChatUserList.vue | 9 ++++++++-
 client/components/NetworkList.vue  | 9 +++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/components/ChatUserList.vue b/client/components/ChatUserList.vue
index bbb4f4f5..3ed9c216 100644
--- a/client/components/ChatUserList.vue
+++ b/client/components/ChatUserList.vue
@@ -1,5 +1,12 @@
 <template>
-	<aside ref="userlist" class="userlist" @mouseleave="removeHoverUser">
+	<aside
+		ref="userlist"
+		class="userlist"
+		@mouseleave="removeHoverUser"
+		aria-label="User List for "
+		+
+		channel.name
+	>
 		<div class="count">
 			<input
 				ref="input"
diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index 2a7a86ff..3b2de503 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -1,8 +1,13 @@
 <template>
-	<div v-if="$store.state.networks.length === 0" class="empty" role="navigation">
+	<div
+		v-if="$store.state.networks.length === 0"
+		class="empty"
+		role="navigation"
+		aria-label="Network and Channel list"
+	>
 		You are not connected to any networks yet.
 	</div>
-	<div v-else ref="networklist" role="navigation">
+	<div v-else ref="networklist" role="navigation" aria-label="Network and Channel list">
 		<div class="jump-to-input">
 			<input
 				ref="searchInput"

From 5a9f3c5f7066325b6c232330f30e7ab6123e6fb3 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Mon, 21 Jun 2021 22:26:43 -0700
Subject: [PATCH 5/5] Aria label for userlist

---
 client/components/ChatUserList.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/components/ChatUserList.vue b/client/components/ChatUserList.vue
index 3ed9c216..408a84cc 100644
--- a/client/components/ChatUserList.vue
+++ b/client/components/ChatUserList.vue
@@ -3,9 +3,7 @@
 		ref="userlist"
 		class="userlist"
 		@mouseleave="removeHoverUser"
-		aria-label="User List for "
-		+
-		channel.name
+		:aria-label="'User list for ' + channel.name"
 	>
 		<div class="count">
 			<input