fix: fix accessibility (#20)

- H1 "Matrix" Effect:
Implemented a separation of concerns. The 'h1' now uses an aria-label
with the static text "PyCon ES 2026", while the visual animation is
wrapped in a span with aria-hidden="true".
Added a check for prefers-reduced-motion. If enabled, the text renders
instantly without the glitch effect.

- Dynamic Subtitle (Loading Effect):
Hidden decorative chars using aria-hidden="true".
Added aria-live="polite" and aria-busy logic. The screen reader now
waits for the loading animation to finish before announcing the final
venue information.
The blinking cursor now stops if the user prefers reduced motion
(motion-reduce:animate-none).

- Sponsor Button:
Wrapped brackets in aria-hidden.
Added a descriptive aria-label ("Copiar email...").
Updated the copy-to-clipboard logic to provide auditory feedback ("Email
copiado exitosamente") via aria-label updates.

-Refactor:
Extracted the email address to src/consts.ts and passed it via
data-attributes to the DOM, avoiding hardcoded strings in the component.

---------

Co-authored-by: dani herrera <ctrl.alt.d@gmail.com>

Author: itziarZG

src/pages/constants.ts

@@ -0,0 +1 @@
+export const SPONSORS_EMAIL = 'sponsors@2026.es.pycon.org';

src/pages/index.astro

@@ -1,20 +1,28 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import '@fontsource-variable/jetbrains-mono'
+import { SPONSORS_EMAIL } from './constants'
 ---
 
 <Layout title="PyConES 2026">
   <main class="min-h-screen flex flex-col justify-center items-center text-center px-4">
     <div class="relative z-10 max-w-3xl">
       <h1
         class="text-4xl md:text-7xl font-bold text-white font-mono tracking-tighter cursor-default"
-        data-value="PYCON ES 2026"
+        aria-label="PyCon ES 2026"
       >
-        PYCON ES 2026
+        <span aria-hidden="true" data-value="PYCON ES 2026" id="matrix-text"> PYCON ES 2026 </span>
       </h1>
 
-      <h2 class="mt-4 text-xl md:text-2xl text-green-400 font-mono h-8">
-        &gt; <span id="subtitle">Initialising system...</span><span class="animate-pulse">_</span>
+      <h2
+        id="subtitle-container"
+        class="mt-4 text-xl md:text-2xl text-green-400 font-mono h-8 flex justify-center items-center gap-2"
+        aria-live="polite"
+        aria-busy="true"
+      >
+        <span aria-hidden="true" class="select-none">&gt;</span>
+        <span id="subtitle">Initialising system...</span>
+        <span class="animate-pulse motion-reduce:animate-none" aria-hidden="true">_</span>
       </h2>
 
       <div
@@ -23,17 +31,34 @@ import '@fontsource-variable/jetbrains-mono'
       >
         <button
           id="sponsor-btn"
-          class="group relative px-7 py-2 bg-green-500 text-black font-mono font-bold text-lg hover:bg-green-400 transition-all duration-300 shadow-[0_0_15px_rgba(34,197,94,0.5)] hover:shadow-[0_0_25px_rgba(34,197,94,0.8)] cursor-pointer"
+          type="button"
+          data-email={SPONSORS_EMAIL}
+          aria-describedby="sponsor-hint"
+          class="group relative px-7 py-2 bg-green-500 text-black font-mono font-bold text-lg hover:bg-green-400 transition-all duration-300 shadow-[0_0_15px_rgba(34,197,94,0.5)] hover:shadow-[0_0_25px_rgba(34,197,94,0.8)] cursor-pointer focus:outline-none focus:ring-4 focus:ring-green-300/50 rounded-sm"
         >
           <span
             class="absolute inset-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity pointer-events-none"
           ></span>
-          <span id="sponsor-text">&lt; BECOME A SPONSOR /&gt;</span>
+
+          <span id="sponsor-text">
+            <span aria-hidden="true">&lt; </span lang='en'>BECOME A SPONSOR<span aria-hidden="true"> /&gt;</span>
+          </span>
+          <span id="sponsor-hint" class="sr-only">Copia el email de contacto para patrocinadores</span>
         </button>
+
+        <div
+          id="copy-confirmation"
+          role="status"
+          tabindex="-1"
+          class="hidden px-7 py-2 text-green-400 font-mono font-bold text-lg rounded-sm"
+        >
+          <span aria-hidden="true"> &lt;!-- </span lang='en'>EMAIL COPIED!<span aria-hidden="true"> --&gt;</span>
+        </div>
       </div>
     </div>
 
     <div
+      aria-hidden="true"
       class="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none"
     >
     </div>
@@ -46,10 +71,11 @@ import '@fontsource-variable/jetbrains-mono'
   let interval: number | null = null
 
   const runMatrixEffect = (element: HTMLElement) => {
-    let iteration = 0
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (prefersReducedMotion) return
 
+    let iteration = 0
     clearInterval(interval as number)
-
     const originalText = element.dataset.value || ''
 
     interval = window.setInterval(() => {
@@ -72,44 +98,58 @@ import '@fontsource-variable/jetbrains-mono'
   }
 
   const init = () => {
+    const matrixText = document.getElementById('matrix-text')
     const h1 = document.querySelector('h1')
     const subtitle = document.querySelector('#subtitle')
     const actions = document.querySelector('#actions')
 
-    if (h1) {
-      runMatrixEffect(h1)
-      h1.onmouseover = () => runMatrixEffect(h1)
+    if (matrixText && h1) {
+      runMatrixEffect(matrixText)
+      h1.onmouseover = () => runMatrixEffect(matrixText)
     }
 
     if (subtitle) {
       setTimeout(() => {
         subtitle.textContent = 'Sede UB Barcelona | 6-8 Nov 2026'
+        const container = document.getElementById('subtitle-container')
+        if (container) {
+          container.setAttribute('aria-busy', 'false')
+        }
         if (actions) {
           actions.classList.remove('opacity-0')
         }
       }, 1500)
     }
 
-    //COPY MAIL
+    // COPY MAIL LOGIC
     const sponsorBtn = document.getElementById('sponsor-btn')
-    const sponsorText = document.getElementById('sponsor-text')
+    const copyConfirmation = document.getElementById('copy-confirmation')
+    const email = sponsorBtn?.dataset.email as string
 
-    if (sponsorBtn && sponsorText) {
+    if (sponsorBtn && copyConfirmation && email) {
       sponsorBtn.onclick = async () => {
         try {
-          await navigator.clipboard.writeText('sponsors@2026.es.pycon.org')
-          const originalText = sponsorText.innerText
-          sponsorText.innerText = '[ EMAIL COPIED! ]'
+          await navigator.clipboard.writeText(email)
+
+          // Hide button, show confirmation
+          sponsorBtn.classList.add('hidden')
+          copyConfirmation.classList.remove('hidden')
+          copyConfirmation.focus()
+
           setTimeout(() => {
-            sponsorText.innerText = originalText
+            // Hide confirmation, show button and restore focus
+            copyConfirmation.classList.add('hidden')
+            sponsorBtn.classList.remove('hidden')
+            sponsorBtn.focus()
           }, 2000)
         } catch (err) {
           console.error('Failed to copy', err)
-          window.location.href = 'mailto:sponsors@2026.es.pycon.org'
+          window.location.href = `mailto:${email}`
         }
       }
     }
   }
+
   //not needed now
   document.addEventListener('astro:page-load', init)
   init()