coop/shared
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix menu item highlighting with aria-selected attribute

Browse Source 
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>
This commit is contained in:
giles
2026-02-19 13:56:07 +00:00
parent 6db91cb3c1
commit 3febef074b
3 changed files with 5 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/templates/_types/menu_items/_nav_oob.html
View File

@@ -1,4 +1,5 @@
{% set _app_slugs = {'cart': cart_url('/')} %} {% 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" <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" id="menu-items-nav-wrapper"
hx-swap-oob="outerHTML"> hx-swap-oob="outerHTML">
@@ -14,6 +15,7 @@
hx-swap="outerHTML" hx-swap="outerHTML"
hx-push-url="true" hx-push-url="true"
{% endif %} {% endif %}
aria-selected="{{ 'true' if (item.slug == _first_seg or item.slug == app_name) else 'false' }}"
class="{{styles.nav_button}}" class="{{styles.nav_button}}"
> >
{% if item.feature_image %} {% if item.feature_image %}

2
browser/templates/_types/root/_nav.html
View File

@@ -1,4 +1,5 @@
{% set _app_slugs = {'cart': cart_url('/')} %} {% 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" <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"> id="menu-items-nav-wrapper">
{% from 'macros/scrolling_menu.html' import scrolling_menu with context %} {% 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 + '/')) %} {% set _href = _app_slugs.get(item.slug, coop_url('/' + item.slug + '/')) %}
<a <a
href="{{ _href }}" href="{{ _href }}"
aria-selected="{{ 'true' if (item.slug == _first_seg or item.slug == app_name) else 'false' }}"
class="{{styles.nav_button_less_pad}}" class="{{styles.nav_button_less_pad}}"
> >
{% if item.feature_image %} {% if item.feature_image %}

1
infrastructure/jinja_setup.py
View File

@@ -37,6 +37,7 @@ def setup_jinja(app: Quart) -> None:
app.jinja_env.globals["level"] = level app.jinja_env.globals["level"] = level
app.jinja_env.globals["level_up"] = level_up app.jinja_env.globals["level_up"] = level_up
app.jinja_env.globals["menu_colour"] = "sky" 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 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 [.hover-capable_&]:hover:bg-yellow-300