From 3b5da7dbe0b975012626dc290946219432818a69 Mon Sep 17 00:00:00 2001
From: Julius Scheuerer <95489434+JuliusScheuerer@users.noreply.github.com>
Date: Wed, 25 Mar 2026 20:48:59 +0100
Subject: [PATCH] Make tier collapse headers keyboard accessible

Add role="button", tabindex="0", and aria-expanded to tier headers.
Handle Enter and Space keydown events to toggle collapse. Extract
shared collapse logic into toggleTierCollapse() helper that updates
aria-expanded state for screen readers.
---
 .../web/static/js/review.js                   | 31 ++++++++++++++-----
 .../web/templates/results.html                |  2 +-
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/document_anonymizer/web/static/js/review.js b/src/document_anonymizer/web/static/js/review.js
index 8f7c15b..2a0941d 100644
--- a/src/document_anonymizer/web/static/js/review.js
+++ b/src/document_anonymizer/web/static/js/review.js
@@ -72,10 +72,11 @@
       selectAlls[j].addEventListener("change", onSelectAllChange);
     }
 
-    // Tier header toggle (collapse/expand) — click on header but not on checkbox
+    // Tier header toggle (collapse/expand) — click or Enter/Space on header
     var tierHeaders = document.querySelectorAll("[data-tier-toggle]");
     for (var k = 0; k < tierHeaders.length; k++) {
       tierHeaders[k].addEventListener("click", onTierHeaderClick);
+      tierHeaders[k].addEventListener("keydown", onTierHeaderKeydown);
     }
 
     // Clickable <mark> tags in preview
@@ -119,18 +120,32 @@
   function onTierHeaderClick(e) {
     // Don't toggle collapse when clicking the checkbox itself
     if (e.target.classList.contains("select-all-checkbox")) return;
+    toggleTierCollapse(e.currentTarget);
+  }
+
+  function onTierHeaderKeydown(e) {
+    // Enter or Space toggles collapse (standard button behavior)
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggleTierCollapse(e.currentTarget);
+    }
+  }
 
-    var tier = e.currentTarget.dataset.tierToggle;
+  function toggleTierCollapse(header) {
+    var tier = header.dataset.tierToggle;
     var body = document.getElementById("tier-body-" + tier);
     var icon = document.getElementById("toggle-icon-" + tier);
     if (!body) return;
 
-    if (body.hidden) {
-      body.hidden = false;
-      if (icon) icon.classList.remove("tier-toggle-icon--collapsed");
-    } else {
-      body.hidden = true;
-      if (icon) icon.classList.add("tier-toggle-icon--collapsed");
+    var expanded = !body.hidden;
+    body.hidden = expanded;
+    header.setAttribute("aria-expanded", String(!expanded));
+    if (icon) {
+      if (expanded) {
+        icon.classList.add("tier-toggle-icon--collapsed");
+      } else {
+        icon.classList.remove("tier-toggle-icon--collapsed");
+      }
     }
   }
 
diff --git a/src/document_anonymizer/web/templates/results.html b/src/document_anonymizer/web/templates/results.html
index fcac789..e4f3c0b 100644
--- a/src/document_anonymizer/web/templates/results.html
+++ b/src/document_anonymizer/web/templates/results.html
@@ -30,7 +30,7 @@ <h3 class="diff-heading">{{ _("results.review_heading") }}</h3>
             {% set tier_entities = entities_by_tier.get(tier_key, []) %}
             {% if tier_entities %}
             <div class="tier-section" data-tier="{{ tier_key }}">
-                <div class="tier-header" data-tier-toggle="{{ tier_key }}">
+                <div class="tier-header" data-tier-toggle="{{ tier_key }}" role="button" tabindex="0" aria-expanded="true">
                     <span class="tier-toggle-icon" id="toggle-icon-{{ tier_key }}">&#9660;</span>
                     <input
                         type="checkbox"