From 2ba459b4131a11a68a5fd818a278c474c1888cde Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Sat, 26 Nov 2022 23:45:17 +0630
Subject: [PATCH] refactor(a11y): update theme switch button for better
 accessibility

Update title, add aria-label and aria-live in theme switch button.
---
 src/components/Header.astro | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 67a944918..1d9ceff26 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -76,7 +76,9 @@ const { activeNav } = Astro.props;
             <button
               id="theme-btn"
               class="focus-outline"
-              aria-label="switch theme"
+              title="Toggles light & dark"
+              aria-label="auto"
+              aria-live="polite"
             >
               <svg xmlns="http://www.w3.org/2000/svg" id="moon-svg">
                 <path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z" />
@@ -165,19 +167,6 @@ const { activeNav } = Astro.props;
 </style>
 
 <script>
-  // Toggle Theme
-  const themeBtn = document.querySelector("#theme-btn");
-  const htmlClassList = document.querySelector("html")?.classList;
-  themeBtn?.addEventListener("click", function () {
-    if (htmlClassList?.contains("theme-dark")) {
-      localStorage.setItem("theme", "light");
-      htmlClassList?.remove("theme-dark");
-    } else {
-      localStorage.setItem("theme", "dark");
-      htmlClassList?.add("theme-dark");
-    }
-  });
-
   // Toggle menu
   const menuBtn = document.querySelector(".hamburger-menu");
   const navClassList = document.querySelector("nav")?.classList;