WorldListItem screenreader improvements

This commit is contained in:
James Lyne 2021-05-28 14:34:38 +01:00
parent 020cde7f31
commit 6209a89092

View File

@ -16,11 +16,11 @@
<template> <template>
<div class="world"> <div class="world">
<span class="world__name">{{ world.title }}</span> <span class="world__name" aria-hidden="true">{{ world.title }}</span>
<div class="world__maps menu"> <div class="world__maps menu">
<template v-for="[key, map] in world.maps" :key="`${world.name}_${key}`"> <template v-for="[key, map] in world.maps" :key="`${world.name}_${key}`">
<input :id="`${name}-${world.name}-${key}`" type="radio" :name="name" v-bind:value="map" v-model="currentMap"> <input :id="`${name}-${world.name}-${key}`" type="radio" :name="name" v-bind:value="map" v-model="currentMap" :aria-labelledby="`${name}-${world.name}-${key}-label`">
<label class="map" :for="`${name}-${world.name}-${key}`" :title="`${world.title} - ${map.title}`"> <label :id="`${name}-${world.name}-${key}-label`" class="map" :for="`${name}-${world.name}-${key}`" :title="`${world.title} - ${map.title}`">
<SvgIcon :name="getMapIcon(map)"></SvgIcon> <SvgIcon :name="getMapIcon(map)"></SvgIcon>
</label> </label>
</template> </template>