From 9de4c253f3f30011ace26a7618304dd1e331e6d7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 6 Jun 2026 16:56:11 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Accessibility=20i?=
 =?UTF-8?q?mprovements=20for=20interactive=20elements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: tachyon-beep <544926+tachyon-beep@users.noreply.github.com>
---
 .Jules/palette.md                        |   3 +
 pnpm-lock.yaml                           | 109 +++++++++++++++++++++++
 src/filigree/static/dashboard.html       |  12 +--
 src/filigree/static/js/app.js            |  68 +++++++-------
 src/filigree/static/js/views/graph.js    |   9 +-
 src/filigree/static/js/views/health.js   |   2 +-
 src/filigree/static/js/views/ready.js    |   2 +-
 src/filigree/static/js/views/releases.js |  10 +--
 8 files changed, 163 insertions(+), 52 deletions(-)
 create mode 100644 .Jules/palette.md
 create mode 100644 pnpm-lock.yaml

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..07cc22c6
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-06-06 - Interactive badges as spans
+**Learning:** Found interactive badges (like `healthBadge` and `staleBadge`) built as `<span>` elements with `onclick` handlers, breaking keyboard navigation and screen reader semantics. There are also inputs and selects with no `aria-label` or `<label>` tag.
+**Action:** Always check if an `onclick` is on a non-interactive element like a `div` or `span`. Convert them to `<button>` or add appropriate `role="button"` and `tabindex="0"`. Add missing `aria-label` attributes to form elements not directly tied to visible labels.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 00000000..83eb48b3
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,109 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@biomejs/biome':
+        specifier: 2.4.3
+        version: 2.4.3
+
+packages:
+
+  '@biomejs/biome@2.4.3':
+    resolution: {integrity: sha512-cBrjf6PNF6yfL8+kcNl85AjiK2YHNsbU0EvDOwiZjBPbMbQ5QcgVGFpjD0O52p8nec5O8NYw7PKw3xUR7fPAkQ==}
+    engines: {node: '>=14.21.3'}
+    hasBin: true
+
+  '@biomejs/cli-darwin-arm64@2.4.3':
+    resolution: {integrity: sha512-eOafSFlI/CF4id2tlwq9CVHgeEqvTL5SrhWff6ZORp6S3NL65zdsR3ugybItkgF8Pf4D9GSgtbB6sE3UNgOM9w==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@biomejs/cli-darwin-x64@2.4.3':
+    resolution: {integrity: sha512-V2+av4ilbWcBMNufTtMMXVW00nPwyIjI5qf7n9wSvUaZ+tt0EvMGk46g9sAFDJBEDOzSyoRXiSP6pCvKTOEbPA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@biomejs/cli-linux-arm64-musl@2.4.3':
+    resolution: {integrity: sha512-QuFzvsGo8BA4Xm7jGX5idkw6BqFblcCPySMTvq0AhGYnhUej5VJIDJbmTKfHqwjHepZiC4fA+T5i6wmiZolZNw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@biomejs/cli-linux-arm64@2.4.3':
+    resolution: {integrity: sha512-0m+O0x9FgK99FAwDK+fiDtjs2wnqq7bvfj17KJVeCkTwT/liI+Q9njJG7lwXK0iSJVXeFNRIxukpVI3SifMYAA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@biomejs/cli-linux-x64-musl@2.4.3':
+    resolution: {integrity: sha512-qEc0OCpj/uytruQ4wLM0yWNJLZy0Up8H1Er5MW3SrstqM6J2d4XqdNA86xzCy8MQCHpoVZ3lFye3GBlIL4/ljw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@biomejs/cli-linux-x64@2.4.3':
+    resolution: {integrity: sha512-NVqh0saIU0u5OfOp/0jFdlKRE59+XyMvWmtx0f6Nm/2OpdxBl04coRIftBbY9d1gfu+23JVv4CItAqPYrjYh5w==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@biomejs/cli-win32-arm64@2.4.3':
+    resolution: {integrity: sha512-gRO96vrIARilv/Cp2ZnmNNL5LSZg3RO75GPp13hsLO3N4YVpE7saaMDp2bcyV48y2N2Pbit1brkGVGta0yd6VQ==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@biomejs/cli-win32-x64@2.4.3':
+    resolution: {integrity: sha512-vSm/vOJe06pf14aGHfHl3Ar91Nlx4YYmohElDJ+17UbRwe99n987S/MhAlQOkONqf1utJor04ChkCPmKb8SWdw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [win32]
+
+snapshots:
+
+  '@biomejs/biome@2.4.3':
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 2.4.3
+      '@biomejs/cli-darwin-x64': 2.4.3
+      '@biomejs/cli-linux-arm64': 2.4.3
+      '@biomejs/cli-linux-arm64-musl': 2.4.3
+      '@biomejs/cli-linux-x64': 2.4.3
+      '@biomejs/cli-linux-x64-musl': 2.4.3
+      '@biomejs/cli-win32-arm64': 2.4.3
+      '@biomejs/cli-win32-x64': 2.4.3
+
+  '@biomejs/cli-darwin-arm64@2.4.3':
+    optional: true
+
+  '@biomejs/cli-darwin-x64@2.4.3':
+    optional: true
+
+  '@biomejs/cli-linux-arm64-musl@2.4.3':
+    optional: true
+
+  '@biomejs/cli-linux-arm64@2.4.3':
+    optional: true
+
+  '@biomejs/cli-linux-x64-musl@2.4.3':
+    optional: true
+
+  '@biomejs/cli-linux-x64@2.4.3':
+    optional: true
+
+  '@biomejs/cli-win32-arm64@2.4.3':
+    optional: true
+
+  '@biomejs/cli-win32-x64@2.4.3':
+    optional: true
diff --git a/src/filigree/static/dashboard.html b/src/filigree/static/dashboard.html
index 0a72e173..a5a16eaf 100644
--- a/src/filigree/static/dashboard.html
+++ b/src/filigree/static/dashboard.html
@@ -185,7 +185,7 @@
       <button id="pillActive" onclick="toggleStatusPill('active')" class="px-2 py-1 rounded text-xs font-medium bg-accent text-primary">Active</button>
       <div class="relative">
         <button id="pillDone" onclick="toggleStatusPill('done')" class="px-2 py-1 rounded text-xs font-medium bg-overlay text-secondary border border-strong">Done</button>
-        <select id="doneTimeBound" onchange="onDoneTimeBoundChange()" class="hidden absolute top-full right-0 mt-1 bg-overlay text-primary text-xs rounded px-1 py-0.5 border border-strong z-10">
+        <select id="doneTimeBound" onchange="onDoneTimeBoundChange()" class="hidden absolute top-full right-0 mt-1 bg-overlay text-primary text-xs rounded px-1 py-0.5 border border-strong z-10" aria-label="Time bound for done issues">
           <option value="1">24 hours</option>
           <option value="3">3 days</option>
           <option value="7">7 days</option>
@@ -217,7 +217,7 @@
 
   <div class="flex items-center gap-3 text-xs text-secondary">
     <span id="refreshIndicator" class="opacity-0 text-accent">Refreshing...</span>
-    <span id="healthBadge" onclick="showHealthBreakdown()" class="cursor-pointer px-2 py-0.5 rounded text-xs font-bold" title="System Health Score — click for breakdown">--</span>
+    <button id="healthBadge" onclick="showHealthBreakdown()" class="cursor-pointer px-2 py-0.5 rounded text-xs font-bold" title="System Health Score — click for breakdown" style="min-height: unset">--</button>
     <div class="relative">
       <button onclick="toggleSettingsMenu(event)" id="settingsGear" class="text-xs px-2 py-1 rounded bg-overlay bg-overlay-hover" title="Settings" aria-label="Settings menu">&#9881;</button>
       <div id="settingsDropdown" class="hidden absolute right-0 top-full mt-1 rounded-lg shadow-xl text-xs z-50" style="background:var(--surface-base);border:1px solid var(--border-strong);min-width:160px">
@@ -340,7 +340,7 @@
       <button id="btnCluster" onclick="switchKanbanMode('cluster')" class="px-2 py-0.5 rounded" title="Group issues by parent epic with progress bars">Cluster</button>
       <button id="btnList" onclick="switchKanbanMode('list')" class="px-2 py-0.5 rounded" title="Table list view for large projects">List</button>
       <span class="text-muted">|</span>
-      <select id="filterType" onchange="applyTypeFilter()" class="bg-overlay text-primary text-xs rounded px-2 py-0.5 border border-strong" title="Filter to one issue type and show its workflow states as columns">
+      <select id="filterType" onchange="applyTypeFilter()" class="bg-overlay text-primary text-xs rounded px-2 py-0.5 border border-strong" title="Filter to one issue type and show its workflow states as columns" aria-label="Filter by issue type">
         <option value="">All types</option>
       </select>
       <span id="typeFilterPill" class="hidden text-xs px-2 py-0.5 rounded border text-accent" style="background:var(--accent-subtle);border-color:var(--accent)">
@@ -373,7 +373,7 @@
     <div class="shrink-0 px-6 pt-6 pb-2">
       <div class="max-w-3xl mx-auto flex items-center gap-3">
         <span class="text-base font-semibold text-primary">Insights</span>
-        <select id="insightsDays" onchange="loadMetrics()" class="bg-overlay text-xs rounded px-2 py-1 border border-strong">
+        <select id="insightsDays" onchange="loadMetrics()" class="bg-overlay text-xs rounded px-2 py-1 border border-strong" aria-label="Time range for insights">
           <option value="7">7 days</option>
           <option value="30" selected>30 days</option>
           <option value="90">90 days</option>
@@ -394,7 +394,7 @@
         <span class="text-base font-semibold text-primary">Files</span>
         <div class="flex items-center gap-2">
           <input id="filesSearch" type="text" placeholder="Filter by path..."
-                 class="bg-overlay text-primary text-xs rounded px-3 py-1 border border-strong w-64 focus:outline-none focus-accent">
+                 class="bg-overlay text-primary text-xs rounded px-3 py-1 border border-strong w-64 focus:outline-none focus-accent" aria-label="Filter files by path">
           <label class="flex items-center gap-1 text-xs text-secondary">
             <input type="checkbox" id="filesCriticalOnly" style="accent-color:var(--accent)"> Critical only
           </label>
@@ -468,7 +468,7 @@ <h2 class="text-base font-semibold text-primary m-0">Releases</h2>
   <span>Blocked: <b id="footBlocked" class="text-red-400">0</b></span>
   <span>Deps: <b id="footDeps" class="text-primary">0</b></span>
   <canvas id="sparkline" width="100" height="20" title="14-day throughput trend" class="opacity-70"></canvas>
-  <span id="staleBadge" class="hidden text-xs bg-red-900/50 text-red-400 px-2 py-0.5 rounded border border-red-800 cursor-pointer" onclick="showStaleIssues()" title="WIP issues with no updates for >2 hours. Click to view."></span>
+  <button id="staleBadge" class="hidden text-xs bg-red-900/50 text-red-400 px-2 py-0.5 rounded border border-red-800 cursor-pointer" onclick="showStaleIssues()" title="WIP issues with no updates for >2 hours. Click to view." style="min-height: unset"></button>
   <span class="ml-auto text-muted" id="footVersion"></span>
 </footer>
 
diff --git a/src/filigree/static/js/app.js b/src/filigree/static/js/app.js
index b4ecd615..af441385 100644
--- a/src/filigree/static/js/app.js
+++ b/src/filigree/static/js/app.js
@@ -11,6 +11,7 @@
 
 // --- Module imports ---
 
+import { computeHealthScore, computeImpactScores } from "./analytics.js";
 import { fetchAllData, fetchDashboardConfig, fetchFileSchema, fetchProjects } from "./api.js";
 import {
   applyFilters,
@@ -21,15 +22,15 @@ import {
   callbacks as filtersCallbacks,
   loadPreset,
   loadProjectFilterSettings,
+  onDoneTimeBoundChange,
   populatePresets,
-  savePreset,
   populateTypeFilter,
+  savePreset,
   toggleBlocked,
   toggleCardSelect,
   toggleMultiSelect,
   toggleReady,
   toggleStatusPill,
-  onDoneTimeBoundChange,
   trackChanges,
   updateTypeFilterUI,
 } from "./filters.js";
@@ -48,9 +49,9 @@ import {
   batchSetPriority,
   closeSettingsMenu,
   copyIssueId,
+  endTour,
   escHtml,
   escJsSingleAttr,
-  endTour,
   reloadServer,
   showCreateForm,
   showToast,
@@ -82,22 +83,40 @@ import {
   showAddBlocker,
   updateIssue,
 } from "./views/detail.js";
-import { computeHealthScore, computeImpactScores } from "./analytics.js";
+import {
+  clearScanSourceFilter,
+  closeFileDetail,
+  closeFinding,
+  createIssueFromFinding,
+  filesPageNext,
+  filesPagePrev,
+  filterFindings,
+  filterTimeline,
+  loadFiles,
+  loadMoreFindings,
+  loadMoreTimeline,
+  openFileDetail,
+  selectFinding,
+  showLinkIssueModal,
+  sortFiles,
+  submitLinkIssue,
+  switchFileTab,
+} from "./views/files.js";
 import {
   callbacks as graphCallbacks,
   graphFit,
-  renderGraph,
   refreshCriticalPathState,
+  renderGraph,
   setCriticalPathStateFromPath,
   showHealthBreakdown,
   toggleCriticalPath,
 } from "./views/graph.js";
 import {
-  renderGraphSidebar,
-  graphSidebarSelectAll,
+  attachSidebarListeners,
   graphSidebarClearAll,
+  graphSidebarSelectAll,
   rebuildTreeIndex,
-  attachSidebarListeners,
+  renderGraphSidebar,
   callbacks as sidebarCallbacks,
 } from "./views/graphSidebar.js";
 import {
@@ -112,31 +131,7 @@ import {
   showStaleIssues,
   updateStaleBadge,
 } from "./views/metrics.js";
-import {
-  loadPlanView,
-  loadWorkflow,
-  loadWorkflowInModal,
-  showWorkflowModal,
-} from "./views/workflow.js";
-import {
-  closeFinding,
-  clearScanSourceFilter,
-  closeFileDetail,
-  createIssueFromFinding,
-  filesPageNext,
-  filesPagePrev,
-  filterFindings,
-  filterTimeline,
-  loadFiles,
-  loadMoreFindings,
-  loadMoreTimeline,
-  openFileDetail,
-  selectFinding,
-  showLinkIssueModal,
-  sortFiles,
-  submitLinkIssue,
-  switchFileTab,
-} from "./views/files.js";
+import { loadReady } from "./views/ready.js";
 import {
   collapseAllReleaseTree,
   loadReleases,
@@ -145,7 +140,12 @@ import {
   toggleReleaseExpand,
   toggleReleaseTreeNode,
 } from "./views/releases.js";
-import { loadReady } from "./views/ready.js";
+import {
+  loadPlanView,
+  loadWorkflow,
+  loadWorkflowInModal,
+  showWorkflowModal,
+} from "./views/workflow.js";
 
 // ---------------------------------------------------------------------------
 // Core data fetching (lives here because it touches every module)
diff --git a/src/filigree/static/js/views/graph.js b/src/filigree/static/js/views/graph.js
index 557d5422..e5d5cbcd 100644
--- a/src/filigree/static/js/views/graph.js
+++ b/src/filigree/static/js/views/graph.js
@@ -4,7 +4,7 @@
 
 import { fetchCriticalPath } from "../api.js";
 import { CATEGORY_COLORS, state, THEME_COLORS } from "../state.js";
-import { resolveGraphScope, handleGhostClick } from "./graphSidebar.js";
+import { handleGhostClick, resolveGraphScope } from "./graphSidebar.js";
 
 // --- Callbacks for functions not yet available at import time ---
 
@@ -319,7 +319,7 @@ export function renderGraph() {
   const filteredIds = new Set(filteredNodes.map((n) => n.id));
   const search = document.getElementById("filterSearch")?.value?.toLowerCase().trim() || "";
 
-  let cyNodes = filteredNodes.map((n) => {
+  const cyNodes = filteredNodes.map((n) => {
     const title = n.title || n.id;
     const isGhost = ghostIds.has(n.id);
     const matchesSearch =
@@ -340,7 +340,7 @@ export function renderGraph() {
     };
   });
 
-  let cyEdges = scopeEdges
+  const cyEdges = scopeEdges
     .filter((e) => filteredIds.has(e.source) && filteredIds.has(e.target))
     .map((e) => ({
       data: {
@@ -407,8 +407,7 @@ export function renderGraph() {
       state.cy.destroy();
 
       const canReusePositions =
-        cyNodes.length > 0 &&
-        cyNodes.every((n) => Object.prototype.hasOwnProperty.call(previousPositions, n.data.id));
+        cyNodes.length > 0 && cyNodes.every((n) => Object.hasOwn(previousPositions, n.data.id));
       const graphMinZoom = computeGraphMinZoom(cyNodes.length);
       state.cy = cytoscape({
         container,
diff --git a/src/filigree/static/js/views/health.js b/src/filigree/static/js/views/health.js
index 533cd906..ab4275f2 100644
--- a/src/filigree/static/js/views/health.js
+++ b/src/filigree/static/js/views/health.js
@@ -2,7 +2,7 @@
 // Code Health view — hotspots, severity donut, scan coverage, recent scans.
 // ---------------------------------------------------------------------------
 
-import { fetchFiles, fetchFileStats, fetchHotspots, fetchScanRuns } from "../api.js";
+import { fetchFileStats, fetchFiles, fetchHotspots, fetchScanRuns } from "../api.js";
 import { SEVERITY_COLORS, state } from "../state.js";
 import { escHtml, escJsSingleAttr, relativeTime } from "../ui.js";
 
diff --git a/src/filigree/static/js/views/ready.js b/src/filigree/static/js/views/ready.js
index 809ef119..cf3f12b3 100644
--- a/src/filigree/static/js/views/ready.js
+++ b/src/filigree/static/js/views/ready.js
@@ -3,8 +3,8 @@
 // ---------------------------------------------------------------------------
 
 import { fetchReady } from "../api.js";
-import { escHtml, escJsSingleAttr } from "../ui.js";
 import { callbacks } from "../router.js";
+import { escHtml, escJsSingleAttr } from "../ui.js";
 
 const PRIORITY_LABELS = ["P0", "P1", "P2", "P3", "P4"];
 const PRIORITY_COLORS = [
diff --git a/src/filigree/static/js/views/releases.js b/src/filigree/static/js/views/releases.js
index 373bdc94..9fd033fb 100644
--- a/src/filigree/static/js/views/releases.js
+++ b/src/filigree/static/js/views/releases.js
@@ -7,12 +7,12 @@ import { escHtml, escJsSingleAttr } from "../ui.js";
 
 // --- Module-level state ---
 
-let expandedReleaseIds = new Set();
-let releaseTreeCache = new Map();
-let expandedNodeIds = new Set();
+const expandedReleaseIds = new Set();
+const releaseTreeCache = new Map();
+const expandedNodeIds = new Set();
 let showReleased = false;
-let loadingReleaseIds = new Set();
-let errorReleaseIds = new Set();
+const loadingReleaseIds = new Set();
+const errorReleaseIds = new Set();
 let _pendingFocusTarget = null;
 
 export function scrollToReleaseCard(cardId) {

From a4eb53409cddf6ee44899c389d302c9792e525e0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 6 Jun 2026 17:10:18 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Accessibility=20i?=
 =?UTF-8?q?mprovements=20for=20interactive=20elements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**What:**
- Converted interactive `<span>` elements (`#healthBadge`, `#staleBadge`) to `<button>` elements to properly support keyboard navigation and screen readers.
- Added missing `aria-label` attributes to form elements (inputs and selects) that lack explicit visual `<label>` associations.
- Documented findings regarding clickable spans in `.Jules/palette.md` for future consistency.
- Formatted JS files with Biome (`pnpm run format`).
- Fixed failing test `test_topology_change_reuses_positions_only_when_all_nodes_have_positions` that was checking for old JS string.

**Why:**
To improve the accessibility of the dashboard, making it usable via keyboard and assistive technologies by providing correct semantic roles for interactive elements and accessible names for form inputs. Interactive elements built as generic containers (`span` or `div`) cannot be focused and lack semantic meaning unless appropriately extended with `role` and `tabindex` - using a native `button` is the simplest, most accessible approach.

**Accessibility:**
- Interactive badges are now focusable via `Tab` and activated via `Enter`/`Space`.
- Screen readers will now announce the selects and inputs correctly due to proper `aria-label`s.

Co-authored-by: tachyon-beep <544926+tachyon-beep@users.noreply.github.com>
---
 tests/api/test_graph_api.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/api/test_graph_api.py b/tests/api/test_graph_api.py
index 37bb11e4..65f5cb08 100644
--- a/tests/api/test_graph_api.py
+++ b/tests/api/test_graph_api.py
@@ -76,7 +76,7 @@ def test_hover_traversal_uses_outgoers_not_full_edge_scan(self) -> None:
     def test_topology_change_reuses_positions_only_when_all_nodes_have_positions(self) -> None:
         graph_js = (STATIC_DIR / "js" / "views" / "graph.js").read_text()
         assert "const canReusePositions =" in graph_js
-        assert "cyNodes.every((n) => Object.prototype.hasOwnProperty.call(previousPositions, n.data.id))" in graph_js
+        assert "cyNodes.every((n) => Object.hasOwn(previousPositions, n.data.id))" in graph_js
         assert "positions: (node) => previousPositions[node.id()]," in graph_js
         assert "previousPositions[node.id()] || { x: 0, y: 0 }" not in graph_js