From f1231eaa03b7b59bb1f38786be549ea6b698a449 Mon Sep 17 00:00:00 2001 From: itziarZG Date: Thu, 15 Jan 2026 17:51:10 +0100 Subject: [PATCH 1/4] fix: fix accessibility --- src/pages/index.astro | 62 +++++++++++++++++++++++++++++++------------ 1 file changed, 45 insertions(+), 17 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 8b1aca9..c8e5130 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -8,13 +8,22 @@ import '@fontsource-variable/jetbrains-mono'

- PYCON ES 2026 +

-

- > Initialising system..._ +

+ + + Initialising system... + +

@@ -46,10 +61,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,40 +88,52 @@ 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 email = 'sponsors@2026.es.pycon.org' if (sponsorBtn && sponsorText) { 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) + + const originalHTML = sponsorText.innerHTML + sponsorText.innerHTML = + 'EMAIL COPIED!' + + sponsorBtn.setAttribute('aria-label', 'Email copiado exitosamente') + setTimeout(() => { - sponsorText.innerText = originalText + sponsorText.innerHTML = originalHTML + sponsorBtn.setAttribute('aria-label', 'Copiar email de contacto para patrocinadores') }, 2000) } catch (err) { console.error('Failed to copy', err) - window.location.href = 'mailto:sponsors@2026.es.pycon.org' + window.location.href = `mailto:${email}` } } } From 49209543f80ad4d2fe65a1de107049c96fdb9710 Mon Sep 17 00:00:00 2001 From: itziarZG Date: Thu, 15 Jan 2026 18:04:02 +0100 Subject: [PATCH 2/4] feat: add constants file --- src/pages/constants.ts | 1 + src/pages/index.astro | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 src/pages/constants.ts diff --git a/src/pages/constants.ts b/src/pages/constants.ts new file mode 100644 index 0000000..a09f3f5 --- /dev/null +++ b/src/pages/constants.ts @@ -0,0 +1 @@ +export const SPONSORS_EMAIL = 'sponsors@2026.es.pycon.org'; \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index c8e5130..edb52b5 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,7 @@ --- import Layout from '../layouts/Layout.astro' import '@fontsource-variable/jetbrains-mono' +import { SPONSORS_EMAIL } from './constants' --- @@ -20,9 +21,7 @@ import '@fontsource-variable/jetbrains-mono' aria-busy="true" > - Initialising system... - @@ -33,6 +32,7 @@ import '@fontsource-variable/jetbrains-mono' + + @@ -113,23 +123,24 @@ import { SPONSORS_EMAIL } from './constants' // 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 && email) { + if (sponsorBtn && copyConfirmation && email) { sponsorBtn.onclick = async () => { try { await navigator.clipboard.writeText(email) - const originalHTML = sponsorText.innerHTML - sponsorText.innerHTML = - 'EMAIL COPIED!' - - sponsorBtn.setAttribute('aria-label', 'Email copiado exitosamente') + // Hide button, show confirmation + sponsorBtn.classList.add('hidden') + copyConfirmation.classList.remove('hidden') + copyConfirmation.focus() setTimeout(() => { - sponsorText.innerHTML = originalHTML - sponsorBtn.setAttribute('aria-label', 'Copiar email de contacto para patrocinadores') + // 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) From 3ce0ff71e40ffbc12710c3bb661839647fcc5beb Mon Sep 17 00:00:00 2001 From: dani herrera Date: Fri, 16 Jan 2026 09:55:44 +0100 Subject: [PATCH 4/4] The display message should not look like a button (#23) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change the ‘Emil copied’ message styling to prevent it from looking like a button. The focus styling made it look like a button, so this PR removes the custom focus style. In the terminal, `[ XXX ]` also resembled a button, so `[` was replaced with other decorative characters. >[!NOTE] >PR is opened against the `fix_accessibility` branch rather than `main`. --- src/pages/index.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 17abd17..287ef4b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -50,9 +50,9 @@ import { SPONSORS_EMAIL } from './constants' id="copy-confirmation" role="status" tabindex="-1" - class="hidden px-7 py-2 text-green-400 font-mono font-bold text-lg focus:outline-none focus:ring-4 focus:ring-green-300/50 rounded-sm" + class="hidden px-7 py-2 text-green-400 font-mono font-bold text-lg rounded-sm" > - EMAIL COPIED! + EMAIL COPIED!