✨ Enhance accessibility for theme toggle component with ARIA attributes and improved semantics

Author: HassanZahirnia

resources/views/components/theme-toggle.blade.php

@@ -120,16 +120,25 @@ class="theme-selector relative -mx-1.5 h-10 w-10 cursor-pointer select-none hove
             })
         },
     }"
+    role="button"
+    aria-label="Toggle between light and dark mode"
+    x-bind:aria-pressed="darkMode ? 'true' : 'false'"
+    tabindex="0"
 >
+    <span class="sr-only">Toggle theme</span>
+
     {{-- Moon --}}
     <div
         class="theme-selector-moon absolute right-1/2 top-1/2 -translate-y-1/2 translate-x-1/2"
+        aria-hidden="true"
     >
         <div class="-scale-x-100 transition duration-300">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="size-[22px]"
                 viewBox="0 0 16 16"
+                aria-hidden="true"
+                focusable="false"
             >
                 <path
                     fill="currentColor"
@@ -139,12 +148,17 @@ class="size-[22px]"
         </div>
     </div>
     {{-- Mini star --}}
-    <div class="theme-selector-mini-star absolute left-[.6rem] top-[.6rem]">
+    <div
+        class="theme-selector-mini-star absolute left-[.6rem] top-[.6rem]"
+        aria-hidden="true"
+    >
         <div class="transition duration-300">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="size-[7px]"
                 viewBox="0 0 256 256"
+                aria-hidden="true"
+                focusable="false"
             >
                 <path
                     fill="currentColor"
@@ -154,12 +168,17 @@ class="size-[7px]"
         </div>
     </div>
     {{-- Micro star --}}
-    <div class="theme-selector-micro-star absolute left-[1rem] top-[1rem]">
+    <div
+        class="theme-selector-micro-star absolute left-[1rem] top-[1rem]"
+        aria-hidden="true"
+    >
         <div class="transition duration-300">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="size-[5px]"
                 viewBox="0 0 256 256"
+                aria-hidden="true"
+                focusable="false"
             >
                 <path
                     fill="currentColor"
@@ -169,15 +188,21 @@ class="size-[5px]"
         </div>
     </div>
     {{-- Sun ball --}}
-    <div class="absolute right-1/2 top-1/2 -translate-y-1/2 translate-x-1/2">
+    <div
+        class="absolute right-1/2 top-1/2 -translate-y-1/2 translate-x-1/2"
+        aria-hidden="true"
+    >
         <div class="theme-selector-sunball">
             <div
                 class="size-3.5 rounded-full bg-current transition duration-300"
             ></div>
         </div>
     </div>
     {{-- sunShine --}}
-    <div class="theme-selector-sunshine absolute inset-0 grid h-full w-full">
+    <div
+        class="theme-selector-sunshine absolute inset-0 grid h-full w-full"
+        aria-hidden="true"
+    >
         <div class="relative h-full w-full">
             {{-- Top --}}
             <div