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

desec-io · Feb 11, 2024 · 5a77565 · 5a77565
1 parent f96261f
commit 5a77565
Show file tree

Hide file tree

Showing 18 changed files with 37 additions and 16 deletions.
diff --git a/www/webapp/src/App.vue b/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>

diff --git a/www/webapp/src/components/ActivateAccountActionHandler.vue b/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">

diff --git a/www/webapp/src/components/DonateDirectDebitForm.vue b/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>

diff --git a/www/webapp/src/components/Field/RecordList.vue b/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>

diff --git a/www/webapp/src/components/ResetPasswordActionHandler.vue b/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>

diff --git a/www/webapp/src/views/ChangeEmail.vue b/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>

diff --git a/www/webapp/src/views/ConfirmationPage.vue b/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>

diff --git a/www/webapp/src/views/Console/TOTPVerifyDialog.vue b/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>

diff --git a/www/webapp/src/views/CrudList.vue b/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>

diff --git a/www/webapp/src/views/DeleteAccount.vue b/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>

diff --git a/www/webapp/src/views/DomainSetup.vue b/www/webapp/src/views/DomainSetup.vue
@@ -36,7 +36,7 @@
           <v-col cols="auto">Nameservers</v-col>
           <v-spacer></v-spacer>
           <v-col class="text-right">
-            <v-btn @click="copyToClipboard(ns.join('\n'))" text small>
+            <v-btn @click="copyToClipboard(ns.join('\n'))" text small aria-label="Copy nameservers">
               <v-icon>{{ mdiContentCopy }}</v-icon>
               Copy
             </v-btn>
@@ -74,7 +74,7 @@
             <v-col cols="auto">DS Format</v-col>
             <v-spacer></v-spacer>
             <v-col class="text-right">
-              <v-btn @click="copyToClipboard(ds.join('\n'))" text small>
+              <v-btn @click="copyToClipboard(ds.join('\n'))" text small aria-label="Copy DS">
                 <v-icon>{{ mdiContentCopy }}</v-icon>
                 Copy
               </v-btn>
@@ -94,7 +94,7 @@
             <v-col cols="auto">DNSKEY Format</v-col>
             <v-spacer></v-spacer>
             <v-col class="text-right">
-              <v-btn @click="copyToClipboard(dnskey.join('\n'))" text small>
+              <v-btn @click="copyToClipboard(dnskey.join('\n'))" text small aria-label="Copy DNSKey">
                 <v-icon>{{ mdiContentCopy }}</v-icon>
                 Copy
               </v-btn>
@@ -129,6 +129,7 @@
             text
             v-bind="attrs"
             @click="snackbar = false"
+            aria-label="Close"
         >
           Close
         </v-btn>

diff --git a/www/webapp/src/views/DomainSetupPage.vue b/www/webapp/src/views/DomainSetupPage.vue
@@ -28,7 +28,7 @@
             the answer there.
           </v-card-text>
           <v-card-actions>
-            <v-btn block outlined :to="{name: 'talk'}">Find Help</v-btn>
+            <v-btn block outlined :to="{name: 'talk'}" aria-label="Find help">Find Help</v-btn>
           </v-card-actions>
         </v-card>
       </v-col>
@@ -40,7 +40,7 @@
             If you like our service, please consider donating.
           </v-card-text>
           <v-card-actions>
-            <v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
+            <v-btn block outlined :to="{name: 'donate'}" aria-label="Donate">Donate</v-btn>
           </v-card-actions>
         </v-card>
       </v-col>

diff --git a/www/webapp/src/views/DynSetup.vue b/www/webapp/src/views/DynSetup.vue
@@ -110,7 +110,7 @@
                 Please verify that your client is using the credentials provided by deSEC and then come back to check
                 again.
               </p>
-              <v-btn depressed outlined block @click="check" :loading="working">Check Again</v-btn>
+              <v-btn depressed outlined block @click="check" :loading="working" aria-label="Check Again">Check Again</v-btn>
             </v-alert>
             <v-alert type="success" v-if="ips !== undefined && ips.length > 0">
               <p>
@@ -129,7 +129,7 @@
                 Enjoy!
               </p>
               <p>
-                <v-btn depressed outlined block @click="check" :loading="working">Update</v-btn>
+                <v-btn depressed outlined block @click="check" :loading="working" aria-label="Update">Update</v-btn>
               </p>
               <p>
                 Please note that deSEC only assigns your IP address to your domain name.
@@ -155,7 +155,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>

diff --git a/www/webapp/src/views/HomePage.vue b/www/webapp/src/views/HomePage.vue
@@ -48,6 +48,7 @@
                     depressed
                     x-large
                     block
+                    aria-label="Create Account"
                   >
                     Create Account
                   </v-btn>

diff --git a/www/webapp/src/views/LoginPage.vue b/www/webapp/src/views/LoginPage.vue
@@ -65,6 +65,7 @@
                 :disabled="!valid"
                 :loading="working"
                 tabindex="4"
+                aria-label="Log In"
               >
                 Log In
               </v-btn>
@@ -74,6 +75,7 @@
                 color="primary"
                 :to="{name: 'reset-password', params: email ? {email: email} : {}}"
                 tabindex="5"
+                aria-label="Forgot password"
               >
                 Forgot password
               </v-btn>

diff --git a/www/webapp/src/views/MFA.vue b/www/webapp/src/views/MFA.vue
@@ -66,6 +66,7 @@
                           :loading="working"
                           ref="submit"
                           tabindex="3"
+                          aria-label="Verify"
                   >Verify</v-btn>
                 </v-col>
                 <v-col cols="auto"></v-col>

diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
@@ -168,6 +168,7 @@
                       type="submit"
                       :loading="working"
                       tabindex="7"
+                      aria-label="Sign up"
               >Sign up</v-btn>
             </v-card-actions>
           </v-card>

diff --git a/www/webapp/src/views/WelcomePage.vue b/www/webapp/src/views/WelcomePage.vue
@@ -31,7 +31,7 @@
           </v-card-text>
           <v-card-actions>
             <v-spacer/>
-            <v-btn outlined text depressed :to="{name: 'home'}">Home</v-btn>
+            <v-btn outlined text depressed :to="{name: 'home'}" aria-label="Home">Home</v-btn>
           </v-card-actions>
         </v-card>
         </v-form>