feat: make accessibility 100 score

KeJunMao · Mar 22, 2023 · 8b43fb0 · 8b43fb0
1 parent 5f3d6e2
commit 8b43fb0
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 21 deletions.
diff --git a/components/app/AppHeaderLogo.vue b/components/app/AppHeaderLogo.vue
@@ -10,6 +10,7 @@ const localePath = useLocalePath();
     hover:color-gray-500
     whitespace-nowrap
     :to="localePath('/')"
+    aria-label="Go back to the homepage"
   >
     <div class="i-app:logo"></div>
     <slot />

diff --git a/components/app/AppLayout.vue b/components/app/AppLayout.vue
@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+const head = useLocaleHead({ addSeoAttributes: true });
+</script>
+
 <template>
   <div
     bg-white
@@ -8,11 +12,13 @@
     flex-col
     min-h-screen
   >
-    <AppHeader />
-    <div flex-1>
-      <slot />
-    </div>
-    <AppFooter />
-    <AppCommand />
+    <Html :lang="head?.htmlAttrs?.lang">
+      <AppHeader />
+      <div flex-1>
+        <slot />
+      </div>
+      <AppFooter />
+      <AppCommand />
+    </Html>
   </div>
 </template>
diff --git a/components/app/AppSettings.vue b/components/app/AppSettings.vue
@@ -11,6 +11,7 @@ const showWarning = computed(() => !storageOptions.value.apiKey);
         :plain="showWarning"
         :type="showWarning ? 'danger' : ''"
         @click="show = true"
+        aria-label="Settings"
       >
         <el-icon class="i-carbon:settings"></el-icon>
         <span hidden sm:block ml-1 v-if="showWarning">{{

diff --git a/components/app/AppSocialIcons.vue b/components/app/AppSocialIcons.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <NuxtLink mx-1 to="https://github.com/KeJunMao/ai-anything" target="_blank">
-      <el-button text>
+      <el-button text aria-label="Go to GitHub">
         <div class="i-carbon:logo-github"></div>
       </el-button>
     </NuxtLink>

diff --git a/components/tool/ToolSearch.vue b/components/tool/ToolSearch.vue
@@ -29,7 +29,7 @@ const localePath = useLocalePath();
         </el-button>
       </nuxt-link>
       <nuxt-link :to="localePath('/workshop')" w-full>
-        <el-button type="primary" w-full>
+        <el-button type="primary" w-full class="color-dark-500!">
           <el-icon class="i-carbon:apps mr-1"></el-icon>
           {{ $t("tool.search.workshop") }}
         </el-button>

diff --git a/config/i18n.ts b/config/i18n.ts
@@ -3,8 +3,8 @@ import type { LocaleObject } from "#i18n";
 
 const countryLocaleVariants: Record<string, LocaleObject[]> = {
   en: [
-    { code: "en-US", name: "English (US)" },
-    { code: "en-GB", name: "English (UK)" },
+    { code: "en-US", name: "English (US)", iso: "en-US" },
+    { code: "en-GB", name: "English (UK)", iso: "en-GB" },
   ],
 };
 
@@ -18,6 +18,7 @@ const locales: LocaleObject[] = [
     code: "zh-CN",
     file: "zh-CN.json",
     name: "简体中文",
+    iso: "zh-CN",
   },
 ];
 
@@ -28,8 +29,7 @@ const buildLocales = () => {
       locales.forEach((l) => {
         const entry: LocaleObject = {
           ...data,
-          code: l.code,
-          name: l.name,
+          ...l,
           files: [data.file!, `${l.code}.json`],
         };
         delete entry.file;

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -4,15 +4,6 @@ import { i18n } from "./config/i18n";
 
 export default defineNuxtConfig({
   app: {
-    head: {
-      meta: [
-        {
-          name: "viewport",
-          content:
-            "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover",
-        },
-      ],
-    },
     pageTransition: { name: "page", mode: "out-in" },
     layoutTransition: { name: "layout", mode: "out-in" },
   },