Changeset 1c6d61c in Klonkt

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@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/partials/shared-styles.ejs (modified) (1 diff)
• views/partials/view-switcher.ejs (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2133 +2133 @@
    Niet op de Archive-pagina: daar is geen "huidige" timeline/grid-keuze, dus beide
    knoppen blijven neutraal (grijs). */
-body[data-feed-view="timeline"]:not(.on-archive):not(.on-shows):not(.on-downloads) .view-switch-btn[data-view="timeline"],
-body[data-feed-view="grid"]:not(.on-archive):not(.on-shows):not(.on-downloads) .view-switch-btn[data-view="grid"] {
-    background: var(--ink);
-    color: var(--paper);
-    border-color: var(--ink);
-}
+/* Actieve Tijdlijn/Grid-state wordt nu gestuurd via [aria-selected="true"] (gezet
+   door syncAria, die óók op htmx:afterSettle draait) i.p.v. body[data-feed-view].
+   Reden: body-class/attribuut-CSS pakte niet betrouwbaar na een htmx-OOB-swap;
+   een element-attribuut wel. De witte active-regel staat in shared-styles. */
 .view-switch-btn .icon { width: 1rem; height: 1rem; }
 

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

src/views/partials/view-switcher.ejs

@@ -36 +36 @@
     <div class="view-switcher" role="tablist" aria-label="Weergave">
       <button type="button" class="view-switch-btn" data-view="timeline" role="tab"
-              aria-selected="<%= (typeof site !== 'undefined' && site && site.feed_view_default === 'grid') ? 'false' : 'true' %>">
+              aria-selected="<%= (!_neutral && !(typeof site !== 'undefined' && site && site.feed_view_default === 'grid')) ? 'true' : 'false' %>">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
         <span>Tijdlijn</span>
       </button>
       <button type="button" class="view-switch-btn" data-view="grid" role="tab"
-              aria-selected="<%= (typeof site !== 'undefined' && site && site.feed_view_default === 'grid') ? 'true' : 'false' %>">
+              aria-selected="<%= (!_neutral && (typeof site !== 'undefined' && site && site.feed_view_default === 'grid')) ? 'true' : 'false' %>">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
         <span>Grid</span>

src/views/shell.ejs

@@ -384 +384 @@
 
   function syncAria() {
+    // Alleen op een feed-pagina hoort Tijdlijn/Grid 'actief' (wit) te zijn; op
+    // agenda/downloads/post/etc. beide grijs. Inline feed-check (FEED_PAGE_CLASSES
+    // staat verderop, maar deze functie draait al bij init).
+    var _feedC = ['on-home','on-tag','on-type','on-user','on-cirkel'];
+    var _onFeed = _feedC.some(function(c){ return body.classList.contains(c); });
     document.querySelectorAll('.view-switch-btn').forEach(function(b) {
-      b.setAttribute('aria-selected', b.dataset.view === body.dataset.feedView ? 'true' : 'false');
+      b.setAttribute('aria-selected', (_onFeed && b.dataset.view === body.dataset.feedView) ? 'true' : 'false');
     });
     document.querySelectorAll('.grid-cols-btn').forEach(function(b) {