Proper aria labels for buttons
This commit is contained in:
parent
b49f3182cb
commit
27631855af
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -14,6 +14,7 @@
|
||||
@click="error = null"
|
||||
dark
|
||||
large
|
||||
role="button"
|
||||
>
|
||||
{{ $t('misc.discard') }}
|
||||
</v-btn>
|
||||
|
@ -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.',
|
||||
|
@ -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.",
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user