Upload 2 files

static/js/patient.js

@@ -56,7 +56,17 @@
 
   function showStep(stepNumber) {
     document.querySelectorAll(".step").forEach(function (section) {
-      section.classList.toggle("active", section.dataset.step === String(stepNumber));
+      const isActive = section.dataset.step === String(stepNumber);
+      section.classList.toggle("active", isActive);
+      // Move focus to the first heading or focusable element in the
+      // newly shown step so keyboard users don't get stranded at
+      // wherever the trigger element was.
+      if (isActive) {
+        requestAnimationFrame(function () {
+          const target = section.querySelector("h2, h3, [tabindex='0'], button, a, input");
+          if (target) target.focus({ preventScroll: false });
+        });
+      }
     });
   }
 
@@ -423,9 +433,14 @@
     const badgeClass = answered ? "answered" : "waiting";
     const badgeLabel = answered ? "Answered" : "Waiting for reply";
     const timeLabel = window.formatRelativeTime ? window.formatRelativeTime(item.timestamp) : "";
+    // Descriptive aria-label so the row is announced meaningfully,
+    // e.g. "Answered, 2 hours ago: I have a fever..." rather than
+    // a string of badge text + visual metadata read in random order.
+    const ariaLabel = [badgeLabel, timeLabel, item.input_text].filter(Boolean).join(": ");
+    row.setAttribute("aria-label", ariaLabel);
     row.innerHTML =
       '<div class="result-label">#' + escapeHtml(item.id) +
-      ' <span class="status-badge ' + badgeClass + '">' + badgeLabel + "</span>" +
+      ' <span class="status-badge ' + badgeClass + '" aria-hidden="true">' + badgeLabel + "</span>" +
       ' <span class="timestamp">' + escapeHtml(timeLabel) + "</span></div>" +
       '<div class="result-text">' + escapeHtml(item.input_text) + "</div>";
     row.addEventListener("click", function () {
@@ -593,13 +608,19 @@
     renderFullHistoryList(historySearchInput.value);
   });
 
-  // Status filter chips
+  // Status filter chips — set initial aria-pressed state
+  document.querySelectorAll("#history-filter-chips .filter-chip").forEach(function (c) {
+    c.setAttribute("aria-pressed", c.classList.contains("active") ? "true" : "false");
+  });
+
   document.getElementById("history-filter-chips").addEventListener("click", function (event) {
     const chip = event.target.closest(".filter-chip");
     if (!chip) return;
     historyStatusFilter = chip.dataset.filter;
     document.querySelectorAll("#history-filter-chips .filter-chip").forEach(function (c) {
-      c.classList.toggle("active", c === chip);
+      const active = c === chip;
+      c.classList.toggle("active", active);
+      c.setAttribute("aria-pressed", active ? "true" : "false");
     });
     renderFullHistoryList(historySearchInput.value);
   });

static/js/provider.js

@@ -146,14 +146,23 @@
     const isActive = Boolean(activeItem) && activeItem.id === item.id;
     const badgeClass = answered ? "answered" : "waiting";
     const badgeLabel = answered ? "Answered" : (isActive ? "In progress" : "#" + item.id);
+    // Descriptive aria-label so screen readers announce "Yoruba, just now,
+    // [preview text]" rather than the meaningless default "button".
+    const ariaLabel = [
+      capitalize(item.detected_language),
+      timeLabel,
+      answered ? "Answered" : "Waiting for reply",
+      item.translated_text
+    ].filter(Boolean).join(", ");
+    row.setAttribute("aria-label", ariaLabel);
     row.innerHTML =
-      '<span class="queue-avatar">' + escapeHtml(item.detected_language.charAt(0).toUpperCase()) + '</span>' +
+      '<span class="queue-avatar" aria-hidden="true">' + escapeHtml(item.detected_language.charAt(0).toUpperCase()) + '</span>' +
       '<span class="queue-body">' +
       '<span class="queue-top-row">' +
       '<span class="queue-lang">' + escapeHtml(item.detected_language) + '</span>' +
       '<span class="queue-top-right">' +
       '<span class="timestamp">' + escapeHtml(timeLabel) + '</span>' +
-      '<span class="status-badge ' + badgeClass + '">' + escapeHtml(badgeLabel) + '</span>' +
+      '<span class="status-badge ' + badgeClass + '" aria-hidden="true">' + escapeHtml(badgeLabel) + '</span>' +
       '</span>' +
       '</span>' +
       '<span class="queue-preview">' + escapeHtml(item.translated_text) + '</span>' +
@@ -272,13 +281,19 @@
     renderQueueList();
   });
 
-  // Language filter chips (completed tab only)
+  // Language filter chips (completed tab only) — set initial aria-pressed
+  document.querySelectorAll("#language-filter-chips .filter-chip").forEach(function (c) {
+    c.setAttribute("aria-pressed", c.classList.contains("active") ? "true" : "false");
+  });
+
   document.getElementById("language-filter-chips").addEventListener("click", function (event) {
     const chip = event.target.closest(".filter-chip");
     if (!chip) return;
     completedLanguageFilter = chip.dataset.filter;
     document.querySelectorAll("#language-filter-chips .filter-chip").forEach(function (c) {
-      c.classList.toggle("active", c === chip);
+      const active = c === chip;
+      c.classList.toggle("active", active);
+      c.setAttribute("aria-pressed", active ? "true" : "false");
     });
     renderQueueList();
   });