Chatbox styling/accessibility improvements

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>
 

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>

src/scss/leaflet/_controls.scss

@@ -242,6 +242,7 @@
 	.leaflet-control-chat {
 		margin-top: auto;
 		order: 1000;
+		margin-bottom: 0;
 	}
 
 	.leaflet-control-zoom {