From a02589936c9af26e3e06b5aa85c268cfef522b41 Mon Sep 17 00:00:00 2001
From: Guoqi Sun <sun412926@gmail.com>
Date: Mon, 23 Dec 2024 03:23:26 +0800
Subject: [PATCH] perf: optimizing website accessibility

---
 src/components/astro/footer.astro     |  2 +-
 src/components/astro/header.astro     | 16 ++++++++++++++--
 src/components/astro/nav.astro        | 10 ++++++++++
 src/components/react/theme-toggle.tsx |  7 ++++++-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/astro/footer.astro b/src/components/astro/footer.astro
index 571cc46..6445853 100644
--- a/src/components/astro/footer.astro
+++ b/src/components/astro/footer.astro
@@ -23,7 +23,7 @@ const currentYear = new Date().getFullYear()
         <p>{item.text}</p>
         <a
           href={item.link}
-          class="text-blue-500 transition-colors duration-200 hover:text-blue-700"
+          class="text-blue-600 transition-colors duration-200 hover:text-blue-800"
           data-umami-event={`footer-${item.label}`}
         >
           {item.label}
diff --git a/src/components/astro/header.astro b/src/components/astro/header.astro
index 05a3ba8..56adafd 100644
--- a/src/components/astro/header.astro
+++ b/src/components/astro/header.astro
@@ -10,14 +10,24 @@ const config = lang === "zh" ? zh : en
 ---
 
 <header class="flex h-24 w-full items-center justify-between">
-  <a href="/" data-umami-event="site-name">
+  <a
+    href="/"
+    data-umami-event="site-name"
+    aria-label={`${config.siteName} - 首页`}
+  >
     <div class="text-2xl font-semibold">{config.siteName}</div>
   </a>
 
   <div class="flex items-center gap-6">
     {
       config.rss && (
-        <a href="/atom.xml" target="_blank" data-umami-event="rss">
+        <a
+          href="/atom.xml"
+          target="_blank"
+          data-umami-event="rss"
+          aria-label="RSS"
+          title="RSS"
+        >
           <Rss />
         </a>
       )
@@ -29,6 +39,8 @@ const config = lang === "zh" ? zh : en
           target="_blank"
           class="hidden md:block"
           data-umami-event={social.label}
+          aria-label={social.label}
+          title={social.label}
         >
           <social.icon />
         </a>
diff --git a/src/components/astro/nav.astro b/src/components/astro/nav.astro
index d4fc7ad..8217432 100644
--- a/src/components/astro/nav.astro
+++ b/src/components/astro/nav.astro
@@ -18,6 +18,8 @@ const { home, archive, custom, links, about } =
         href={`/${lang}`}
         class="hover:underline hover:underline-offset-4"
         data-umami-event="nav-home"
+        aria-label={t("nav.home")}
+        title={t("nav.home")}
       >
         <p>{t("nav.home")}</p>
       </a>
@@ -29,6 +31,8 @@ const { home, archive, custom, links, about } =
         href={`/${lang}/archive`}
         class="hover:underline hover:underline-offset-4"
         data-umami-event="nav-archive"
+        aria-label={t("nav.archive")}
+        title={t("nav.archive")}
       >
         <p>{t("nav.archive")}</p>
       </a>
@@ -41,6 +45,8 @@ const { home, archive, custom, links, about } =
         class="hover:underline hover:underline-offset-4"
         target="_blank"
         data-umami-event={`nav-${tab.label}`}
+        aria-label={tab.label}
+        title={tab.label}
       >
         <p>{tab.label}</p>
       </a>
@@ -52,6 +58,8 @@ const { home, archive, custom, links, about } =
         href={`/${lang}/links`}
         class="hover:underline hover:underline-offset-4"
         data-umami-event="nav-links"
+        aria-label={t("nav.links")}
+        title={t("nav.links")}
       >
         <p>{t("nav.links")}</p>
       </a>
@@ -63,6 +71,8 @@ const { home, archive, custom, links, about } =
         href={`/${lang}/about`}
         class="hover:underline hover:underline-offset-4"
         data-umami-event="nav-about"
+        aria-label={t("nav.about")}
+        title={t("nav.about")}
       >
         <p>{t("nav.about")}</p>
       </a>
diff --git a/src/components/react/theme-toggle.tsx b/src/components/react/theme-toggle.tsx
index 2782ede..bd7649d 100644
--- a/src/components/react/theme-toggle.tsx
+++ b/src/components/react/theme-toggle.tsx
@@ -23,7 +23,12 @@ export function ThemeToggle() {
   }
 
   return (
-    <button onClick={handleToggleClick} data-umami-event="theme-toggle">
+    <button
+      onClick={handleToggleClick}
+      data-umami-event="theme-toggle"
+      aria-label="Toggle theme"
+      title="Toggle theme"
+    >
       <Sun className="dark:hidden" />
       <Moon className="hidden dark:block" />
     </button>