fix(programa): wire favourites filter through event delegation + add status

The 'Only favourites' filter button wasn't doing anything because two
click handlers were firing on each click:
1. The new event-delegation handler that toggles aria-pressed and
   the CSS class
2. The old direct listener (from the previous commit) that toggled
   aria-pressed again

Net effect: aria-pressed went true → false → true, leaving the
button exactly as it was. No visible change, no class added.

Fix: remove the old direct listener; the event-delegation handler
in the document click listener now owns both the per-session
favourite toggle and the filter toggle. Also refactored to share
a single announce() helper.

While here:
- Replace the buggy 'has-[:checked]:' Tailwind utilities (the button
  has no :checked state, it uses aria-pressed) with the correct
  'aria-pressed:' variants — those have proper specificity and
  the orange-pressed look now actually applies
- Add status announcements for the filter toggle via the existing
  #favorite-status live region: 'Favourites filter on. Showing N
  favourite session(s).' / 'Favourites filter off. Showing all
  sessions.'
- Decompose the i18n message into prefix + singular + plural words
  (filterOnPrefix, filterOnSingular, filterOnPlural, filterOff) so
  the script can build the count-aware message at runtime

Author: itziarZG

src/components/ProgramaPage.astro

@@ -51,9 +51,14 @@ const schedule = await getSchedule()
           <div class="max-w-3xl mx-auto mb-6 flex justify-end">
             <button
               type="button"
-              class="favorites-filter-btn inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-white/10 text-sm text-pycon-gray-25 hover:border-pycon-orange/50 hover:text-pycon-orange transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pycon-yellow has-[:checked]:bg-pycon-orange has-[:checked]:text-pycon-black has-[:checked]:font-semibold has-[:checked]:border-pycon-orange"
+              class="favorites-filter-btn inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-white/10 text-sm text-pycon-gray-25 hover:border-pycon-orange/50 hover:text-pycon-orange transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pycon-yellow aria-pressed:bg-pycon-orange aria-pressed:text-pycon-black aria-pressed:font-semibold aria-pressed:border-pycon-orange"
               aria-pressed="false"
+              aria-label={t.list.favoritesOnly}
               data-filter-favorites
+              data-filter-on-prefix={t.list.filterOnPrefix}
+              data-filter-on-singular={t.list.filterOnSingular}
+              data-filter-on-plural={t.list.filterOnPlural}
+              data-filter-off-message={t.list.filterOff}
             >
               <svg
                 class="w-4 h-4"
@@ -141,16 +146,6 @@ const schedule = await getSchedule()
   #schedule-list-view.filter-favorites-only .schedule-list li:not(.is-favorite) {
     display: none;
   }
-  .favorites-filter-btn[aria-pressed='true'] {
-    background-color: var(--color-pycon-orange, #fd6837);
-    color: #03004b;
-    font-weight: 600;
-    border-color: var(--color-pycon-orange, #fd6837);
-  }
-  .favorites-filter-btn[aria-pressed='true'] svg {
-    fill: currentColor;
-    stroke: currentColor;
-  }
 </style>
 
 <script is:inline src="https://pretalx.com/pycones-2026/widgets/schedule.js"></script>
@@ -252,38 +247,68 @@ const schedule = await getSchedule()
         empty.hidden = !(filterActive && count === 0)
       }
 
-      // Click handler: toggle, persist, update visual state and announce
+      // Click handler: handle both the per-session favourite button and
+      // the "only favourites" filter button. Event delegation on document
+      // so we don't depend on either button being in the DOM at script
+      // init time.
       document.addEventListener('click', (e) => {
-        const btn = e.target.closest && e.target.closest('.favorite-btn')
-        if (!btn) return
-        e.preventDefault()
-        const code = btn.getAttribute('data-session-code')
-        if (!code) return
-        const favs = readFavs()
-        const idx = favs.indexOf(code)
-        let added
-        if (idx >= 0) {
-          favs.splice(idx, 1)
-          added = false
-        } else {
-          favs.push(code)
-          added = true
+        const target = e.target.closest && e.target.closest('button')
+        if (!target) return
+
+        // Per-session favourite toggle
+        const favBtn = target.closest('.favorite-btn')
+        if (favBtn) {
+          e.preventDefault()
+          const code = favBtn.getAttribute('data-session-code')
+          if (!code) return
+          const favs = readFavs()
+          const idx = favs.indexOf(code)
+          let added
+          if (idx >= 0) {
+            favs.splice(idx, 1)
+            added = false
+          } else {
+            favs.push(code)
+            added = true
+          }
+          writeFavs(favs)
+          syncFavorites()
+          announce(added ? favBtn.dataset.addedMessage : favBtn.dataset.removedMessage)
+          return
         }
-        writeFavs(favs)
-        syncFavorites()
-        // Announce the state change via the live region. We clear it first
-        // so identical messages (e.g. clicking the same button twice) are
-        // re-announced by screen readers.
-        const status = document.getElementById('favorite-status')
-        if (status) {
-          const message = added ? btn.dataset.addedMessage : btn.dataset.removedMessage
-          status.textContent = ''
-          // Force a reflow so the new text triggers the live region reliably
-          void status.offsetWidth
-          status.textContent = message || ''
+
+        // "Only favourites" filter toggle
+        const filterBtn = target.closest('[data-filter-favorites]')
+        if (filterBtn) {
+          e.preventDefault()
+          const wasPressed = filterBtn.getAttribute('aria-pressed') === 'true'
+          const nowPressed = !wasPressed
+          filterBtn.setAttribute('aria-pressed', nowPressed ? 'true' : 'false')
+          const listView = document.getElementById('schedule-list-view')
+          if (listView) listView.classList.toggle('filter-favorites-only', nowPressed)
+          updateEmptyState()
+          const count = readFavs().length
+          const word = count === 1 ? filterBtn.dataset.filterOnSingular : filterBtn.dataset.filterOnPlural
+          const message = nowPressed
+            ? count > 0
+              ? `${filterBtn.dataset.filterOnPrefix}. Mostrando ${count} ${word}.`
+              : `${filterBtn.dataset.filterOnPrefix}.`
+            : filterBtn.dataset.filterOffMessage
+          announce(message)
         }
       })
 
+      // Write a message to the live region. Clears + forces a reflow so
+      // identical back-to-back messages still re-announce.
+      function announce(message) {
+        if (!message) return
+        const status = document.getElementById('favorite-status')
+        if (!status) return
+        status.textContent = ''
+        void status.offsetWidth
+        status.textContent = message
+      }
+
       // Re-sync when the user switches to the list view (widget may have
       // mutated localStorage in the same session).
       document.addEventListener('pycones:view-changed', syncFavorites)
@@ -293,18 +318,6 @@ const schedule = await getSchedule()
         if (e.key === FAV_KEY) syncFavorites()
       })
 
-      // Filter button: show only favourited sessions
-      const filterBtn = document.querySelector('[data-filter-favorites]')
-      if (filterBtn) {
-        filterBtn.addEventListener('click', () => {
-          const pressed = filterBtn.getAttribute('aria-pressed') === 'true'
-          filterBtn.setAttribute('aria-pressed', pressed ? 'false' : 'true')
-          const listView = document.getElementById('schedule-list-view')
-          if (listView) listView.classList.toggle('filter-favorites-only', !pressed)
-          updateEmptyState()
-        })
-      }
-
       // Initial render
       syncFavorites()
     })()

src/i18n/programa/ca.ts

@@ -31,6 +31,10 @@ export const ca = {
     favoriteRemoved: 'Tret de preferits',
     favoritesOnly: 'Només preferits',
     noFavorites: "Encara no tens preferits. Marca les sessions que t'interessin amb el cor.",
+    filterOnPrefix: 'Filtre de preferits activat',
+    filterOnSingular: 'sessió preferida',
+    filterOnPlural: 'sessions preferides',
+    filterOff: 'Filtre de preferits desactivat. Mostrant totes les sessions.',
     showAbstract: 'Mostra la descripció',
     hideAbstract: 'Amaga la descripció',
     talkLink: 'Veure detalls de la xerrada a Pretalx',

src/i18n/programa/en.ts

@@ -31,6 +31,10 @@ export const en = {
     favoriteRemoved: 'Removed from favourites',
     favoritesOnly: 'Only favourites',
     noFavorites: "You don't have any favourites yet. Tap the heart on the sessions you're interested in.",
+    filterOnPrefix: 'Favourites filter on',
+    filterOnSingular: 'favourite session',
+    filterOnPlural: 'favourite sessions',
+    filterOff: 'Favourites filter off. Showing all sessions.',
     showAbstract: 'Show description',
     hideAbstract: 'Hide description',
     talkLink: 'View talk details on Pretalx',

src/i18n/programa/es.ts

@@ -31,6 +31,10 @@ export const es = {
     favoriteRemoved: 'Quitado de favoritos',
     favoritesOnly: 'Solo favoritos',
     noFavorites: 'No tienes favoritos todavía. Marca las sesiones que te interesen con el corazón.',
+    filterOnPrefix: 'Filtro de favoritos activado',
+    filterOnSingular: 'sesión favorita',
+    filterOnPlural: 'sesiones favoritas',
+    filterOff: 'Filtro de favoritos desactivado. Mostrando todas las sesiones.',
     showAbstract: 'Ver descripción',
     hideAbstract: 'Ocultar descripción',
     talkLink: 'Ver detalles de la charla en Pretalx',