feat(programa): improve accessibility of Pretalx widget

- Add global skip link to main content (3 i18n locales)
- Wrap schedule in region with aria-labelledby, add live region
  announcing session count changes after filtering
- Reinforce dialog ARIA (aria-modal, role, aria-labelledby) via
  Shadow DOM CSS/attribute injection
- Add labels to search input and timezone select inside the widget
- Restore focus to filter trigger when dialog closes
- Set body[modality] attribute so widget's :focus-visible rings
  appear for keyboard users
- Override --pretalx-clr-success to a distinguishable green

Fixes 3 issues from initial a11y pass:
- Widget uses Shadow DOM (Vue 3 attachShadow), not light DOM —
  all queries now use shadow root
- modality must be a direct attribute, not data-modality
- success color override must live on host's style attribute
  to cross the shadow boundary

Author: itziarZG

src/components/ProgramaPage.astro

@@ -10,15 +10,19 @@ const t = programaTexts[lang as keyof typeof programaTexts]
 const menuT = menuTexts[lang as keyof typeof menuTexts]
 ---
 
-<section class="py-8">
-  <h1 class="text-3xl md:text-5xl font-bold text-center mb-6">{t.title}</h1>
+<section class="py-8" aria-labelledby="schedule-title">
+  <h1 id="schedule-title" class="text-3xl md:text-5xl font-bold text-center mb-6">{t.title}</h1>
   <p class="text-center text-base md:text-lg mb-10 max-w-2xl mx-auto opacity-80">{t.intro}</p>
 
   <pretalx-schedule
     event-url="https://pretalx.com/pycones-2026/"
     locale={t.locale}
     format="grid"
-    style="--pretalx-clr-primary: #03004b"></pretalx-schedule>
+    style="--pretalx-clr-primary: #03004b; --pretalx-clr-success: #2e7d32"></pretalx-schedule>
+
+  <div id="schedule-status" role="status" aria-live="polite" aria-atomic="true" class="sr-only"></div>
+
+  <script is:inline type="application/json" id="schedule-i18n" set:html={JSON.stringify(t.a11y)} />
 
   <noscript>
     <div class="pretalx-widget">

src/i18n/menu/ca.ts

@@ -72,5 +72,6 @@ export const ca = {
       href: '/past-editions',
     },
   ],
+  skipToContent: 'Salta al contingut principal',
   new_tab: "(s'obre en una pestanya nova)",
 } as const

src/i18n/menu/en.ts

@@ -72,5 +72,6 @@ export const en = {
       href: '/past-editions',
     },
   ],
+  skipToContent: 'Skip to main content',
   new_tab: '(opens in new tab)',
 } as const

src/i18n/menu/es.ts

@@ -72,5 +72,6 @@ export const es = {
       href: '/past-editions',
     },
   ],
+  skipToContent: 'Saltar al contenido principal',
   new_tab: '(se abre en nueva pestaña)',
 } as const

src/i18n/programa/ca.ts

@@ -5,4 +5,11 @@ export const ca = {
   locale: 'ca',
   noscript: 'JavaScript està desactivat al teu navegador. Per veure el programa sense JavaScript,',
   noscriptLink: 'fes clic aquí',
+  a11y: {
+    statusTemplate: (count: number) => `Mostrant ${count} ${count === 1 ? 'sessió' : 'sessions'}`,
+    statusEmpty: 'No hi ha sessions que coincideixin amb els filtres',
+    searchLabel: 'Cerca sessions',
+    timezoneLabel: 'Zona horària',
+    closeFilters: 'Tanca els filtres',
+  },
 } as const

src/i18n/programa/en.ts

@@ -5,4 +5,11 @@ export const en = {
   locale: 'en',
   noscript: 'JavaScript is disabled in your browser. To view the schedule without JavaScript,',
   noscriptLink: 'click here',
+  a11y: {
+    statusTemplate: (count: number) => `Showing ${count} ${count === 1 ? 'session' : 'sessions'}`,
+    statusEmpty: 'No sessions match the filters',
+    searchLabel: 'Search sessions',
+    timezoneLabel: 'Timezone',
+    closeFilters: 'Close filters',
+  },
 } as const

src/i18n/programa/es.ts

@@ -5,4 +5,11 @@ export const es = {
   locale: 'es',
   noscript: 'JavaScript está deshabilitado en tu navegador. Para ver el programa sin JavaScript,',
   noscriptLink: 'haz click aquí',
+  a11y: {
+    statusTemplate: (count: number) => `Mostrando ${count} ${count === 1 ? 'sesión' : 'sesiones'}`,
+    statusEmpty: 'No hay sesiones que coincidan con los filtros',
+    searchLabel: 'Buscar sesiones',
+    timezoneLabel: 'Zona horaria',
+    closeFilters: 'Cerrar filtros',
+  },
 } as const

src/layouts/Layout.astro

@@ -5,6 +5,7 @@ import '@/style/global.css'
 import '@fontsource-variable/jetbrains-mono'
 import '@fontsource-variable/outfit'
 import { ClientRouter } from 'astro:transitions'
+import { menuTexts } from '@/i18n/menu'
 
 interface Props {
   title: string
@@ -13,6 +14,7 @@ interface Props {
 }
 const { lang = 'es' } = Astro.params
 const { title, description = 'PyconES 2026', fullWidth = false } = Astro.props
+const skipT = menuTexts[lang as keyof typeof menuTexts].skipToContent
 
 const siteUrl = Astro.site ? Astro.site.origin : 'https://2026.es.pycon.org'
 const canonicalURL = new URL(Astro.url.pathname, siteUrl)
@@ -115,6 +117,7 @@ const alternates = [
   <body
     class="bg-pycon-black font-outfit text-pycon-white antialiased min-h-screen relative flex flex-col transition-colors duration-300"
   >
+    <a href="#main-content" class="skip-link">{skipT}</a>
     <div
       class="fixed inset-0 bg-no-repeat bg-size-[80vh] bg-position-[140%_120%] opacity-5 pointer-events-none blur transition-all duration-300"
       style="background-image: var(--bg-symbol);"
@@ -123,6 +126,7 @@ const alternates = [
     <Header lang={lang as string} />
 
     <main
+      id="main-content"
       class:list={[
         'relative grow z-10 flex flex-col justify-center',
         fullWidth ? 'px-4 md:px-8' : 'container mx-auto p-4 md:p-8',
@@ -162,4 +166,39 @@ const alternates = [
   ::-webkit-scrollbar-thumb:hover {
     background: #8e8e8d;
   }
+
+  /* Skip link (visible on focus) */
+  .skip-link {
+    position: absolute;
+    top: -100px;
+    left: 1rem;
+    z-index: 1000;
+    padding: 0.75rem 1rem;
+    background: #fff;
+    color: #03004b;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transition: top 0.2s ease;
+  }
+  .skip-link:focus,
+  .skip-link:focus-visible {
+    top: 1rem;
+    outline: 2px solid #03004b;
+    outline-offset: 2px;
+  }
+
+  /* Screen reader only utility */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 </style>