From edbdb712d5391c384dc376b488bdc9a2a4ee6434 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 27 Jun 2022 23:19:43 +0100
Subject: [PATCH] Workaround for firefox radio button tab bug

https://bugzilla.mozilla.org/show_bug.cgi?id=1413213
---
 src/components/list/MarkerList.vue    |  2 +-
 src/components/list/MarkerSetList.vue |  2 +-
 src/components/list/PlayerList.vue    |  2 +-
 src/components/list/ServerList.vue    |  2 +-
 src/components/list/WorldList.vue     |  2 +-
 src/components/util/RadioList.vue     | 18 ++++++++++++++++--
 src/util/events.ts                    |  5 +++++
 7 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/list/MarkerList.vue b/src/components/list/MarkerList.vue
index 508c923..7cc65d6 100644
--- a/src/components/list/MarkerList.vue
+++ b/src/components/list/MarkerList.vue
@@ -18,7 +18,7 @@
 	<input ref="searchInput" v-if="search && unfilteredTotal" id="markers__search" class="section__search" type="text"
 	       name="search" :value="searchQuery" :placeholder="messageMarkersSearchPlaceholder"
 	       @keydown="e => e.stopImmediatePropagation()" @input="onSearchInput">
-	<RadioList v-if="markers.size" v-bind="$attrs" @keydown="onListKeydown">
+	<RadioList v-if="markers.size" name="marker" v-bind="$attrs" @keydown="onListKeydown">
 		<MarkerListItem v-for="[id, marker] in markers" :key="id" :marker="marker" :id="id"></MarkerListItem>
 		<button type="button" ref="showMoreButton" v-if="viewLimit < total" @click.prevent="showMore">{{ messageShowMore }}</button>
 	</RadioList>
diff --git a/src/components/list/MarkerSetList.vue b/src/components/list/MarkerSetList.vue
index 953fd66..41127d9 100644
--- a/src/components/list/MarkerSetList.vue
+++ b/src/components/list/MarkerSetList.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-	<RadioList ref="list" v-if="!currentSet" :aria-labelledby="ariaLabelledby">
+	<RadioList ref="list" v-if="!currentSet" name="marker-set" :aria-labelledby="ariaLabelledby">
 		<template v-for="[id, markerSet] in markerSets" :key="id">
 			<input :id="`marker-set-${id}`" type="radio" name="marker-set" v-model="currentSet" v-bind:value="markerSet">
 			<label :for="`marker-set-${id}`">
diff --git a/src/components/list/PlayerList.vue b/src/components/list/PlayerList.vue
index 1a19775..ddfbe68 100644
--- a/src/components/list/PlayerList.vue
+++ b/src/components/list/PlayerList.vue
@@ -17,7 +17,7 @@
 <template>
 	<input ref="searchInput" v-if="filteredPlayers && search" class="section__search" type="text" name="search"
 			       v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
-	<RadioList v-if="filteredPlayers.length" :aria-labelledby="ariaLabelledby">
+	<RadioList v-if="filteredPlayers.length" name="player" :aria-labelledby="ariaLabelledby">
 		<PlayerListItem v-for="player in filteredPlayers" :key="player.name" :player="player"></PlayerListItem>
 	</RadioList>
 	<div v-else-if="searchQuery" class="section__skeleton">{{ messageSkeletonPlayersSearch }}</div>
diff --git a/src/components/list/ServerList.vue b/src/components/list/ServerList.vue
index d7ec69a..c166310 100644
--- a/src/components/list/ServerList.vue
+++ b/src/components/list/ServerList.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-	<RadioList aria-labelledby="servers-heading">
+	<RadioList name="server" aria-labelledby="servers-heading">
 		<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
 	</RadioList>
 </template>
diff --git a/src/components/list/WorldList.vue b/src/components/list/WorldList.vue
index b46227b..ee209d7 100644
--- a/src/components/list/WorldList.vue
+++ b/src/components/list/WorldList.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-	<RadioList v-if="worlds.size" aria-labelledby="maps-heading">
+	<RadioList v-if="worlds.size" name="map" aria-labelledby="maps-heading">
 		<WorldListItem :world="world" v-for="[name, world] in worlds" :key="`${prefix}_${currentServer}_${name}`"></WorldListItem>
 	</RadioList>
 </template>
diff --git a/src/components/util/RadioList.vue b/src/components/util/RadioList.vue
index b35c42e..bfef954 100644
--- a/src/components/util/RadioList.vue
+++ b/src/components/util/RadioList.vue
@@ -15,6 +15,8 @@
   -->
 <template>
 	<fieldset class="menu" role="radiogroup" @keydown="onKeydown">
+		<!-- Always have a checked item to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1413213 -->
+		<input type="radio" :name="name" checked data-ignore @focus="moveFocus">
 		<slot></slot>
 	</fieldset>
 </template>
@@ -26,13 +28,25 @@ import {handleKeyboardEvent} from "@/util/events";
 export default defineComponent({
 	name: 'RadioList',
 
+	props: {
+		name: {
+			type: String,
+			required: true
+		}
+	},
+
 	setup() {
 		const onKeydown = (e: KeyboardEvent) => {
 			handleKeyboardEvent(e, Array.from((e.currentTarget as HTMLFieldSetElement).elements) as HTMLElement[])
-		}
+		};
+
+		const moveFocus = (e: FocusEvent) => {
+			((e.target as HTMLElement).nextElementSibling as HTMLElement).focus();
+		};
 
 		return {
-			onKeydown
+			onKeydown,
+			moveFocus
 		}
 	},
 });
diff --git a/src/util/events.ts b/src/util/events.ts
index 2a4962c..c9deda9 100644
--- a/src/util/events.ts
+++ b/src/util/events.ts
@@ -76,6 +76,11 @@ export const handleKeyboardEvent = (e: KeyboardEvent, elements: HTMLElement[]) =
 			newPosition = 0;
 		}
 
+		// Skip over firefox bugfix radio button in RadioList
+		if(typeof elements[newPosition].dataset.ignore !== 'undefined') {
+			newPosition = e.key == 'ArrowUp' || e.key == 'ArrowLeft' ? elements.length - 1 : newPosition + 1;
+		}
+
 		(elements[newPosition] as HTMLElement).focus();
 		e.preventDefault();
 	} else if(e.key === 'Enter' && e.target) {