diff --git a/.jules/palette.md b/.jules/palette.md index a34ea59b..b610cf08 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -13,3 +13,7 @@ ## 2026-07-13 - Async Table Actions UX **Learning:** Adding explicit loading and disabled states to table action buttons that invoke asynchronous processes helps prevent redundant API calls and visually assures the user that their request is being handled. **Action:** Consistently apply `disabled` state and `Loading...` text changes to inline table action buttons linked to async workflows, and carefully preserve underlying DOM structures with `Array.from(btn.childNodes)` during the loading cycle to avoid rendering regressions. + +## 2026-07-21 - Context-specific ARIA labels for repetitive table actions +**Learning:** Screen reader users struggle to understand repetitive action buttons or links (like "Details" or "Open viewer") in a data table because the label alone lacks row context. +**Action:** Always provide dynamically generated, context-specific `aria-label` attributes (e.g., `aria-label="Details for example_document.pdf"`) that include row-specific identifiers when rendering table action buttons or links. diff --git a/src/main/resources/static/assets/viewer/demo.js b/src/main/resources/static/assets/viewer/demo.js index 51466a8b..678df06c 100644 --- a/src/main/resources/static/assets/viewer/demo.js +++ b/src/main/resources/static/assets/viewer/demo.js @@ -81,13 +81,16 @@ function updateJob(jobId, patch, { refreshKpisAfterUpdate = true } = {}) { } } -function createLink(href, label) { +function createLink(href, label, ariaLabel) { const link = document.createElement("a"); link.href = href; link.textContent = label; link.className = "table-link"; link.target = "_blank"; link.rel = "noopener noreferrer"; + if (ariaLabel) { + link.setAttribute("aria-label", ariaLabel); + } return link; } @@ -110,12 +113,15 @@ async function openJsonDocument(url, title) { : "Unable to load JSON evidence with the current tenant claim."; } -function createActionButton(label, onClick) { +function createActionButton(label, onClick, ariaLabel) { const button = document.createElement("button"); button.type = "button"; button.textContent = label; button.className = "btn btn-secondary btn-compact"; button.addEventListener("click", onClick); + if (ariaLabel) { + button.setAttribute("aria-label", ariaLabel); + } return button; } @@ -143,23 +149,27 @@ function renderHistory(history = loadHistory()) { submittedCell.textContent = job.submittedAt || ""; actionsCell.className = "table-actions"; + const rowFileName = job.fileName || "Document"; if (job.statusUrl) { actionsCell.appendChild(createActionButton("Details", (e) => { const btn = e.currentTarget; const initialChildren = Array.from(btn.childNodes); + const originalAriaLabel = btn.getAttribute("aria-label"); btn.disabled = true; btn.textContent = "Loading..."; + btn.setAttribute("aria-label", "Loading..."); openJobDetail(job).finally(() => { btn.replaceChildren(...initialChildren); btn.disabled = false; + if (originalAriaLabel) btn.setAttribute("aria-label", originalAriaLabel); }); - })); + }, `Details for ${rowFileName}`)); actionsCell.appendChild(createActionButton("Status JSON", () => { void openJsonDocument(job.statusUrl, "Clearfolio status JSON"); - })); + }, `Status JSON for ${rowFileName}`)); } if (job.jobId) { - actionsCell.appendChild(createLink(`/viewer/${encodeURIComponent(job.jobId)}`, "Open viewer")); + actionsCell.appendChild(createLink(`/viewer/${encodeURIComponent(job.jobId)}`, "Open viewer", `Open viewer for ${rowFileName}`)); } row.append(fileCell, statusCell, submittedCell, actionsCell);