fix: WCAG fastpass

src/components/PageLogin.vue

@@ -127,7 +127,7 @@
               />
             </template>
           </LoginForm>
-          <div class="mt-auto py-8 text-center text-caption text-grey-darken-1">
+          <div class="mt-auto py-8 text-center text-caption text-grey-darken-2">
             Copyright © {{ new Date().getFullYear() }} {{ props.branding.organization }}
           </div>
         </div>
@@ -189,7 +189,7 @@
             />
           </template>
         </LoginForm>
-        <div class="mt-8 text-center text-caption text-grey-darken-1">
+        <div class="mt-8 text-center text-caption text-grey-darken-2">
           Copyright © {{ new Date().getFullYear() }} {{ props.branding.organization }}
         </div>
       </v-card>

src/components/login/LoginHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-header-wrapper">
     <h2 class="text-h5 text-primary font-weight-bold mb-2">{{ props.welcomeText }}</h2>
-    <p class="text-subtitle-1 text-secondary">{{ props.welcomeDescription }}</p>
+    <p class="text-subtitle-1 text-grey-darken-2">{{ props.welcomeDescription }}</p>
   </div>
 </template>
 

src/components/login/LoginToolBar.vue

@@ -2,6 +2,7 @@
   <div class="d-flex justify-end py-0 py-sm-2">
     <v-btn
       class="d-none d-md-block"
+      :aria-label="t('pages.login.toolbar.toggleTheme')"
       color="grey-darken-1"
       :icon="mdiPaletteOutline"
       size="small"
@@ -12,6 +13,7 @@
       <template #activator="{ props: menuActivatorProps }">
         <v-btn
           v-bind="menuActivatorProps"
+          :aria-label="t('pages.login.toolbar.selectLocale')"
           color="grey-darken-1"
           :icon="mdiTranslate"
           size="small"
@@ -35,6 +37,7 @@
 <script setup lang="ts">
 import { mdiPaletteOutline, mdiTranslate } from '@mdi/js'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
 import { getNextThemeName } from '@/utils/theme'
 
@@ -55,6 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['change-locale', 'toggle-layout'])
 
+const { t } = useI18n()
 const theme = useTheme()
 
 const availableThemeNames = computed(() =>

src/language/en-US.json

@@ -30,6 +30,10 @@
         "verifyFailed": "Verification failed",
         "loginFailed": "Login failed",
         "loginSuccess": "Login success!"
+      },
+      "toolbar": {
+        "toggleTheme": "Toggle theme",
+        "selectLocale": "Select language"
       }
     }
   }

src/language/zh-TW.json

@@ -30,6 +30,10 @@
         "verifyFailed": "驗證失敗",
         "loginFailed": "登入失敗",
         "loginSuccess": "登入成功！"
+      },
+      "toolbar": {
+        "toggleTheme": "切換主題",
+        "selectLocale": "選擇語系"
       }
     }
   }