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>
<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">
<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">
<label class="map" :for="`${name}-${world.name}-${key}`" :title="`${world.title} - ${map.title}`">
<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 :id="`${name}-${world.name}-${key}-label`" class="map" :for="`${name}-${world.name}-${key}`" :title="`${world.title} - ${map.title}`">
<SvgIcon :name="getMapIcon(map)"></SvgIcon>
</label>
</template>