From 27631855af1a9ad90142d95116670f4b3e57105d Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Wed, 11 Jul 2018 01:14:54 +0200
Subject: [PATCH] Proper aria labels for buttons

---
 src/App.vue                           | 2 +-
 src/components/Map.vue                | 2 ++
 src/components/ReportCard.vue         | 6 ++++--
 src/components/ReportDialog/index.vue | 1 +
 src/i18n/en.js                        | 8 ++++++++
 src/i18n/fr.js                        | 8 ++++++++
 src/views/Map.vue                     | 6 ++++--
 src/views/Settings.vue                | 2 +-
 8 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c91eb18..95c7519 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index e4a71e9..be34853 100644
--- a/src/components/Map.vue
+++ b/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>
diff --git a/src/components/ReportCard.vue b/src/components/ReportCard.vue
index 2f6e373..2905ecd 100644
--- a/src/components/ReportCard.vue
+++ b/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>
diff --git a/src/components/ReportDialog/index.vue b/src/components/ReportDialog/index.vue
index 082412d..1f291e2 100644
--- a/src/components/ReportDialog/index.vue
+++ b/src/components/ReportDialog/index.vue
@@ -14,6 +14,7 @@
                         @click="error = null"
                         dark
                         large
+                        role="button"
                         >
                         {{ $t('misc.discard') }}
                     </v-btn>
diff --git a/src/i18n/en.js b/src/i18n/en.js
index ca1ba6d..9435d26 100644
--- a/src/i18n/en.js
+++ b/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.',
diff --git a/src/i18n/fr.js b/src/i18n/fr.js
index f41b36d..fde18b1 100644
--- a/src/i18n/fr.js
+++ b/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.",
diff --git a/src/views/Map.vue b/src/views/Map.vue
index 766ce0d..d487084 100644
--- a/src/views/Map.vue
+++ b/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>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index bc26873..ed16347 100644
--- a/src/views/Settings.vue
+++ b/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>