Add click-to-read queue controls

Co-authored-by: Codex <codex@openai.com>

FIELD_NOTES.md

@@ -40,7 +40,7 @@ Accessibility evidence lives at `/api/accessibility-audit`. It records the reade
 
 ## Reader Mode Behavior
 
-The frontend creates a reading queue from semantic nodes: headings, paragraphs, quotes, figures, captions, and controls. It renders that same queue in the session panel, speaks one item at a time, keeps keyboard focus synchronized with the active node, marks that node with `aria-current`, and exposes the current narration through an `aria-live` region.
+The frontend creates a reading queue from semantic nodes: headings, paragraphs, quotes, figures, captions, and controls. It renders that same queue in the session panel with click-to-read controls, speaks one item at a time, keeps keyboard focus synchronized with the active node, marks that node with `aria-current`, and exposes the current narration through an `aria-live` region.
 
 When screen reader mode turns on, the reader cursor starts at the focused article node or the most visible article node. That makes the feature feel connected to what the user is already reading instead of always jumping back to the top of the page.
 

README.md

@@ -103,7 +103,7 @@ The frontend builds a reading queue from semantic article nodes. When screen-rea
 
 Each readable node is sent to the reader brain for concise narration, then Kokoro generates speech. If a model is unavailable, the app uses deterministic fallbacks so the demo remains navigable.
 
-The session panel renders the same semantic reader queue used by playback, including the active item marker and total item count.
+The session panel renders the same semantic reader queue used by playback, including the active item marker, total item count, and click-to-read controls for individual queue items.
 
 When screen-reader mode turns on, it selects the focused or most visible article item, assigns stable reader-node ids, and marks the active item with `aria-current`. Clicking a readable article item while the mode is on reads that item directly.
 

SUBMISSION.md

@@ -6,7 +6,7 @@ Tiny Narrator turns an article into a guided screen-reader experience using smal
 
 ## Short description
 
-Tiny Narrator is a custom Gradio Server app that looks like an article/blog reader until screen-reader mode is switched on. In reader mode, the app builds and displays a semantic reading queue, narrates headings and paragraphs, describes generated images, summarizes the current section, speaks with Kokoro, and keeps a visible transcript of the spoken path with reader position, runtime, and latency.
+Tiny Narrator is a custom Gradio Server app that looks like an article/blog reader until screen-reader mode is switched on. In reader mode, the app builds and displays a semantic reading queue with click-to-read controls, narrates headings and paragraphs, describes generated images, summarizes the current section, speaks with Kokoro, and keeps a visible transcript of the spoken path with reader position, runtime, and latency.
 
 The prototype is designed for a live hackathon demo: every model-facing path has a deterministic fallback, runtime readiness is labeled in the UI, and the repo exposes machine-readable evidence for model size, setup, demo flow, and accessibility behavior.
 

app.py

@@ -415,7 +415,7 @@ def accessibility_audit_core() -> dict[str, Any]:
             "id": "semantic_queue",
             "label": "Semantic reading queue",
             "status": "pass",
-            "evidence": "Readable article nodes declare data-reader-type values and the session panel renders their ordered queue.",
+            "evidence": "Readable article nodes declare data-reader-type values and the session panel renders their ordered queue with click-to-read controls.",
         },
         {
             "id": "keyboard_navigation",

scripts/verify.py

@@ -84,6 +84,8 @@ def verify_static_assets() -> None:
     assert_true("reader-node-" in app_js, "Reader nodes should receive stable ids for control context")
     assert_true("renderReaderQueue" in app_js, "Frontend should render the semantic reader queue")
     assert_true("readerQueueStatus.textContent" in app_js, "Reader queue should expose item count")
+    assert_true("reader-queue-play" in app_js, "Reader queue should expose click-to-read controls")
+    assert_true("readerQueueList.addEventListener" in app_js, "Reader queue should handle click-to-read actions")
     assert_true("narrate(node.index)" in app_js, "Reader mode should support click-to-read article items")
 
     submission = (ROOT / "SUBMISSION.md").read_text(encoding="utf-8")

static/app.js

@@ -156,6 +156,7 @@ function renderReaderQueue() {
           <span class="runtime-pill">${node.index === currentIndex ? "current" : "queued"}</span>
         </div>
         <p>${escapeHtml(node.text.slice(0, 120))}</p>
+        <button class="reader-queue-play" type="button" data-reader-index="${node.index}">Read item</button>
       </li>
     `)
     .join("");
@@ -765,6 +766,12 @@ nodes.forEach((node) => {
     narrate(node.index);
   });
 });
+readerQueueList.addEventListener("click", (event) => {
+  const button = event.target.closest(".reader-queue-play");
+  if (!button) return;
+  setEnabled(true);
+  narrate(Number(button.dataset.readerIndex));
+});
 voiceControl.addEventListener("change", () => {
   voiceStatus.textContent = voiceControl.selectedOptions[0]?.textContent || "Custom voice";
 });