Add: mejoras para la accesibilidad, sobretodo para los screen readers

src/components/CalendarButton.astro

@@ -1,11 +1,12 @@
 <button
 	id="add-to-calendar"
 	class:list={`
-    inline-block border-2 border-primary px-4 py-1
-    text-lg font-medium
-    uppercase transition hover:scale-110
-    hover:bg-primary hover:text-secondary
-  `}
+		inline-block border-2 border-primary px-4 py-1
+		text-lg font-medium
+		uppercase transition hover:scale-110
+		hover:bg-primary hover:text-secondary
+	`}
+  	aria-label="agregar al calendario se abrirá ventana flotante"
 >
 	Agregar al calendario
 </button>

src/components/ThemeToggle.astro

@@ -13,7 +13,7 @@ import MoonIcon from "@/icons/moon.astro"
   <MoonIcon
     class="absolute rotate-90 opacity-0 transition-transform dark:rotate-0 dark:opacity-100"
   />
-  <span class="sr-only">Alternar tema</span>
+  <span class="sr-only"></span>
 </button>
 
 <script is:inline>
@@ -34,9 +34,20 @@ import MoonIcon from "@/icons/moon.astro"
 
     const isDark = element.classList.contains("dark")
     localStorage.setItem("theme", isDark ? "dark" : "light")
+
+	updateThemeMessage(isDark ? "dark" : "light");
   }
 
   document
     .getElementById("themeToggle")
     .addEventListener("click", handleToggleClick)
+
+  const updateThemeMessage = (theme) => {
+	const translation = theme === "dark" ? "oscuro" : "claro";
+	const actualThemeMsg = `Alternar tema, el tema actual es ${translation}`;
+	let span = document.querySelector("span.sr-only");
+	span.innerHTML = actualThemeMsg;
+  };
+
+  updateThemeMessage(getThemePreference());
 </script>

src/sections/Countdown.astro

@@ -4,7 +4,7 @@ import Date from "@/components/Date.astro"
 import { EVENT_TIMESTAMP } from "@/consts/event-date"
 ---
 
-<section class="my-0 lg:my-32 flex flex-col gap-y-10 place-items-center">
+<section class="my-0 lg:my-32 flex flex-col gap-y-10 place-items-center" aria-label="cuenta atrás">
 
   <LaVeladaLogo class="text-primary" />
   <p
@@ -15,7 +15,7 @@ import { EVENT_TIMESTAMP } from "@/consts/event-date"
 
   <div
     class="flex flex-row gap-x-1 text-primary uppercase font-semibold"
-    data-date={EVENT_TIMESTAMP}
+    data-date={EVENT_TIMESTAMP} role="timer"
   >
     <Date time="00" dateType="Días" attribute={{ "data-days": "" }} />
 

src/sections/Footer.astro

@@ -18,12 +18,12 @@ import XIcon from "@/icons/x.astro"
     class="md:hidden border-primary border-t-2 w-full mt-6 pt-6"></span>
 
   <nav>
-    <ul class="flex flex-row gap-x-6 items-center">
+    <ul class="flex flex-row gap-x-6 items-center" aria-label="redes sociales y botón para alternar tema">
       <li>
         <a
           target="_blank"
           rel="noopener"
-          aria-label="Instagram de la velada"
+          aria-label="Instagram de la velada, se abrirá en una nueva pestaña"
           href="https://www.instagram.com/infolavelada"
           class="hover:scale-125 hover:opacity-70 transition inline-block"
         >
@@ -34,7 +34,7 @@ import XIcon from "@/icons/x.astro"
         <a
           target="_blank"
           rel="noopener"
-          aria-label="X de la velada"
+          aria-label="X de la velada, se abrirá en una nueva pestaña"
           href="https://x.com/infoLaVelada"
           class="hover:scale-125 hover:opacity-70 transition inline-block"
         >

src/sections/Info.astro

@@ -1,10 +1,13 @@
-<section class="my-32 flex flex-col gap-y-10 font-medium text-primary">
+<section
+	class="my-32 flex flex-col gap-y-10 font-medium text-primary"
+	aria-label="descripción del evento"
+>
 	<a
 		href="https://twitch.tv/ibai"
 		target="_blank"
 		rel="nofollow noopener"
 		class="mx-auto transition hover:scale-125 hover:opacity-70"
-		aria-label="Síguelo en directo twitch.tv/ibai"
+		aria-label="síguelo en directo twitch.tv/ibai, se abrirá en una nueva pestaña"
 	>
 		<svg
 			class="twitch detect-in-viewport text-primary"
@@ -35,9 +38,12 @@
 		<article
 			class="order-1 flex items-center justify-center border-t-2 border-primary px-10 py-10 text-3xl md:order-none md:flex-1 md:border-y-2 md:px-0 md:py-12 lg:px-0 lg:py-20 lg:text-4xl"
 		>
-			<h3 class="md:max-w-[250px]">
+			<h3
+				class="md:max-w-[250px]"
+				aria-label="síguelo en directo twitch.tv/ibai, se abrirá en una nueva pestaña"
+			>
 				<a
-					class="inline-block transition hover:scale-110 hover:text-twitch"
+					class="inline-block transition-transform hover:scale-110 hover:text-twitch"
 					href="https://twitch.tv/ibai"
 					target="_blank"
 					rel="nofollow noopener"

src/sections/PrincipalDate.astro

@@ -21,6 +21,7 @@ import MapMarkerIcon from "@/icons/map-marker.astro"
 			target="_blank"
 			rel="noopener"
 			style="display: -webkit-box;"
+			aria-label="ubicación del teatro en google maps, se abrirá en una nueva pestaña"
 		>
 			<MapMarkerIcon class="mr-1 max-md:mt-1 md:mt-0.5 md:size-6" /> Teatro Victoria (Barcelona)
 		</a>
@@ -37,6 +38,7 @@ import MapMarkerIcon from "@/icons/map-marker.astro"
 			href="https://www.teatrevictoria.com/es/cartelera/c/190_la-velada-del-ano-4.html"
 			target="_blank"
 			rel="noopener noreferrer"
+			aria-label="entradas agotadas, se abrirá en una nueva pestaña"
 		>
 			Entradas agotadas
 		</a>
@@ -46,6 +48,7 @@ import MapMarkerIcon from "@/icons/map-marker.astro"
 </section>
 
 <script>
+
 	import { EVENT_TIMESTAMP } from "@/consts/event-date"
 
 	const $dateSpan = document.querySelector(".date")