From 1431cad8d32f17eac911e9e3c3d262facbba0d02 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 25 Feb 2026 21:01:12 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20table=20sor?=
 =?UTF-8?q?ting=20accessibility=20and=20fix=20semantic=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixed mismatched `</button>` tag in `base.html` for `quickScanTrigger`.
- Enhanced table sorting in `list_base.html` by adding keyboard support (`role="button"`, `tabindex="0"`, `Enter`/`Space` listeners).
- Improved screen reader support with `aria-sort` and descriptive `aria-label` attributes for sorting headers.
- Added focus styles for keyboard users.
- Updated Palette's journal with accessibility learnings.

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
---
 .Jules/palette.md                   |  4 ++++
 app/templates/base.html             |  2 +-
 app/templates/shared/list_base.html | 22 ++++++++++++++++++++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 3ce56a2..4d74baf 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -7,3 +7,7 @@
 ## 2026-02-15 - [Semantic Form Labels]
 **Learning:** Even with clear visual labels, missing `for` attributes on `<label>` elements prevents proper association with inputs for assistive technologies.
 **Action:** Explicitly link labels and inputs using `for` and `id` attributes in all form components.
+
+## 2025-02-25 - [Table Sorting Accessibility]
+**Learning:** Enhancing JavaScript-generated table headers with `role="button"`, `tabindex="0"`, and `onkeydown` handlers significantly improves keyboard accessibility. Using `aria-sort` on the parent `th` provides essential feedback to screen reader users about the current sort state.
+**Action:** Always include keyboard support and ARIA sort attributes when implementing client-side table sorting.
diff --git a/app/templates/base.html b/app/templates/base.html
index d35052c..9d24adb 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -243,7 +243,7 @@
                     <!-- Scanner Animation -->
                     <div class="absolute w-full h-0.5 bg-primary/50 -top-1 left-0 animate-scanner after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-primary/30"></div>
                 </div>
-            </button>
+            </div>
             
             <!-- Trennlinie -->
             <div class="sidebar-divider"></div>
diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index c89a7b4..e3d2d89 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -95,7 +95,12 @@ <h3 class="card-title text-lg">
     document.querySelectorAll('th').forEach(th => {
         if (!th.classList.contains('no-sort')) {
             const wrapper = document.createElement('div');
-            wrapper.className = 'flex items-center gap-2 cursor-pointer select-none';
+            wrapper.className = 'flex items-center gap-2 cursor-pointer select-none focus:outline-none focus:ring-2 focus:ring-primary/50 rounded-lg p-1 -m-1';
+            wrapper.setAttribute('role', 'button');
+            wrapper.setAttribute('tabindex', '0');
+            const colName = th.textContent.trim();
+            wrapper.setAttribute('aria-label', `Sortieren nach ${colName}`);
+
             wrapper.innerHTML = `
                 ${th.innerHTML}
                 <span class="sort-icons opacity-50">
@@ -105,9 +110,17 @@ <h3 class="card-title text-lg">
             th.innerHTML = '';
             th.appendChild(wrapper);
 
-            wrapper.addEventListener('click', () => {
+            const sortHandler = () => {
                 const column = Array.from(th.parentElement.children).indexOf(th);
                 sortTable(column, th);
+            };
+
+            wrapper.addEventListener('click', sortHandler);
+            wrapper.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    sortHandler();
+                }
             });
         }
     });
@@ -117,6 +130,10 @@ <h3 class="card-title text-lg">
         const tbody = table.querySelector('tbody');
         const rows = Array.from(tbody.querySelectorAll('tr'));
         
+        // Reset all th aria-sort
+        table.querySelectorAll("th").forEach(header => {
+            header.removeAttribute("aria-sort");
+        });
         // Update Sort-Direction
         if (currentSort.column === column) {
             currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
@@ -124,6 +141,7 @@ <h3 class="card-title text-lg">
             currentSort.column = column;
             currentSort.direction = 'asc';
         }
+        th.setAttribute("aria-sort", currentSort.direction === "asc" ? "ascending" : "descending");
 
         // Update Sort-Icons
         table.querySelectorAll('.sort-icons').forEach(icon => {