From 68e88814dd01b7ca85eaf6e5d935528c5d36a0e1 Mon Sep 17 00:00:00 2001
From: EffortlessSteven <15812269+EffortlessSteven@users.noreply.github.com>
Date: Mon, 29 Jun 2026 17:55:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20of=20filter=20buttons=20in=20coverage=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add aria-pressed state to coverage filter buttons
- Dynamically update aria-pressed using JS
- Improve accessibility of search box with type="search" and aria-label
- Mirror changes across both UI component files
---
 .jules/palette.md                  |  4 ++++
 crates/app-http/src/platform/ui.rs | 15 +++++++++------
 crates/http-platform/src/ui.rs     | 15 +++++++++------
 3 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 00000000..b65bf955
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2026-06-29 - [Filter Button Accessibility]
+**Learning:** Maud templates (`html!`) do not easily support dynamic boolean attributes evaluated conditionally at runtime via JavaScript.
+**Action:** For UI components like filter buttons, establish static initial states (e.g., `aria-pressed="true"`) and update them using vanilla JS (e.g., `setAttribute('aria-pressed', 'true')`) to ensure proper accessibility communication to screen readers.
diff --git a/crates/app-http/src/platform/ui.rs b/crates/app-http/src/platform/ui.rs
index 020f06fe..94b5b28e 100644
--- a/crates/app-http/src/platform/ui.rs
+++ b/crates/app-http/src/platform/ui.rs
@@ -691,8 +691,11 @@ pub async fn coverage_view(State(state): State<AppState>) -> Html<String> {
                 // Update active button
                 document.querySelectorAll('.filter-btn').forEach(btn => {
                     btn.classList.remove('active');
+                    btn.setAttribute('aria-pressed', 'false');
                 });
-                document.getElementById('filter-' + status).classList.add('active');
+                const activeBtn = document.getElementById('filter-' + status);
+                activeBtn.classList.add('active');
+                activeBtn.setAttribute('aria-pressed', 'true');
 
                 // Apply filter
                 applyFilters();
@@ -800,11 +803,11 @@ pub async fn coverage_view(State(state): State<AppState>) -> Html<String> {
         .card {
             h2 { "Acceptance Criteria Coverage" }
             .filter-controls data-uiid="coverage.filters" {
-                button #filter-all.filter-btn onclick="filterData('all')" { "All" }
-                button #filter-passing.filter-btn onclick="filterData('passing')" { "Passing" }
-                button #filter-failing.filter-btn onclick="filterData('failing')" { "Failing" }
-                button #filter-unknown.filter-btn onclick="filterData('unknown')" { "Unknown" }
-                input #search-box.search-box type="text" placeholder="Search by AC ID or title..."
+                button #filter-all.filter-btn aria-pressed="true" onclick="filterData('all')" { "All" }
+                button #filter-passing.filter-btn aria-pressed="false" onclick="filterData('passing')" { "Passing" }
+                button #filter-failing.filter-btn aria-pressed="false" onclick="filterData('failing')" { "Failing" }
+                button #filter-unknown.filter-btn aria-pressed="false" onclick="filterData('unknown')" { "Unknown" }
+                input #search-box.search-box type="search" aria-label="Search acceptance criteria" placeholder="Search by AC ID or title..."
                     oninput="searchData()";
             }
 
diff --git a/crates/http-platform/src/ui.rs b/crates/http-platform/src/ui.rs
index d77c27e6..b413c41a 100644
--- a/crates/http-platform/src/ui.rs
+++ b/crates/http-platform/src/ui.rs
@@ -621,11 +621,11 @@ fn coverage_content() -> Markup {
         .card {
             h2 { "Acceptance Criteria Coverage" }
             .filter-controls data-uiid="coverage.filters" {
-                button #filter-all.filter-btn onclick="filterData('all')" { "All" }
-                button #filter-passing.filter-btn onclick="filterData('passing')" { "Passing" }
-                button #filter-failing.filter-btn onclick="filterData('failing')" { "Failing" }
-                button #filter-unknown.filter-btn onclick="filterData('unknown')" { "Unknown" }
-                input #search-box.search-box type="text" placeholder="Search by AC ID or title..."
+                button #filter-all.filter-btn aria-pressed="true" onclick="filterData('all')" { "All" }
+                button #filter-passing.filter-btn aria-pressed="false" onclick="filterData('passing')" { "Passing" }
+                button #filter-failing.filter-btn aria-pressed="false" onclick="filterData('failing')" { "Failing" }
+                button #filter-unknown.filter-btn aria-pressed="false" onclick="filterData('unknown')" { "Unknown" }
+                input #search-box.search-box type="search" aria-label="Search acceptance criteria" placeholder="Search by AC ID or title..."
                     oninput="searchData()";
             }
 
@@ -766,8 +766,11 @@ fn coverage_script() -> &'static str {
         // Update active button
         document.querySelectorAll('.filter-btn').forEach(btn => {
             btn.classList.remove('active');
+            btn.setAttribute('aria-pressed', 'false');
         });
-        document.getElementById('filter-' + status).classList.add('active');
+        const activeBtn = document.getElementById('filter-' + status);
+        activeBtn.classList.add('active');
+        activeBtn.setAttribute('aria-pressed', 'true');
 
         // Apply filter
         applyFilters();