Merge pull request #4201 from thelounge/maxleiter/accessiblityImprovements

Initial accessibility improvements

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

@@ -54,20 +54,25 @@ 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 this.channel.name;
+			return `${type}: ${this.channel.name} ${extra.length ? `(${extra.join(", ")})` : ""}`;
 		},
 		click() {
 			if (this.isFiltering) {

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"
@@ -93,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>

client/components/ChatUserList.vue

@@ -1,5 +1,10 @@
 <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"

client/components/Message.vue

@@ -13,8 +13,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>
@@ -47,23 +51,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" :network="network" :channel="channel" />
-					<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" :network="network" :channel="channel" />
-					<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,13 @@
 <template>
-	<div v-if="$store.state.networks.length === 0" class="empty">
+	<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">
+	<div v-else ref="networklist" role="navigation" aria-label="Network and Channel list">
 		<div class="jump-to-input">
 			<input
 				ref="searchInput"
@@ -74,6 +79,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/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;

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