From: Kai Moritz <kai.milan.moritz@googlemail.com>
Date: Fri, 19 Jun 2026 10:22:34 +0000 (+0200)
Subject: Alias-Hinweis im Sitemap-Menü für Barrierefreiheit
X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=294fbef62526e7b6f116284530cbd9e496f7c187;p=website

Alias-Hinweis im Sitemap-Menü für Barrierefreiheit

Alias-Einträge im Sitemap-Menü erhalten jetzt einen Hinweis-Span
'(Schnellzugriff)' direkt nach dem Titel-Element, außerhalb von <strong>.
Dadurch ist der Hinweis nie fett – auch nicht wenn die Seite aktiv ist.

Im CSS (base/navigation.scss) wird #submenu .alias-hint ausgeblendet, sodass
der Hinweis nur im Layout 'None' (kein CSS) sichtbar bleibt – für
Screen-Reader und Text-Browser.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---

diff --git a/CLAUDE.md b/CLAUDE.md
index a8f7fbc8..78481cdc 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -138,7 +138,9 @@ Der Projects-Bereich unterscheidet zwischen **sichtbaren** und **nicht sichtbare
 
 **Alias-Einträge (`params.alias: true`):** Seiten, die in `stili-json` in mehreren `childs`-Listen auftauchen, werden vom Import-Skript an mehreren Stellen im Content-Tree abgelegt. Die primäre Datei (kanonischer Ort, mit Body + Routing) folgt den `crumbs`/`path`-Feldern. Zusätzliche **Stub-Dateien** (leer, kein Routing) entstehen an den weiteren Positionen und erhalten `params.alias: true`.
 
-In `BlogNav.astro` werden Alias-Nodes mit der CSS-Klasse `alias` versehen. In der `off`-Berechnung überspringen Alias-Nodes `isCurrent` und `isAncestor` — dadurch sind sie im Classic-Layout versteckt, wenn die Seite aktiv ist (der kanonische Eintrag übernimmt die Darstellung). Sichtbar sind sie als Geschwister (normale `isSibling`-Logik). Im Layout „None" (kein CSS) erscheinen alle Einträge, kanonischer und Alias-Eintrag beide fett.
+In `BlogNav.astro` werden Alias-Nodes mit der CSS-Klasse `alias` versehen. In der `off`-Berechnung überspringen Alias-Nodes `isCurrent` und `isAncestor` — dadurch sind sie im Classic-Layout versteckt, wenn die Seite aktiv ist (der kanonische Eintrag übernimmt die Darstellung). Sichtbar sind sie als Geschwister (normale `isSibling`-Logik).
+
+Alias-Nodes erhalten zusätzlich einen Barrierefreiheits-Hinweis im Markup: `<span class="alias-hint"> (Schnellzugriff)</span>` direkt nach dem Titel-Element (`<strong>` oder `<a>`). Der Hinweis steht **außerhalb** von `<strong>` und ist damit nie fett — auch nicht wenn die Seite aktiv ist. Im Layout „None" (kein CSS) erscheint der Hinweis, damit Nutzende von Text-Browsern und Screen-Readern erkennen, dass dieser Eintrag ein Zusatzzugang zu einer auch anderswo gelisteten Seite ist. Im CSS (`base/navigation.scss`: `#submenu .alias-hint { display: none }`) wird er in allen Screen-Layouts ausgeblendet. Der kanonische Eintrag erhält keinen Hinweis.
 
 **Generierte Inhalte (apidocs, xref etc.):** Maven-Site-Outputs liegen fertig generiert in `public/projects/PROJEKT_NAME/VERSION/` und werden als statische Dateien ausgeliefert — ohne Astro-Layout, ohne HTML-Anpassungen, ohne Routing-Dateien in `src/pages/`. `src/lib/projects.ts` (`generatedDocNodes()`) erkennt diese Verzeichnisse zur Build-Zeit automatisch und fügt sie als Nav-Blatteinträge hinzu:
 
diff --git a/src/components/BlogNav.astro b/src/components/BlogNav.astro
index 8508f2aa..b398e671 100644
--- a/src/components/BlogNav.astro
+++ b/src/components/BlogNav.astro
@@ -57,15 +57,18 @@ function inSubtree<T extends { url: string; children?: T[] }>(node: T, url: stri
 // A nav item is visible (not off) when it is: current, ancestor of current,
 // sibling of current (only when current is not a section-index node), or child of current.
 // `inPath` = inSubtree(node, currentUrl), pre-computed by the caller to avoid double traversal.
+// `isAlias` = true for nav-only stub entries: isCurrent and isAncestor are suppressed so the
+// alias is hidden in Classic layout when its page is active (the canonical entry handles that).
 function nodeOff(
   nodeUrl: string,
   parentUrl: string,
   inPath: boolean,
   currentParentUrl: string,
   currentIsNode: boolean,
+  isAlias = false,
 ): boolean {
-  const isCurrent  = nodeUrl === currentUrl;
-  const isAncestor = inPath && !isCurrent;
+  const isCurrent  = !isAlias && nodeUrl === currentUrl;
+  const isAncestor = !isAlias && inPath && !isCurrent;
   const isSibling  = parentUrl === currentParentUrl && !currentIsNode;
   const isChild    = parentUrl === currentUrl;
   return !(isCurrent || isAncestor || isSibling || isChild);
@@ -142,8 +145,8 @@ const activeProjectCurrentIsNode = activeProjectCurrentNode?.isNode ?? false;
 
 // Partial application of nodeOff bound to the Projects subtree's current-page context
 const _projCurrentParentUrl = activeProjectCurrentParent?.url ?? '';
-const projNodeOff = (nodeUrl: string, parentUrl: string, inPath: boolean) =>
-  nodeOff(nodeUrl, parentUrl, inPath, _projCurrentParentUrl, activeProjectCurrentIsNode);
+const projNodeOff = (nodeUrl: string, parentUrl: string, inPath: boolean, isAlias = false) =>
+  nodeOff(nodeUrl, parentUrl, inPath, _projCurrentParentUrl, activeProjectCurrentIsNode, isAlias);
 
 // ── Blog URL classification ────────────────────────────────────────────────────
 const mainSections = [
@@ -355,10 +358,10 @@ const activeTagSlug  = onTagTerm      ? currentUrl.replace(/^\/tags\//, '').repl
               <ul class={`s${rootInPath ? ' active' : ''}`}>
                 {root.children.map(child => {
                   const childInPath = inSubtree(child, currentUrl);
-                  const childOff    = projNodeOff(child.url, root.url, childInPath);
+                  const childOff    = projNodeOff(child.url, root.url, childInPath, child.isAlias);
                   const childIsNode = child.isNode;
                   return (
-                    <li class={`s${childIsNode ? ' sub' : ''}${childOff ? ' off' : ''}`}>
+                    <li class={`s${childIsNode ? ' sub' : ''}${child.isAlias ? ' alias' : ''}${childOff ? ' off' : ''}`}>
                       {child.url === currentUrl
                         ? <strong class="s">{child.title}</strong>
                         : <a href={child.url} class={childInPath ? 's selected' : 's'}>
@@ -369,10 +372,10 @@ const activeTagSlug  = onTagTerm      ? currentUrl.replace(/^\/tags\//, '').repl
                         <ul class={`s${childInPath ? ' active' : ''}`}>
                           {child.children.map(grand => {
                             const grandInPath = inSubtree(grand, currentUrl);
-                            const grandOff    = projNodeOff(grand.url, child.url, grandInPath);
+                            const grandOff    = projNodeOff(grand.url, child.url, grandInPath, grand.isAlias);
                             const grandIsNode = grand.isNode;
                             return (
-                              <li class={`s${grandIsNode ? ' sub' : ''}${grandOff ? ' off' : ''}`}>
+                              <li class={`s${grandIsNode ? ' sub' : ''}${grand.isAlias ? ' alias' : ''}${grandOff ? ' off' : ''}`}>
                                 {grand.url === currentUrl
                                   ? <strong class="s">{grand.title}</strong>
                                   : <a href={grand.url} class={grandInPath ? 's selected' : 's'}>
@@ -383,9 +386,9 @@ const activeTagSlug  = onTagTerm      ? currentUrl.replace(/^\/tags\//, '').repl
                                   <ul class={`s${grandInPath ? ' active' : ''}`}>
                                     {grand.children.map(ggrand => {
                                       const ggInPath = ggrand.url === currentUrl;
-                                      const ggOff    = projNodeOff(ggrand.url, grand.url, ggInPath);
+                                      const ggOff    = projNodeOff(ggrand.url, grand.url, ggInPath, ggrand.isAlias);
                                       return (
-                                        <li class={`s${ggOff ? ' off' : ''}`}>
+                                        <li class={`s${ggrand.isAlias ? ' alias' : ''}${ggOff ? ' off' : ''}`}>
                                           {ggInPath
                                             ? <strong class="s">{ggrand.title}</strong>
                                             : <a href={ggrand.url} class="s">{ggrand.title}</a>
diff --git a/src/content.config.ts b/src/content.config.ts
index 079cd458..d07f9e8f 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -30,6 +30,7 @@ const projectPageSchema = z.object({
   params: z.object({
     current: z.boolean(),
     canonical: z.string().optional(),
+    alias: z.boolean().optional(),
   }),
 });
 
diff --git a/src/lib/projects.ts b/src/lib/projects.ts
index feff57b1..125ee040 100644
--- a/src/lib/projects.ts
+++ b/src/lib/projects.ts
@@ -9,6 +9,7 @@ export interface ProjectNavNode {
   url: string;
   weight: number;
   isNode: boolean;   // true when this entry is a section (_index.html)
+  isAlias: boolean;  // true for nav-only stub entries (same url as canonical, empty body)
   children: ProjectNavNode[];
 }
 
@@ -92,6 +93,7 @@ function buildNavTree(
       url:   entry.data.url,
       weight: entry.data.weight,
       isNode,
+      isAlias: entry.data.params.alias ?? false,
       children,
     };
   }