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

@@ -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" />

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;

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"

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">

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"

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"

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">

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">