Changeset 1c6d61c in Klonkt for src/views/partials/shared-styles.ejs

Timestamp:

06/20/2026 08:19:11 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

cf0de0c

Parents:

4dcefa1

Message:

fix(nav): Timeline/Grid active state via aria-selected (htmx-robust)

Root cause: body-attribute CSS (body[data-feed-view]) does NOT react reliably
after an htmx OOB swap; element attributes do. Therefore the active Timeline/Grid
state is now via [aria-selected="true"] (set by syncAria, which fires on
htmx:afterSettle) instead of body[data-feed-view]. syncAria sets aria-selected
only on feed pages → on calendar/downloads/post both are grey. Template also
sets the initial aria-selected neutral on non-feed pages.

Co-Authored-By: Claude <noreply@…>

File:

• src/views/partials/shared-styles.ejs (modified) (1 diff)

src/views/partials/shared-styles.ejs

@@ -36 +36 @@
 }
 .view-switch-btn:hover { color: var(--ink); }
-.view-switch-btn[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
+/* Actief = wit (lichte achtergrond, donkere tekst). Via aria-selected (element-
+   attribuut, door syncAria gezet + op htmx:afterSettle) → htmx-robuust. Op niet-
+   feed-pagina's zet syncAria aria-selected=false → beide grijs. */
+.view-switch-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
 
 /* Agenda = een EIGEN pill (los van Tijdlijn/Grid, zodat de feed-toggle nooit