fix(ui): Fix a11y issues

_locales/en/messages.json

@@ -968,5 +968,32 @@
   },
   "DescriptionPredefinedwebdavurls": {
     "message": "Select your service"
+  },
+  "LabelShowpassword": {
+    "message": "Show password"
+  },
+  "LabelHidepassword": {
+    "message": "Hide password"
+  },
+  "LabelTitle": {
+    "message": "Title"
+  },
+  "LabelLink": {
+    "message": "Link"
+  },
+  "LabelParentfolder": {
+    "message": "Parent folder"
+  },
+  "LabelHome": {
+    "message": "Home"
+  },
+  "LabelSortby": {
+    "message": "Sort by"
+  },
+  "LabelMoreactions": {
+    "message": "More actions"
+  },
+  "LabelServerconnectionsuccessful": {
+    "message": "Server connection successful"
   }
 }

src/ui/App.vue

@@ -40,10 +40,11 @@
                 text
                 class="white--text"
                 v-bind="attrs"
+                :aria-label="t('LabelFunddevelopment')"
                 :to="{ name: routes.DONATE }"
                 target="_blank"
                 v-on="on">
-                <v-icon>mdi-heart-outline</v-icon>
+                <v-icon aria-hidden="true">mdi-heart-outline</v-icon>
               </v-btn>
             </template>
             <span>{{ t('LabelFunddevelopment') }}</span>
@@ -55,10 +56,11 @@
                 text
                 class="white--text"
                 v-bind="attrs"
+                :aria-label="t('LabelTelemetry')"
                 :to="{ name: routes.TELEMETRY }"
                 target="_blank"
                 v-on="on">
-                <v-icon>
+                <v-icon aria-hidden="true">
                   {{
                     telemetryEnabled
                       ? 'mdi-bug-play-outline'
@@ -76,10 +78,11 @@
                 text
                 class="white--text"
                 v-bind="attrs"
+                :aria-label="t('LabelGivefeedback')"
                 :to="{ name: routes.FEEDBACK }"
                 target="_blank"
                 v-on="on">
-                <v-icon>mdi-bullhorn-variant-outline</v-icon>
+                <v-icon aria-hidden="true">mdi-bullhorn-variant-outline</v-icon>
               </v-btn>
             </template>
             <span>{{ t('LabelGivefeedback') }}</span>
@@ -91,10 +94,11 @@
                 text
                 class="white--text"
                 v-bind="attrs"
+                :aria-label="t('LabelOpeninnewtab')"
                 target="_blank"
                 @click="openInNewTab"
                 v-on="on">
-                <v-icon>mdi-open-in-new</v-icon>
+                <v-icon aria-hidden="true">mdi-open-in-new</v-icon>
               </v-btn>
             </template>
             <span>{{ t('LabelOpeninnewtab') }}</span>
@@ -108,7 +112,7 @@
       persistent>
       <v-card>
         <v-card-title>
-          <v-icon>mdi-lock-outline</v-icon>{{ t('LabelUnlock') }}
+          <v-icon aria-hidden="true">mdi-lock-outline</v-icon>{{ t('LabelUnlock') }}
         </v-card-title>
         <v-card-text>
           <v-alert

src/ui/components/AccountCard.vue

@@ -19,15 +19,20 @@
               <div class="overline">
                 {{ account.data.type }}
               </div>
-              <div class="text-h6">
+              <div
+                class="text-h6"
+                role="heading"
+                aria-level="2">
                 <v-icon
                   v-if="account.data.localRoot === 'tabs'"
-                  color="primary">
+                  color="primary"
+                  aria-hidden="true">
                   mdi-tab
                 </v-icon>
                 <v-icon
                   v-else
-                  color="primary">
+                  color="primary"
+                  aria-hidden="true">
                   mdi-folder
                 </v-icon>
                 {{ folderName }}
@@ -40,7 +45,8 @@
               <div class="pa-3 d-inline-block font-weight-light body-2">
                 <v-icon
                   :color="statusColor"
-                  :class="{ spinning: account.data.syncing }">
+                  :class="{ spinning: account.data.syncing }"
+                  aria-hidden="true">
                   {{ statusIcon }}
                 </v-icon>
                 <span :style="{ color: statusColor }">{{ statusLabel }}</span>
@@ -120,7 +126,7 @@
                   params: { accountId: account.id },
                 }"
                 target="_blank">
-                <v-icon>mdi-cog</v-icon>
+                <v-icon aria-hidden="true">mdi-cog</v-icon>
                 {{ t('LabelOptions') }}
               </v-btn>
             </v-col>
@@ -130,16 +136,18 @@
                 small
                 :disabled="account.data.syncing || account.data.scheduled"
                 :title="t('LabelSyncDownOnce')"
+                :aria-label="t('LabelSyncDownOnce')"
                 @click="onTriggerSyncDown">
-                <v-icon>mdi-arrow-down-bold</v-icon>
+                <v-icon aria-hidden="true">mdi-arrow-down-bold</v-icon>
               </v-btn>
               <v-btn
                 class="ma-1"
                 small
                 :disabled="account.data.syncing || account.data.scheduled"
                 :title="t('LabelSyncUpOnce')"
+                :aria-label="t('LabelSyncUpOnce')"
                 @click="onTriggerSyncUp">
-                <v-icon>mdi-arrow-up-bold</v-icon>
+                <v-icon aria-hidden="true">mdi-arrow-up-bold</v-icon>
               </v-btn>
               <v-btn
                 v-if="!account.data.syncing"
@@ -149,7 +157,7 @@
                 :title="t('LabelSyncnow')"
                 :aria-label="t('LabelSyncnow')"
                 @click="onTriggerSync">
-                <v-icon>mdi-sync</v-icon>
+                <v-icon aria-hidden="true">mdi-sync</v-icon>
               </v-btn>
               <v-btn
                 v-else
@@ -158,7 +166,7 @@
                 :title="t('LabelCancelsync')"
                 :aria-label="t('LabelCancelsync')"
                 @click="onCancelSync">
-                <v-icon>mdi-cancel</v-icon>
+                <v-icon aria-hidden="true">mdi-cancel</v-icon>
               </v-btn>
             </v-col>
           </v-row>

src/ui/components/NextcloudLogin.vue

@@ -14,9 +14,10 @@
           <template #activator="{ on }">
             <v-btn
               icon
+              :aria-label="t('LabelLoginFlowStart')"
               @click="onFlowStart"
               v-on="on">
-              <v-icon>mdi-account-circle</v-icon>
+              <v-icon aria-hidden="true">mdi-account-circle</v-icon>
             </v-btn>
           </template>
           <span>{{ t('LabelLoginFlowStart') }}</span>
@@ -27,21 +28,32 @@
           <template #activator="{ on }">
             <v-btn
               icon
+              :aria-label="t('LabelLoginFlowStop')"
               @click="onFlowStop"
               v-on="on">
-              <v-icon>mdi-cancel</v-icon>
+              <v-icon aria-hidden="true">mdi-cancel</v-icon>
             </v-btn>
           </template>
           <span>{{ t('LabelLoginFlowStop') }}</span>
         </v-tooltip>
       </template>
     </v-text-field>
     <v-text-field
-      :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
       :type="showPassword ? 'text' : 'password'"
       :label="t('LabelPassword')"
-      @click:append="showPassword = !showPassword"
-      @input="$emit('update:password', $event)" />
+      @input="$emit('update:password', $event)">
+      <template #append>
+        <v-icon
+          role="button"
+          tabindex="0"
+          :aria-label="showPassword ? t('LabelHidepassword') : t('LabelShowpassword')"
+          @click="showPassword = !showPassword"
+          @keydown.enter="showPassword = !showPassword"
+          @keydown.space.prevent="showPassword = !showPassword">
+          {{ showPassword ? 'mdi-eye' : 'mdi-eye-off' }}
+        </v-icon>
+      </template>
+    </v-text-field>
   </div>
 </template>
 

src/ui/components/OptionAllowRedirects.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelAllowredirects') }}
     </div>
     <div class="caption">

src/ui/components/OptionAutoSync.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelAutosync') }}
     </div>
     <div class="caption">

src/ui/components/OptionClientCert.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelClientcert') }}
     </div>
     <div class="caption">

src/ui/components/OptionDeleteAccount.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelRemoveaccount') }}
     </div>
     <div class="caption">

src/ui/components/OptionDownloadLogs.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelDownloadlogs') }}
     </div>
     <div class="caption">

src/ui/components/OptionExportBookmarks.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelExportBookmarks') }}
     </div>
     <div class="caption">

src/ui/components/OptionFailsafe.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelFailsafe') }}
     </div>
     <div class="caption">

src/ui/components/OptionFileType.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelFiletype') }}
     </div>
     <div class="caption">

src/ui/components/OptionNestedSync.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelNestedSync') }}
     </div>
     <div class="caption">

src/ui/components/OptionPassphrase.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelPassphrase') }}
     </div>
     <div class="caption">
@@ -25,10 +28,20 @@
       <v-text-field
         class="mt-2"
         :label="t('LabelPassphrase')"
-        :append-icon="showPassphrase ? 'mdi-eye' : 'mdi-eye-off'"
         :type="showPassphrase ? 'text' : 'password'"
-        @input="passphrase = $event"
-        @click:append="showPassphrase = !showPassphrase" />
+        @input="passphrase = $event">
+        <template #append>
+          <v-icon
+            role="button"
+            tabindex="0"
+            :aria-label="showPassphrase ? t('LabelHidepassword') : t('LabelShowpassword')"
+            @click="showPassphrase = !showPassphrase"
+            @keydown.enter="showPassphrase = !showPassphrase"
+            @keydown.space.prevent="showPassphrase = !showPassphrase">
+            {{ showPassphrase ? 'mdi-eye' : 'mdi-eye-off' }}
+          </v-icon>
+        </template>
+      </v-text-field>
       <v-btn
         color="primary"
         @click="$emit('input', passphrase); editing = false">

src/ui/components/OptionResetCache.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="text-h6">
+    <div
+      class="text-h6"
+      role="heading"
+      aria-level="3">
       {{ t('LabelSyncfromscratch') }}
     </div>
     <div class="caption">