Add accessibility attributes for screen readers.

Author: Enejivk

apps/web/components/theme-toggle-icon.tsx

@@ -6,12 +6,18 @@ export const ThemeToggleIcon = () => {
 	const { theme } = useTheme();
 
 	return (
-		<span className="view-transition-theme-icon">
+		<button
+			type="button"
+			className="view-transition-theme-icon"
+			aria-label={
+				theme === "dark" ? "Switch to light theme" : "Switch to dark theme"
+			}
+		>
 			{theme === "dark" ? (
 				<Moon size={17} className="fill-white stroke-gray-3" />
 			) : (
 				<Sun size={17} className="stroke-gray-12" />
 			)}
-		</span>
+		</button>
 	);
 };