fix: WCAG fastpass

package.json

@@ -25,6 +25,7 @@
     "vuetify": "^4.0.4"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.1",
     "@intellectronica/ruler": "^0.3.37",
     "@playwright/test": "^1.58.2",
     "@tsconfig/node22": "^22.0.5",

playwright.config.ts

@@ -39,15 +39,6 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
 
     /* Test against mobile viewports. */
     // {

pnpm-lock.yaml

@@ -30,6 +30,9 @@ importers:
         specifier: ^4.0.4
         version: 4.0.4(typescript@5.9.3)(vite-plugin-vuetify@2.1.3)(vue@3.5.31(typescript@5.9.3))
     devDependencies:
+      '@axe-core/playwright':
+        specifier: ^4.11.1
+        version: 4.11.1(playwright-core@1.58.2)
       '@intellectronica/ruler':
         specifier: ^0.3.37
         version: 0.3.37
@@ -87,6 +90,11 @@ packages:
     peerDependencies:
       '@types/json-schema': ^7.0.15
 
+  '@axe-core/playwright@4.11.1':
+    resolution: {integrity: sha512-mKEfoUIB1MkVTht0BGZFXtSAEKXMJoDkyV5YZ9jbBmZCcWDz71tegNsdTkIN8zc/yMi5Gm2kx7Z5YQ9PfWNAWw==}
+    peerDependencies:
+      playwright-core: '>= 1.0.0'
+
   '@babel/generator@7.29.1':
     resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
     engines: {node: '>=6.9.0'}
@@ -664,6 +672,10 @@ packages:
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
+  axe-core@4.11.1:
+    resolution: {integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==}
+    engines: {node: '>=4'}
+
   axios@1.13.6:
     resolution: {integrity: sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==}
 
@@ -2004,6 +2016,11 @@ snapshots:
       '@types/json-schema': 7.0.15
       js-yaml: 4.1.1
 
+  '@axe-core/playwright@4.11.1(playwright-core@1.58.2)':
+    dependencies:
+      axe-core: 4.11.1
+      playwright-core: 1.58.2
+
   '@babel/generator@7.29.1':
     dependencies:
       '@babel/parser': 7.29.2
@@ -2589,6 +2606,8 @@ snapshots:
 
   asynckit@0.4.0: {}
 
+  axe-core@4.11.1: {}
+
   axios@1.13.6:
     dependencies:
       follow-redirects: 1.15.11

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": "選擇語系"
       }
     }
   }