feat: replace div width GhostButton to improve a11y

Author: wswmsword

src/components/GhostButton.vue

@@ -0,0 +1,12 @@
+<template>
+  <van-button size="small" plain type="primary">
+    <slot />
+  </van-button>
+</template>
+
+<style scoped>
+.van-button {
+  --van-button-border-width: 0;
+  --van-button-plain-background: opacity;
+}
+</style>

src/pages/forgot-password/index.vue

@@ -2,6 +2,7 @@
 import { useRouter } from 'vue-router'
 import type { FieldRule } from 'vant'
 import { useUserStore } from '@/stores'
+import vw from '@/utils/inline-px-to-vw'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -69,10 +70,6 @@ async function getCode() {
 
   isGettingCode.value = false
 }
-
-function handleBackLogin() {
-  router.push({ name: 'login' })
-}
 </script>
 
 <template>
@@ -134,9 +131,9 @@ function handleBackLogin() {
       </div>
     </van-form>
 
-    <div class="mt-16 text-12 text-[var(--van-primary-color)]" @click="handleBackLogin">
+    <GhostButton to="login" block :style="{ 'margin-top': vw(8) }">
       {{ $t('forgot-password.backToLogin') }}
-    </div>
+    </GhostButton>
   </div>
 </template>
 

src/pages/login/index.vue

@@ -4,6 +4,7 @@ import { useUserStore } from '@/stores'
 
 import logo from '~/images/logo.svg'
 import logoDark from '~/images/logo-dark.svg'
+import vw from '@/utils/inline-px-to-vw'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -49,20 +50,12 @@ async function login(values: any) {
     loading.value = false
   }
 }
-
-function handleReset() {
-  router.push({ name: 'forgot-password' })
-}
-
-function handleRegister() {
-  router.push({ name: 'register' })
-}
 </script>
 
 <template>
   <div class="m-x-a w-7xl text-center">
     <div class="mb-32 mt-20">
-      <van-image :src="dark ? logoDark : logo" class="h-120 w-120" />
+      <van-image :src="dark ? logoDark : logo" class="h-120 w-120" alt="brand logo" />
     </div>
 
     <van-form :model="postData" :rules="rules" validate-trigger="onSubmit" @submit="login">
@@ -97,13 +90,13 @@ function handleRegister() {
       </div>
     </van-form>
 
-    <div class="mt-16 text-12 text-[var(--van-primary-color)]" @click="handleRegister">
+    <GhostButton block to="register" :style="{ 'margin-top': vw(18) }">
       {{ $t('login.sign-up') }}
-    </div>
+    </GhostButton>
 
-    <div class="mt-16 text-12 text-[var(--van-primary-color)]" @click="handleReset">
+    <GhostButton block to="forgot-password">
       {{ $t('login.forgot-password') }}
-    </div>
+    </GhostButton>
   </div>
 </template>
 

src/pages/register/index.vue

@@ -2,6 +2,7 @@
 import { useRouter } from 'vue-router'
 import type { FieldRule } from 'vant'
 import { useUserStore } from '@/stores'
+import vw from '@/utils/inline-px-to-vw'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -73,10 +74,6 @@ async function getCode() {
 
   isGettingCode.value = false
 }
-
-function handleBackLogin() {
-  router.push({ name: 'login' })
-}
 </script>
 
 <template>
@@ -147,9 +144,9 @@ function handleBackLogin() {
       </div>
     </van-form>
 
-    <div class="mt-16 text-12 text-[var(--van-primary-color)]" @click="handleBackLogin">
+    <GhostButton to="login" block :style="{ 'margin-top': vw(8) }">
       {{ $t('register.backToLogin') }}
-    </div>
+    </GhostButton>
   </div>
 </template>
 

src/types/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Chart: typeof import('./../components/Chart/index.vue')['default']
+    GhostButton: typeof import('./../components/GhostButton.vue')['default']
     NavBar: typeof import('./../components/NavBar.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']