Workaround for firefox radio button tab bug
https://bugzilla.mozilla.org/show_bug.cgi?id=1413213
This commit is contained in:
parent
e143471fa8
commit
edbdb712d5
@ -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>
|
||||
|
@ -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}`">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
}
|
||||
},
|
||||
});
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user