fix: fix accessibility

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()