Proper aria labels for buttons

This commit is contained in:
Lucas Verney 2018-07-11 01:14:54 +02:00
parent b49f3182cb
commit 27631855af
8 changed files with 29 additions and 6 deletions

View File

@ -8,7 +8,7 @@
</router-link>
<v-spacer></v-spacer>
<v-menu offset-y class="menu">
<v-btn slot="activator" icon>
<v-btn slot="activator" icon role="button" :aria-label="$t('buttons.menu')">
<v-icon>more_vert</v-icon>
</v-btn>
<v-list>

View File

@ -22,6 +22,8 @@
class="overlayButton"
v-if="recenterButton"
@click.native.stop="recenterMap"
role="button"
:aria-label="$t('buttons.recenterMap')"
>
<v-icon>my_location</v-icon>
</v-btn>

View File

@ -17,13 +17,13 @@
</v-layout>
</v-flex>
<v-flex xs2 class="text-xs-center">
<v-btn color="green" dark small icon class="smallButton" @click.stop="upvote">
<v-btn role="button" :aria-label="$t('buttons.upvote')" color="green" dark small icon class="smallButton" @click.stop="upvote">
<v-icon>thumb_up</v-icon>
</v-btn>
</v-flex>
<v-flex xs2 class="text-xs-center">
<v-btn color="red" dark medium icon class="mediumButton" @click.stop="downvote">
<v-btn role="button" :aria-label="$t('buttons.downvote')" color="red" dark medium icon class="mediumButton" @click.stop="downvote">
<v-icon>thumb_down</v-icon>
</v-btn>
</v-flex>
@ -38,6 +38,8 @@
left
fab
@click.stop="closeReportCard"
role="button"
:aria-label="$t('buttons.close')"
>
<v-icon>close</v-icon>
</v-btn>

View File

@ -14,6 +14,7 @@
@click="error = null"
dark
large
role="button"
>
{{ $t('misc.discard') }}
</v-btn>

View File

@ -8,6 +8,14 @@ export default {
usage: 'How to use',
usageDescription: 'Use the button in the lower right corner to add a new report at your current location. To add a report elsewhere, do a click where you want the report to be shown. Press on a marker on the map to display more informations and report the problem as being still there or solved.',
},
buttons: {
close: 'Close',
downvote: 'Downvote',
menu: 'Menu',
recenterMap: 'Recenter map',
reportProblem: 'Report problem',
upvote: 'Upvote',
},
geolocation: {
fetching: 'Fetching current position…',
unavailable: 'Sorry, geolocation is not available in your browser.',

View File

@ -8,6 +8,14 @@ export default {
usage: 'Utilisation',
usageDescription: "Utilisez le bouton en bas à droite pour ajouter un signalement à votre emplacement actuel. Pour ajouter un signalement ailleurs, faites un appui à l'emplacement souhaité sur la carte. Appuyer sur un marqueur sur la carte pour afficher plus d'informations et signaler que le problème est toujours présent ou non.",
},
buttons: {
close: 'Fermer',
downvote: 'Infirmer',
menu: 'Menu',
recenterMap: 'Recentrer la carte',
reportProblem: 'Nouveau signalement',
upvote: 'Confirmer',
},
geolocation: {
fetching: 'En attente de votre position…',
unavailable: "Désolé, la géolocalisation n'est pas disponible dans votre navigateur.",

View File

@ -4,7 +4,7 @@
<v-flex xs8 offset-xs2>
<p><img src="static/icon.svg" alt="Logo"/></p></p>
<p>{{ $t('about.summary') }}</p>
<v-btn round color="green" dark @click="introButtonClick">{{ $t('intro.start') }}</v-btn>
<v-btn role="button" round color="green" dark @click="introButtonClick">{{ $t('intro.start') }}</v-btn>
</v-flex>
</v-layout>
<v-layout v-else row wrap fill-height>
@ -21,6 +21,8 @@
color="orange"
class="overlayButton"
@click.native.stop="() => showReportDialog()"
role="button"
:aria-label="$t('buttons.reportProblem')"
>
<v-icon>report_problem</v-icon>
</v-btn>
@ -30,7 +32,7 @@
<template v-if="error">
<p class="text-xs-center">{{ error }}</p>
<p class="text-xs-center">
<v-btn color="blue" dark @click="initializePositionWatching">Retry</v-btn>
<v-btn role="button" color="blue" dark @click="initializePositionWatching">Retry</v-btn>
</p>
</template>
<template v-else>

View File

@ -16,7 +16,7 @@
v-model="preventSuspend"
></v-checkbox>
<v-btn @click="submit">{{ $t('settings.save') }}</v-btn>
<v-btn role="button" @click="submit">{{ $t('settings.save') }}</v-btn>
</form>
</v-flex>
</v-layout>