More accessibility things

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>

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;

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"
+		<h2>
-		        @click.prevent="toggle" :title="title"
+			<button :id="`${name}-heading`" type="button" class="section__heading"
-		        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
+			        @click.prevent="toggle" :title="title"
-			<span>
+			        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
-				<slot name="heading"></slot>
+				<span>
-			</span>
+					<slot name="heading"></slot>
-			<SvgIcon name="arrow"></SvgIcon>
+				</span>
-		</button>
+				<SvgIcon name="arrow"></SvgIcon>
+			</button>
+		</h2>
 		<div :id="`${name}-content`" role="region" :aria-labelledby="`${name}-heading`" :aria-hidden="collapsed">
 			<slot></slot>
 		</div>

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;

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);