From 36a2d483ff50ef46a284adfd95976d9e773fad3f Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 25 May 2021 23:28:43 +0100
Subject: [PATCH] Various accessibility improvements

---
 src/components/SvgIcon.vue                |  2 +-
 src/components/map/MapContextMenu.vue     | 17 ++++++++---------
 src/components/sidebar/PlayerList.vue     |  2 +-
 src/components/sidebar/PlayerListItem.vue |  4 ++--
 src/components/sidebar/ServerList.vue     |  2 +-
 src/components/sidebar/WorldList.vue      |  2 +-
 src/components/sidebar/WorldListItem.vue  | 10 ++++++----
 7 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
index 4f33433..a27f32b 100644
--- a/src/components/SvgIcon.vue
+++ b/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>
diff --git a/src/components/map/MapContextMenu.vue b/src/components/map/MapContextMenu.vue
index 3113e68..572d373 100644
--- a/src/components/map/MapContextMenu.vue
+++ b/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>
-		<ul class="menu">
-			<li>
-				<button type="button"
-				        v-clipboard:copy="locationCopy"
+		<div tabindex="0" ref="focusMover" class="focus-mover" aria-label="Context menu"></div>
+		<ul class="menu" role="menu">
+			<li role="none">
+				<button type="button" role="menuitem" v-clipboard:copy="locationCopy"
 				        v-clipboard:success="copySuccess"
 				        v-clipboard:error="copyError">{{ locationLabel }}
 				</button>
 			</li>
-			<li>
-				<button type="button"
+			<li role="none">
+				<button type="button" role="menuitem"
 				        v-clipboard:copy="url"
 				        v-clipboard:success="copySuccess"
 				        v-clipboard:error="copyError">{{ messageCopyLink }}
 				</button>
 			</li>
-			<li>
-				<button type="button" @click.prevent="pan">{{ messageCenterHere }}</button>
+			<li role="none">
+				<button type="button" role="menuitem" @click.prevent="pan">{{ messageCenterHere }}</button>
 			</li>
 			<WorldListItem v-if="currentWorld" :world="currentWorld"></WorldListItem>
 		</ul>
diff --git a/src/components/sidebar/PlayerList.vue b/src/components/sidebar/PlayerList.vue
index 0e5b6ef..ac2f5f9 100644
--- a/src/components/sidebar/PlayerList.vue
+++ b/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>
diff --git a/src/components/sidebar/PlayerListItem.vue b/src/components/sidebar/PlayerListItem.vue
index f89a108..5ab11ca 100644
--- a/src/components/sidebar/PlayerListItem.vue
+++ b/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>
diff --git a/src/components/sidebar/ServerList.vue b/src/components/sidebar/ServerList.vue
index f25c707..1236e87 100644
--- a/src/components/sidebar/ServerList.vue
+++ b/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>
diff --git a/src/components/sidebar/WorldList.vue b/src/components/sidebar/WorldList.vue
index f69fa3d..d0ea95a 100644
--- a/src/components/sidebar/WorldList.vue
+++ b/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>
diff --git a/src/components/sidebar/WorldListItem.vue b/src/components/sidebar/WorldListItem.vue
index 4253f99..9bed318 100644
--- a/src/components/sidebar/WorldListItem.vue
+++ b/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">
-			<li :class="{'map': true, 'map--selected': map === currentMap}" v-for="[name, map] in world.maps" :key="name">
-				<button type="button" :title="map.title" @click="setCurrentMap(map.name)" :aria-label="map.title">
+		<ul class="world__maps" role="menu">
+			<li :class="{'map': true, 'map--selected': map === currentMap}" v-for="[name, map] in world.maps" :key="name" role="none">
+				<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>