From 9e65a5859c03716eec28141488ee624d339457be Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Fri, 28 May 2021 15:55:17 +0100
Subject: [PATCH] Chatbox styling/accessibility improvements

---
 src/App.vue                     | 2 +-
 src/components/ChatBox.vue      | 6 +++---
 src/scss/leaflet/_controls.scss | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8907a99..0fa8b27 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,8 +16,8 @@
 
 <template>
 	<Map></Map>
-	<Sidebar></Sidebar>
 	<ChatBox v-if="chatBoxEnabled" v-show="chatBoxEnabled && chatVisible"></ChatBox>
+	<Sidebar></Sidebar>
 	<notifications position="bottom center" :speed="250" :max="3" :ignoreDuplicates="true" classes="notification" />
 </template>
 
diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue
index 4036e54..fabf300 100644
--- a/src/components/ChatBox.vue
+++ b/src/components/ChatBox.vue
@@ -16,12 +16,12 @@
 
 <template>
 	<section class="chat">
-		<ul class="chat__messages">
+		<ul class="chat__messages" role="log" aria-live="polite" aria-relevant="additions">
 			<ChatMessage v-for="message in chatMessages" :key="message.timestamp" :message="message"></ChatMessage>
-			<li v-if="!chatMessages.length" class="message message--skeleton">{{ messageNoMessages }}</li>
+			<li v-if="!chatMessages.length" class="message message--skeleton" role="none">{{ messageNoMessages }}</li>
 		</ul>
 		<form v-if="sendingEnabled" class="chat__form" @submit.prevent="sendMessage">
-			<div v-if="sendingError" class="chat__error">{{ sendingError }}</div>
+			<div role="alert" v-if="sendingError" class="chat__error">{{ sendingError }}</div>
 			<input ref="chatInput" v-model="enteredMessage" class="chat__input" type="text" :maxlength="maxMessageLength"
 					:placeholder="messagePlaceholder"  :disabled="sendingMessage">
 			<button class="chat__send" :disabled="!enteredMessage || sendingMessage">{{ messageSend }}</button>
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 84339de..d211d2e 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -242,6 +242,7 @@
 	.leaflet-control-chat {
 		margin-top: auto;
 		order: 1000;
+		margin-bottom: 0;
 	}
 
 	.leaflet-control-zoom {