Merge pull request #63 from alexstine/improve/dark-mode-a11y

Dark mode toggle: Refactor label for better A11Y support for screen readers

components/DarkModeToggle.tsx

@@ -21,23 +21,23 @@ const DarkModeToggle = () => {
   };
 
   return (
-    <label className="cursor-pointer relative">
+    <label className="cursor-pointer relative" htmlFor="dark-mode-toggle">
       <div className="flex items-center">
-        <span className="absolute top-1 right-1 flex items-center h-4 pr-1">
+        <span className="absolute top-1 right-1 flex items-center h-4 pr-1" aria-hidden="true">
           <MoonIcon />
         </span>
-        <span className="absolute top-1 left-1 flex items-center h-4 pl-1">
+        <span className="absolute top-1 left-1 flex items-center h-4 pl-1" aria-hidden="true">
           <SunIcon />
         </span>
         <input
           type="checkbox"
           id="dark-mode-toggle"
           className="sr-only"
           checked={!isDarkMode}
-          aria-label={"Dark Mode"}
           onChange={toggleTheme}
         />
-        <div className="toggle-bg bg-toggle-light dark:bg-toggle-dark h-6 w-11 rounded-full"></div>
+        <div className="toggle-bg bg-toggle-light dark:bg-toggle-dark h-6 w-11 rounded-full" aria-hidden="true"></div>
+        <span className="sr-only">Dark Mode</span>
       </div>
     </label>
   );