feat(programa): add accessible list view as alternative to Pretalx widget

Addresses #216 — the Pretalx widget's CSS grid layout is fundamentally
hard to navigate with a screen reader, no matter how much ARIA we inject.

Adds a parallel accessible list view rendered server-side from the
Pretalx API, with the widget preserved as an opt-in visual alternative.

Data layer:
- src/lib/schedule.ts — fetches schedule.json at build time, normalises
  per-day structure, returns null on failure (graceful fallback)
- src/types/schedule.ts — TS types for the Pretalx export shape

UI:
- src/components/ScheduleList.astro — semantic <ol> per day with
  <article> per session, <time datetime>, <details> for abstracts,
  lang attribute on text in non-default languages
- Toggle in ProgramaPage.astro: <fieldset> + radio group, default to
  the accessible list, persists choice in localStorage
- Widget remains as opt-in 'Visual grid' view, with all a11y
  enhancements from the previous commit intact

i18n:
- Adds 15 new strings to programa/{es,en,ca} (view toggle, day label,
  speaker/room/track/abstract labels, empty state)

Edge cases:
- Pretalx down or schedule not published: render friendly empty state
  with link to pretalx.com
- Build-time fetch is silent on failure (warning to stderr, no crash)

Author: itziarZG

src/components/ProgramaPage.astro

@@ -0,0 +1,149 @@
+---
+import type { Schedule } from '@/types/schedule'
+import { formatDayLabel, formatTime } from '@/lib/schedule'
+import { menuTexts } from '@/i18n/menu'
+import { programaTexts } from '@/i18n/programa'
+
+interface Props {
+  schedule: Schedule
+  lang: string
+}
+
+const { schedule, lang } = Astro.props
+const t = programaTexts[lang as keyof typeof programaTexts]
+const menuT = menuTexts[lang as keyof typeof menuTexts]
+---
+
+<div class="schedule-list">
+  {
+    schedule.days.map((day) => (
+      <section class="mb-12" aria-labelledby={`day-${day.index}-heading`}>
+        <h2
+          id={`day-${day.index}-heading`}
+          class="text-2xl md:text-3xl font-black text-white mb-6 flex items-baseline gap-3"
+        >
+          <span class="text-pycon-orange">{t.list.dayN(day.index)}</span>
+          <span class="text-base md:text-lg font-normal text-pycon-gray-25 capitalize">
+            {formatDayLabel(day.date, lang, schedule.timezone)}
+          </span>
+        </h2>
+        <ol class="flex flex-col gap-4 list-none m-0 p-0">
+          {day.sessions.map((s) => (
+            <li class="bg-pycon-black/40 rounded-2xl border border-white/5 p-5 md:p-6 transition-colors hover:border-pycon-orange/40 focus-within:border-pycon-orange/60">
+              <article>
+                <header class="flex flex-wrap items-baseline gap-x-4 gap-y-1 mb-3">
+                  <time datetime={s.date} class="text-sm font-mono text-pycon-yellow shrink-0">
+                    {formatTime(s.date, schedule.timezone)}–{formatTime(s.end, schedule.timezone)}
+                  </time>
+                  <span class="text-xs text-pycon-gray-25/70 shrink-0">{s.duration}</span>
+                  {s.track && (
+                    <span class="text-xs px-2 py-0.5 rounded-full bg-pycon-orange/15 text-pycon-orange border border-pycon-orange/30 shrink-0">
+                      {s.track}
+                    </span>
+                  )}
+                  {s.type && <span class="text-xs text-pycon-gray-25/70 shrink-0">{s.type}</span>}
+                </header>
+
+                <h3 class="text-lg md:text-xl font-bold text-white mb-2 leading-snug">{s.title}</h3>
+
+                {s.subtitle && <p class="text-sm text-pycon-gray-25 mb-3 italic">{s.subtitle}</p>}
+
+                {s.persons.length > 0 && (
+                  <p class="text-sm text-pycon-gray-25 mb-3">
+                    <span class="font-semibold text-white">{t.list.by}: </span>
+                    {s.persons.map((p, i) => {
+                      const sep =
+                        i === 0
+                          ? ''
+                          : i === s.persons.length - 1
+                            ? ' & '
+                            : s.persons.length === 2
+                              ? ' & '
+                              : ', '
+                      return (
+                        <>
+                          {sep}
+                          <span class="text-white">{p.public_name || p.name}</span>
+                        </>
+                      )
+                    })}
+                  </p>
+                )}
+
+                <dl class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-pycon-gray-25/80 mb-4">
+                  <div class="flex items-baseline gap-1.5">
+                    <dt class="font-semibold text-white">{t.list.room}:</dt>
+                    <dd>{s.room}</dd>
+                  </div>
+                  {s.language && (
+                    <div class="flex items-baseline gap-1.5">
+                      <dt class="font-semibold text-white">{t.list.language}:</dt>
+                      <dd>
+                        <span lang={s.language}>{s.language.toUpperCase()}</span>
+                      </dd>
+                    </div>
+                  )}
+                </dl>
+
+                {s.abstract && (
+                  <details class="group mb-3">
+                    <summary class="cursor-pointer text-sm text-pycon-yellow hover:text-white transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pycon-yellow rounded inline-flex items-center gap-1.5 select-none list-none [&::-webkit-details-marker]:hidden">
+                      <svg
+                        class="w-3.5 h-3.5 transition-transform group-open:rotate-90"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M9 5l7 7-7 7"
+                        />
+                      </svg>
+                      <span class="group-open:hidden">{t.list.showAbstract}</span>
+                      <span class="hidden group-open:inline">{t.list.hideAbstract}</span>
+                    </summary>
+                    <p
+                      lang={s.language === 'en' ? 'en' : s.language === 'ca' ? 'ca' : 'es'}
+                      class="mt-3 text-sm text-pycon-gray-25 leading-relaxed"
+                    >
+                      {s.abstract}
+                    </p>
+                  </details>
+                )}
+
+                {s.url && (
+                  <a
+                    href={s.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={`${s.title} — ${t.list.talkLink} ${menuT.new_tab}`}
+                    class="inline-flex items-center gap-1.5 text-sm text-pycon-yellow hover:text-white transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pycon-yellow rounded"
+                  >
+                    <span>{t.list.talkLink}</span>
+                    <svg
+                      class="w-3.5 h-3.5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                      />
+                    </svg>
+                  </a>
+                )}
+              </article>
+            </li>
+          ))}
+        </ol>
+      </section>
+    ))
+  }
+</div>

src/components/ScheduleList.astro

@@ -12,4 +12,22 @@ export const ca = {
     timezoneLabel: 'Zona horària',
     closeFilters: 'Tanca els filtres',
   },
+  list: {
+    viewModeLegend: 'Mode de visualització del programa',
+    viewModeList: 'Llista accessible',
+    viewModeGrid: 'Graella visual',
+    dayN: (n: number) => `Dia ${n}`,
+    speakers: (count: number) => (count === 1 ? 'Ponent' : 'Ponents'),
+    by: 'Per',
+    room: 'Sala',
+    track: 'Track',
+    type: 'Tipus',
+    language: 'Idioma',
+    showAbstract: 'Mostra la descripció',
+    hideAbstract: 'Amaga la descripció',
+    talkLink: 'Veure detalls de la xerrada a Pretalx',
+    emptyTitle: 'El horari encara no està disponible',
+    emptyBody: 'Estem acabant de preparar el cronograma. Torna a visitar-nos els propers dies.',
+    emptyCta: 'Consulta el horari a Pretalx',
+  },
 } as const

src/i18n/programa/ca.ts

@@ -12,4 +12,22 @@ export const en = {
     timezoneLabel: 'Timezone',
     closeFilters: 'Close filters',
   },
+  list: {
+    viewModeLegend: 'Schedule view mode',
+    viewModeList: 'Accessible list',
+    viewModeGrid: 'Visual grid',
+    dayN: (n: number) => `Day ${n}`,
+    speakers: (count: number) => (count === 1 ? 'Speaker' : 'Speakers'),
+    by: 'By',
+    room: 'Room',
+    track: 'Track',
+    type: 'Type',
+    language: 'Language',
+    showAbstract: 'Show description',
+    hideAbstract: 'Hide description',
+    talkLink: 'View talk details on Pretalx',
+    emptyTitle: 'The schedule is not available yet',
+    emptyBody: "We're still putting the programme together. Check back in a few days.",
+    emptyCta: 'See the schedule on Pretalx',
+  },
 } as const

src/i18n/programa/en.ts

@@ -12,4 +12,22 @@ export const es = {
     timezoneLabel: 'Zona horaria',
     closeFilters: 'Cerrar filtros',
   },
+  list: {
+    viewModeLegend: 'Modo de visualización del programa',
+    viewModeList: 'Lista accesible',
+    viewModeGrid: 'Grilla visual',
+    dayN: (n: number) => `Día ${n}`,
+    speakers: (count: number) => (count === 1 ? 'Ponente' : 'Ponentes'),
+    by: 'Por',
+    room: 'Sala',
+    track: 'Track',
+    type: 'Tipo',
+    language: 'Idioma',
+    showAbstract: 'Ver descripción',
+    hideAbstract: 'Ocultar descripción',
+    talkLink: 'Ver detalles de la charla en Pretalx',
+    emptyTitle: 'El horario todavía no está disponible',
+    emptyBody: 'Estamos terminando de armar el cronograma. Vuelve a visitarnos en los próximos días.',
+    emptyCta: 'Consultar el cronograma en Pretalx',
+  },
 } as const

src/i18n/programa/es.ts

@@ -0,0 +1,98 @@
+import type { PretalxScheduleResponse, Schedule, ScheduleDay, PretalxSession } from '@/types/schedule'
+
+const PRETALX_EVENT = 'pycones-2026'
+const SCHEDULE_URL = `https://pretalx.com/${PRETALX_EVENT}/schedule/export/schedule.json`
+const FALLBACK_TIMEZONE = 'Europe/Madrid'
+
+export class ScheduleNotAvailableError extends Error {
+  constructor(public readonly cause: unknown) {
+    super(`Schedule for ${PRETALX_EVENT} is not available`)
+    this.name = 'ScheduleNotAvailableError'
+  }
+}
+
+interface FetchOptions {
+  /** When true, log warnings on stderr instead of throwing. Default: true. */
+  silent?: boolean
+}
+
+/**
+ * Fetches the schedule JSON from Pretalx and normalises it into a flat
+ * day-by-day structure that's easy to render. Returns `null` if the schedule
+ * is not available (e.g. event not yet published) so the caller can render
+ * a fallback state instead of crashing the build.
+ */
+export async function getSchedule(opts: FetchOptions = {}): Promise<Schedule | null> {
+  const { silent = true } = opts
+
+  let data: PretalxScheduleResponse
+  try {
+    const res = await fetch(SCHEDULE_URL)
+    if (!res.ok) {
+      if (silent) console.warn(`[schedule] Pretalx returned ${res.status} for ${PRETALX_EVENT}`)
+      return null
+    }
+    data = (await res.json()) as PretalxScheduleResponse
+  } catch (err) {
+    if (silent) console.warn(`[schedule] Fetch failed: ${(err as Error).message}`)
+    return null
+  }
+
+  if (!data?.schedule?.conference) {
+    if (silent) console.warn(`[schedule] Unexpected payload shape`)
+    return null
+  }
+
+  const conf = data.schedule.conference
+
+  // day.rooms is a dict { [roomName]: Session[] } — flatten into a single list per day
+  const dayEntries = conf.days as unknown as Array<
+    PretalxScheduleResponse['schedule']['conference']['days'][number] & {
+      rooms?: Record<string, PretalxSession[]>
+    }
+  >
+
+  const days: ScheduleDay[] = dayEntries
+    .map((d) => {
+      const sessions = d.rooms ? Object.values(d.rooms).flat() : []
+      return {
+        index: d.index,
+        date: d.date,
+        sessions: sessions.sort((a, b) => a.date.localeCompare(b.date)),
+      }
+    })
+    .filter((d) => d.sessions.length > 0)
+
+  return {
+    conferenceTitle: conf.title,
+    timezone: conf.time_zone_name || FALLBACK_TIMEZONE,
+    days,
+  }
+}
+
+/**
+ * Formats an ISO 8601 datetime in the event's timezone as a human label
+ * like "Viernes 6 de noviembre" / "Friday, November 6".
+ */
+export function formatDayLabel(date: string, locale: string, timezone: string): string {
+  const lang = locale === 'ca' ? 'ca-ES' : locale === 'en' ? 'en-US' : 'es-ES'
+  return new Intl.DateTimeFormat(lang, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    timeZone: timezone,
+  }).format(new Date(date))
+}
+
+/**
+ * Formats the time portion of an ISO 8601 datetime in the event's timezone.
+ * Returns "HH:MM" in 24h format.
+ */
+export function formatTime(iso: string, timezone: string): string {
+  return new Intl.DateTimeFormat('en-GB', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+    timeZone: timezone,
+  }).format(new Date(iso))
+}