Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added titles for accessibility

Browse Source
This commit is contained in:
Alexis
2023-10-13 20:54:26 +02:00
parent f0f07eaa0e
commit 9d7f87464d
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/maps/overlay/SearchMarkers.vue
View File

@@ -90,16 +90,16 @@ onUpdated(() => {
<div ref="searchBar" class="search-w" :data-focused="shouldBeActive"> <div ref="searchBar" class="search-w" :data-focused="shouldBeActive">
<div class="input-w"> <div class="input-w">
<i class="search-icon ph-fill ph-magnifying-glass"></i> <i class="search-icon ph-fill ph-magnifying-glass"></i>
<input ref="qInput" type="text" v-model="q"> <input ref="qInput" name="q" type="text" v-model="q" title="Rechercher le monde">
<button data-to-players class="player-btn" tabindex="1"> <button data-to-players class="player-btn" tabindex="1" title="Aller à la position actuelle des joueurs">
<i class="pin-icon ph-fill ph-map-pin"></i> <i class="pin-icon ph-fill ph-map-pin"></i>
</button> </button>
</div> </div>
<ul class="search-results" v-if="shouldBeActive"> <ul class="search-results" v-if="shouldBeActive">
<li v-for="m in filteredMarkers?.slice(0, 10)" :key="m.title"> <li v-for="m in filteredMarkers?.slice(0, 10)" :key="m.title">
<button class="search-item" :data-to-marker="`${m.markerCoords.x},${m.markerCoords.y}`" tabindex="0"> <button class="search-item" :data-to-marker="`${m.markerCoords.x},${m.markerCoords.y}`" tabindex="0" :title="`Aller à ${m.title}`">
<span class="title">{{ m.title }}</span> <span class="title">{{ m.title }}</span>
<span class="desc">{{ m.description }}</span> <span class="desc">{{ m.description }}</span>
</button> </button>
@@ -153,6 +153,15 @@ onUpdated(() => {
color: #dc2626; color: #dc2626;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
&:hover {
background-color: var(--slate-200);
}
&:focus-visible {
outline: 1px dotted var(--slate-500);
outline: 4px auto var(--slate-900);
}
} }
} }