From 3febef074ba2cdd98d2c71da30afc6272e71eee0 Mon Sep 17 00:00:00 2001
From: giles <giles.bradshaw@sigyl.com>
Date: Thu, 19 Feb 2026 13:56:07 +0000
Subject: [PATCH] Fix menu item highlighting with aria-selected attribute
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added app_name Jinja global and aria-selected to nav menu links.
Matches by first path segment (e.g. /market/... → "market") or by
app_name for cross-domain cases (e.g. cart app → "cart" menu item).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 browser/templates/_types/menu_items/_nav_oob.html | 2 ++
 browser/templates/_types/root/_nav.html           | 2 ++
 infrastructure/jinja_setup.py                     | 1 +
 3 files changed, 5 insertions(+)

diff --git a/browser/templates/_types/menu_items/_nav_oob.html b/browser/templates/_types/menu_items/_nav_oob.html
index 3dfe411..eaba4f2 100644
--- a/browser/templates/_types/menu_items/_nav_oob.html
+++ b/browser/templates/_types/menu_items/_nav_oob.html
@@ -1,4 +1,5 @@
 {% set _app_slugs = {'cart': cart_url('/')} %}
+{% set _first_seg = request.path.strip('/').split('/')[0] %}
 <div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
      id="menu-items-nav-wrapper"
      hx-swap-oob="outerHTML">
@@ -14,6 +15,7 @@
         hx-swap="outerHTML"
         hx-push-url="true"
       {% endif %}
+      aria-selected="{{ 'true' if (item.slug == _first_seg or item.slug == app_name) else 'false' }}"
       class="{{styles.nav_button}}"
     >
       {% if item.feature_image %}
diff --git a/browser/templates/_types/root/_nav.html b/browser/templates/_types/root/_nav.html
index de26699..604f85f 100644
--- a/browser/templates/_types/root/_nav.html
+++ b/browser/templates/_types/root/_nav.html
@@ -1,4 +1,5 @@
 {% set _app_slugs = {'cart': cart_url('/')} %}
+{% set _first_seg = request.path.strip('/').split('/')[0] %}
 <div class="flex flex-col sm:flex-row sm:items-center gap-2 border-r border-stone-200 mr-2 sm:max-w-2xl"
      id="menu-items-nav-wrapper">
   {% from 'macros/scrolling_menu.html' import scrolling_menu with context %}
@@ -6,6 +7,7 @@
     {% set _href = _app_slugs.get(item.slug, coop_url('/' + item.slug + '/')) %}
     <a
       href="{{ _href }}"
+      aria-selected="{{ 'true' if (item.slug == _first_seg or item.slug == app_name) else 'false' }}"
       class="{{styles.nav_button_less_pad}}"
     >
       {% if item.feature_image %}
diff --git a/infrastructure/jinja_setup.py b/infrastructure/jinja_setup.py
index 14acd5d..33e05b7 100644
--- a/infrastructure/jinja_setup.py
+++ b/infrastructure/jinja_setup.py
@@ -37,6 +37,7 @@ def setup_jinja(app: Quart) -> None:
     app.jinja_env.globals["level"] = level
     app.jinja_env.globals["level_up"] = level_up
     app.jinja_env.globals["menu_colour"] = "sky"
+    app.jinja_env.globals["app_name"] = app.name
 
     nav_button = """justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black
       [.hover-capable_&]:hover:bg-yellow-300