Proper aria labels for buttons

src/App.vue

@@ -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>

src/components/Map.vue

@@ -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>

src/components/ReportCard.vue

@@ -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>

src/components/ReportDialog/index.vue

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

src/i18n/en.js

@@ -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.',

src/i18n/fr.js

@@ -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.",

src/views/Map.vue

@@ -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>

src/views/Settings.vue

@@ -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>