feat(a11y): add aria-labels to various buttons

Author: xyhhx

www/webapp/src/App.vue

@@ -45,9 +45,9 @@
           <v-icon :color="item.post_icon_color" class="ml-1 text--darken-1" small v-if="item.post_icon">{{ item.post_icon }}</v-icon>
         </span>
       </div>
-      <v-btn class="mx-4" color="primary" depressed :to="{name: 'signup', query: $route.query}" v-if="!user.authenticated">Create Account</v-btn>
-      <v-btn class="mx-4 mr-0" color="primary" depressed :to="{name: 'login'}" v-if="!user.authenticated">Log In</v-btn>
-      <v-btn class="mx-4 mr-0" color="primary" depressed outlined @click="logout" v-if="user.authenticated">Log Out</v-btn>
+      <v-btn class="mx-4" color="primary" depressed :to="{name: 'signup', query: $route.query}" v-if="!user.authenticated" aria-label="Create Account">Create Account</v-btn>
+      <v-btn class="mx-4 mr-0" color="primary" depressed :to="{name: 'login'}" v-if="!user.authenticated" aria-label="Log In">Log In</v-btn>
+      <v-btn class="mx-4 mr-0" color="primary" depressed outlined @click="logout" v-if="user.authenticated" aria-label="Log Out">Log Out</v-btn>
       <v-app-bar-nav-icon class="d-md-none" @click.stop="drawer = !drawer" />
       <template #extension v-if="user.authenticated">
         <v-tabs background-color="primary darken-1" fixed-tabs>
@@ -68,6 +68,7 @@
                       text
                       class="align-self-center mr-4"
                       v-on="on"
+                      aria-label="more"
               >
                 more
                 <v-icon right>{{ mdiMenuDown }}</v-icon>
@@ -105,13 +106,15 @@
             depressed
             :href="alert.href"
             v-if="alert.href"
+            aria-label="More"
           >
             {{ alert.button || 'More' }}
           </v-btn>
           <v-btn
             color="primary"
             text
             @click="user.unalert(alert.id)"
+            aria-label="Hide"
           >
             Hide
           </v-btn>

www/webapp/src/components/ActivateAccountActionHandler.vue

@@ -38,7 +38,7 @@
             </audio>
             <br/>
             <v-btn-toggle>
-              <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
+              <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking" aria-label="Refresh"><v-icon>{{ mdiRefresh }}</v-icon></v-btn>
             </v-btn-toggle>
             &nbsp;
             <v-btn-toggle v-model="captcha_kind">
@@ -55,6 +55,7 @@
                 :disabled="working || !valid"
                 :loading="working"
                 tabindex="2"
+                aria-label="Submit"
         >Submit</v-btn>
     </div>
     <v-alert type="success" v-if="success">

www/webapp/src/components/DonateDirectDebitForm.vue

@@ -17,7 +17,7 @@
         may be the name appearing on your bank statement.
       </p>
       <p>Again, thank you so much.</p>
-      <v-btn depressed outlined block :to="{name: 'home'}">Done</v-btn>
+      <v-btn depressed outlined block :to="{name: 'home'}" aria-label="Done">Done</v-btn>
     </v-alert>
     <v-form
         v-if="!done"
@@ -91,6 +91,7 @@
               color="primary"
               type="submit"
               :loading="working"
+              aria-label="Donate Now"
       >Donate Now</v-btn>
     </v-form>
   </div>

www/webapp/src/components/Field/RecordList.vue

@@ -28,6 +28,7 @@
             small
             text
             v-if="!readonly && !disabled"
+            aria-label="Add another value"
     ><v-icon>{{ mdiPlus }}</v-icon> add another value</v-btn>
   </div>
 </template>

www/webapp/src/components/ResetPasswordActionHandler.vue

@@ -21,6 +21,7 @@
                 :disabled="working || !valid"
                 :loading="working"
                 tabindex="2"
+                aria-label="Submit"
         >Submit</v-btn>
     </div>
     <v-alert type="success" v-else>

www/webapp/src/views/ChangeEmail.vue

@@ -79,6 +79,7 @@
                                     type="submit"
                                     :loading="working"
                                     tabindex="3"
+                                    aria-label="Change Email Address"
                             >Change Email Address
                             </v-btn>
                         </v-card-actions>

www/webapp/src/views/ConfirmationPage.vue

@@ -40,7 +40,7 @@
               If you like our service, please consider donating.
             </p>
             <p>
-              <v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
+              <v-btn block outlined :to="{name: 'donate'}" aria-label="Donate">Donate</v-btn>
             </p>
           </v-card-text>
           <v-card-actions>

www/webapp/src/views/Console/TOTPVerifyDialog.vue

@@ -72,6 +72,7 @@
                         :loading="working"
                         ref="submit"
                         tabindex="3"
+                        aria-label="Verify"
                 >Verify</v-btn>
               </v-col>
               <v-col cols="auto"></v-col>

www/webapp/src/views/CrudList.vue

@@ -12,7 +12,7 @@
             :timeout="-1"
           >
             {{ errors[errors.length - 1] }}
-            <v-btn @click="snackbar = false">
+            <v-btn @click="snackbar = false" aria-label="Close">
               Close
             </v-btn>
           </v-snackbar>
@@ -61,6 +61,7 @@
                         fab
                         depressed
                         :disabled="user.working"
+                        aria-label="Add new record"
                 >
                   <v-icon>{{ mdiPlus }}</v-icon>
                 </v-btn>
@@ -170,6 +171,7 @@
                                 :outlined="!createDialogSuccess"
                                 :disabled="createDialogWorking"
                                 @click.native="close"
+                                aria-label={{ createDialogSuccess ? 'Close' : 'Cancel' }}
                         >
                           {{ createDialogSuccess ? 'Close' : 'Cancel' }}
                         </v-btn>
@@ -181,6 +183,7 @@
                                 :disabled="createInhibited || !valid || createDialogWorking || createDialogSuccess"
                                 :loading="createDialogWorking"
                                 v-if="!createDialogSuccess"
+                                aria-label="Save"
                         >
                           Save
                         </v-btn>
@@ -313,6 +316,7 @@
                     outlined
                     :disabled="destroyDialogWorking"
                     @click.native="destroyClose"
+                    aria-label="Cancel"
                   >
                     Cancel
                   </v-btn>
@@ -322,6 +326,7 @@
                     depressed
                     type="submit"
                     :loading="destroyDialogWorking"
+                    aria-label="Delete"
                   >
                     Delete
                   </v-btn>

www/webapp/src/views/DeleteAccount.vue

@@ -65,6 +65,7 @@
                                     type="submit"
                                     :loading="working"
                                     tabindex="2"
+                                    aria-label="Delete Account"
                             >Delete Account
                             </v-btn>
                         </v-card-actions>