From cc5b1afb3e6d8bdaf44b2443f2d70f944c568d34 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 26 May 2021 20:09:00 +0100
Subject: [PATCH] More accessibility things

---
 index.html                                    |  2 +-
 src/components/Sidebar.vue                    | 14 +++++++++-----
 src/components/sidebar/CollapsibleSection.vue | 18 ++++++++++--------
 src/leaflet/control/ClockControl.ts           |  8 ++++----
 src/leaflet/control/DynmapLayerControl.ts     | 12 ++++++++++++
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index c730e71..672ea54 100644
--- a/index.html
+++ b/index.html
@@ -308,7 +308,7 @@
         <strong>LiveAtlas requires JavaScript to work.<br />Please enable it to continue.</strong>
     </noscript>
 
-    <div id="app"></div>
+    <main id="app"></main>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 9ddf89d..a251986 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -15,24 +15,27 @@
   -->
 
 <template>
-	<aside class="sidebar">
+	<section class="sidebar" role="none">
 		<header class="sidebar__buttons">
 			<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':currentlyVisible.has('maps')}"
-					@click="toggleElement('maps')" :title="messageWorlds" :aria-label="messageWorlds">
+					@click="toggleElement('maps')" :title="messageWorlds"
+					:aria-label="messageWorlds" :aria-expanded="currentlyVisible.has('maps')">
 				<SvgIcon name="maps"></SvgIcon>
 			</button>
 			<button :class="{'button--players': true, 'active': currentlyVisible.has('players')}"
-					@click="toggleElement('players')" :title="messagePlayers" :aria-label="messagePlayers">
+					@click="toggleElement('players')" :title="messagePlayers"
+					:aria-label="messagePlayers" :aria-expanded="currentlyVisible.has('players')">
 				<SvgIcon name="players"></SvgIcon>
 			</button>
 		</header>
 		<div class="sidebar__content" @keydown="handleKeydown">
 			<ServerList v-if="serverCount > 1" v-show="currentlyVisible.has('maps')"></ServerList>
 			<WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
-			<PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList>
+			<PlayerList id="players" v-if="previouslyVisible.has('players')"
+			            v-show="currentlyVisible.has('players')"></PlayerList>
 			<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
 		</div>
-	</aside>
+	</section>
 </template>
 
 <script lang="ts">
@@ -241,6 +244,7 @@ export default defineComponent({
 			text-align: left;
 			display: flex;
 			align-items: center;
+			width: calc(100% + 3rem);
 
 			&:hover, &:focus-visible, &.focus-visible, &:active {
 				background-color: transparent;
diff --git a/src/components/sidebar/CollapsibleSection.vue b/src/components/sidebar/CollapsibleSection.vue
index 63f9025..260697b 100644
--- a/src/components/sidebar/CollapsibleSection.vue
+++ b/src/components/sidebar/CollapsibleSection.vue
@@ -1,13 +1,15 @@
 <template>
 	<section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}">
-		<button :id="`${name}-heading`" type="button" class="section__heading"
-		        @click.prevent="toggle" :title="title"
-		        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
-			<span>
-				<slot name="heading"></slot>
-			</span>
-			<SvgIcon name="arrow"></SvgIcon>
-		</button>
+		<h2>
+			<button :id="`${name}-heading`" type="button" class="section__heading"
+			        @click.prevent="toggle" :title="title"
+			        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
+				<span>
+					<slot name="heading"></slot>
+				</span>
+				<SvgIcon name="arrow"></SvgIcon>
+			</button>
+		</h2>
 		<div :id="`${name}-content`" role="region" :aria-labelledby="`${name}-heading`" :aria-hidden="collapsed">
 			<slot></slot>
 		</div>
diff --git a/src/leaflet/control/ClockControl.ts b/src/leaflet/control/ClockControl.ts
index 37eb80d..150b7c0 100644
--- a/src/leaflet/control/ClockControl.ts
+++ b/src/leaflet/control/ClockControl.ts
@@ -67,11 +67,11 @@ export class ClockControl extends Control {
 		this._moon.style.transform = 'translate(-150px, -150px)';
 
 		this._sun!.innerHTML = `
-		<svg class="svg-icon">
+		<svg class="svg-icon" aria-hidden="true">
 	  		<use xlink:href="#clock_sun" />
 		</svg>`;
 		this._moon!.innerHTML = `
-		<svg class="svg-icon">
+		<svg class="svg-icon" aria-hidden="true">
 	  		<use xlink:href="#clock_moon" />
 		</svg>`;
 
@@ -154,7 +154,7 @@ export class ClockControl extends Control {
 	_setSunIcon(icon: string) {
 		if(this._sun && this._currentSunIcon !== icon) {
 			this._sun!.innerHTML = `
-				<svg class="svg-icon">
+				<svg class="svg-icon" aria-hidden="true">
 					<use xlink:href="#${icon}" />
 				</svg>`;
 			this._currentSunIcon = icon;
@@ -164,7 +164,7 @@ export class ClockControl extends Control {
 	_setMoonIcon(icon: string) {
 		if(this._moon && this._currentMoonIcon !== icon) {
 			this._moon!.innerHTML = `
-				<svg class="svg-icon">
+				<svg class="svg-icon" aria-hidden="true">
 					<use xlink:href="#${icon}" />
 				</svg>`;
 			this._currentMoonIcon = icon;
diff --git a/src/leaflet/control/DynmapLayerControl.ts b/src/leaflet/control/DynmapLayerControl.ts
index 4c4ce7c..5278362 100644
--- a/src/leaflet/control/DynmapLayerControl.ts
+++ b/src/leaflet/control/DynmapLayerControl.ts
@@ -54,6 +54,9 @@ export class DynmapLayerControl extends Control.Layers {
 		// @ts-ignore
 		const element = super.onAdd(map);
 
+		this._layersLink!.parentElement!.removeAttribute('aria-haspopup');
+		this._layersLink!.setAttribute('role', 'button');
+		this._layersLink!.setAttribute('aria-expanded', 'false');
 		this._layersLink!.innerHTML = `
 		<svg class="svg-icon" aria-hidden="true">
 		  <use xlink:href="#layers" />
@@ -70,12 +73,21 @@ export class DynmapLayerControl extends Control.Layers {
 	expand() {
 		// @ts-ignore
 		DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+		this._layersLink!.setAttribute('aria-expanded', 'true');
 
 		// @ts-ignore
 		super._checkDisabledLayers();
 		return this;
 	}
 
+	collapse() {
+		// @ts-ignore
+		DomUtil.removeClass(this._container, 'leaflet-control-layers-expanded');
+		this._layersLink!.setAttribute('aria-expanded', 'false');
+
+		return this;
+	}
+
 	addOverlayAtPosition(layer: Layer, name: string, position: number): this {
 		this._layerPositions.set(layer, position);
 		return super.addOverlay(layer, name);