fix: address CodeRabbit findings on #431

1. Mobile lang-toggle still had hardcoded aria-label="Toggle language".
   Now uses i18n.t('header.langToggleAria') + data-i18n-aria, matching
   the desktop fix from the parent commit.

2. de.json aria-label was English ("EN — switch to English"). Now
   properly localized: "EN — zu Englisch wechseln".

3. Anchor card heading ids are now namespaced with the category id.
   An anchor can belong to multiple categories and is rendered once per
   category section, so the previous "anchor-card-title-<id>" pattern
   produced duplicate DOM ids for those anchors. New pattern:
   "anchor-card-title-<categoryId>-<anchorId>".

Author: raifdmueller

website/src/components/card-grid.js

@@ -90,16 +90,21 @@ function renderCategorySection(category, allAnchors) {
       </h2>
 
       <div class="anchor-cards-grid">
-        ${categoryAnchors.map((anchor) => renderAnchorCard(anchor, color)).join('')}
+        ${categoryAnchors.map((anchor) => renderAnchorCard(anchor, color, category.id)).join('')}
       </div>
     </section>
   `
 }
 
 /**
- * Render a single anchor card
+ * Render a single anchor card.
+ *
+ * The optional `categoryId` argument is used to namespace the heading id
+ * used by `aria-labelledby`, since the same anchor may appear in multiple
+ * category sections (anchors can belong to more than one category) and
+ * the DOM must not contain duplicate ids.
  */
-function renderAnchorCard(anchor, categoryColor) {
+function renderAnchorCard(anchor, categoryColor, categoryId) {
   const isUmbrella = anchor.subAnchors && anchor.subAnchors.length > 0
   const umbrellaClass = isUmbrella ? ' anchor-card-umbrella' : ''
   const rolesCount = anchor.roles ? anchor.roles.length : 0
@@ -110,6 +115,8 @@ function renderAnchorCard(anchor, categoryColor) {
   const editTitle = i18n.t('card.edit')
   const copyLinkTitle = i18n.t('card.copyLink')
   const safeId = escapeHtml(anchor.id)
+  const safeCategoryId = escapeHtml(categoryId || 'uncat')
+  const cardTitleId = `anchor-card-title-${safeCategoryId}-${safeId}`
 
   return `
     <div
@@ -119,10 +126,10 @@ function renderAnchorCard(anchor, categoryColor) {
       data-tags="${escapeHtml(anchor.tags ? anchor.tags.join(',') : '')}"
       tabindex="0"
       role="button"
-      aria-labelledby="anchor-card-title-${safeId}"
+      aria-labelledby="${cardTitleId}"
     >
       <div class="anchor-card-header">
-        <h3 id="anchor-card-title-${safeId}" class="anchor-card-title">${escapeHtml(anchor.title)}</h3>
+        <h3 id="${cardTitleId}" class="anchor-card-title">${escapeHtml(anchor.title)}</h3>
         <div class="flex gap-1">
           <button
             class="anchor-copy-link-btn"

website/src/components/header.js

@@ -120,7 +120,8 @@ export function renderHeader() {
               <button
                 id="lang-toggle-mobile"
                 class="rounded-md px-2 py-1 text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-secondary)] transition-colors"
-                aria-label="Toggle language"
+                aria-label="${i18n.t('header.langToggleAria')}"
+                data-i18n-aria="header.langToggleAria"
               >${langLabel}</button>
               <button
                 id="theme-toggle-mobile"

website/src/translations/de.json

@@ -2,7 +2,7 @@
   "app.title": "Semantic Anchors",
   "app.description": "Gemeinsames Vokabular für LLM-Kommunikation",
   "header.langToggle": "EN",
-  "header.langToggleAria": "EN — switch to English",
+  "header.langToggleAria": "EN — zu Englisch wechseln",
   "header.slogan": "Ein Wort, und die KI versteht den Rest.",
   "header.themeToggle.dark": "Zum Dunkelmodus wechseln",
   "header.themeToggle.light": "Zum Hellmodus wechseln",