Various accessibility improvements

src/components/SvgIcon.vue

@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <svg :class="className" xmlns="http://www.w3.org/2000/svg">
+  <svg :class="className" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <title v-if="title">{{ title }}</title>
     <use :xlink:href="iconPath" xmlns:xlink="http://www.w3.org/1999/xlink"/>
   </svg>

src/components/map/MapContextMenu.vue

@@ -1,23 +1,22 @@
 <template>
 	<nav id="map-context-menu" v-show="menuVisible" ref="menuElement" :style="style">
-		<button type="button" ref="focusMover" class="focus-mover"></button>
+		<div tabindex="0" ref="focusMover" class="focus-mover" aria-label="Context menu"></div>
-		<ul class="menu">
+		<ul class="menu" role="menu">
-			<li>
+			<li role="none">
-				<button type="button"
+				<button type="button" role="menuitem" v-clipboard:copy="locationCopy"
-				        v-clipboard:copy="locationCopy"
 				        v-clipboard:success="copySuccess"
 				        v-clipboard:error="copyError">{{ locationLabel }}
 				</button>
 			</li>
-			<li>
+			<li role="none">
-				<button type="button"
+				<button type="button" role="menuitem"
 				        v-clipboard:copy="url"
 				        v-clipboard:success="copySuccess"
 				        v-clipboard:error="copyError">{{ messageCopyLink }}
 				</button>
 			</li>
-			<li>
+			<li role="none">
-				<button type="button" @click.prevent="pan">{{ messageCenterHere }}</button>
+				<button type="button" role="menuitem" @click.prevent="pan">{{ messageCenterHere }}</button>
 			</li>
 			<WorldListItem v-if="currentWorld" :world="currentWorld"></WorldListItem>
 		</ul>

src/components/sidebar/PlayerList.vue

@@ -18,7 +18,7 @@
 	<CollapsibleSection name="players">
 		<template v-slot:heading>{{ heading }} [{{ players.size }}/{{ maxPlayers }}]</template>
 		<template v-slot:default>
-			<ul class="section__content menu">
+			<ul class="section__content menu" role="listbox">
 				<PlayerListItem v-for="[account, player] in players" :key="account" :player="player"></PlayerListItem>
 				<li v-if="!players.size" class="section__skeleton">{{ skeletonPlayers }}</li>
 			</ul>

src/components/sidebar/PlayerListItem.vue

@@ -16,11 +16,11 @@
 
 <template>
 	<li :class="{'player': true, 'player--hidden' : !!player.hidden, 'player--other-world': otherWorld}">
-		<img width="16" height="16" class="player__icon" :src="image" alt="" />
+		<img width="16" height="16" class="player__icon" :src="image" alt="" aria-hidden="true" />
 		<button class="player__name" type="button" :title="title"
 				:disbled="player.hidden"
 				@click.prevent="pan"
-				@keydown="onKeydown"
+				@keydown.prevent="onKeydown"
 				@dblclick.prevent="follow" v-html="player.name"></button>
 	</li>
 </template>

src/components/sidebar/ServerList.vue

@@ -18,7 +18,7 @@
 	<CollapsibleSection v-if="servers.size > 1" name="servers">
 		<template v-slot:heading>{{ heading }}</template>
 		<template v-slot:default>
-			<ul class="section__content menu">
+			<ul class="section__content menu" role="listbox">
 				<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
 			</ul>
 		</template>

src/components/sidebar/WorldList.vue

@@ -18,7 +18,7 @@
 	<CollapsibleSection name="maps">
 		<template v-slot:heading>{{ heading }}</template>
 		<template v-slot:default>
-			<ul class="section__content">
+			<ul class="section__content" role="listbox">
 				<WorldListItem :world="world" v-for="[name, world] in worlds" :key="name"></WorldListItem>
 				<li v-if="!worlds.size" class="section__skeleton">{{ skeletonWorlds }}</li>
 			</ul>

src/components/sidebar/WorldListItem.vue

@@ -15,11 +15,13 @@
   -->
 
 <template>
-	<li class="world">
+	<li class="world" role="none">
 		<span class="world__name">{{ world.title }}</span>
-		<ul class="world__maps">
+		<ul class="world__maps" role="menu">
-			<li :class="{'map': true, 'map--selected': map === currentMap}" v-for="[name, map] in world.maps" :key="name">
+			<li :class="{'map': true, 'map--selected': map === currentMap}" v-for="[name, map] in world.maps" :key="name" role="none">
-				<button type="button" :title="map.title" @click="setCurrentMap(map.name)" :aria-label="map.title">
+				<button role="menuitemradio" type="button" :title="`${world.title} - ${map.title}`"
+				        @click="setCurrentMap(map.name)" :aria-label="`${world.title} - ${map.title}`"
+				        :aria-checked="map === currentMap">
 					<SvgIcon :name="getMapIcon(map)"></SvgIcon>
 				</button>
 			</li>