🎨 Palette: Async action aria-label updates - #197
Conversation
- Add dynamic aria-label to table action buttons for screen readers (e.g. "Details for file.pdf"). - Dynamically update and restore aria-label during loading and refreshing states in demo.js and viewer.js. - Document loading state aria-label practices in .jules/palette.md.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
Improves accessibility in the Clearfolio viewer/demo front-end by adding (and temporarily updating) more descriptive aria-labels for action buttons/links, especially in repeated table actions and during async “loading/refreshing” states to avoid screen-reader context loss.
Changes:
- Add optional
aria-labelsupport to demo table action helpers (createActionButton,createLink) and include file-name-specific labels for repeated actions. - Update async button flows in
demo.jsto temporarily changearia-labelalongside “Loading…/Refreshing…/Submitting…” text and restore afterward. - Update
viewer.jsloading/error/ready flows to preserve/restore the refresh button’saria-label, and document the learning in.jules/palette.md.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/main/resources/static/assets/viewer/viewer.js | Preserve/restore refresh button aria-label across loading/error/ready states. |
| src/main/resources/static/assets/viewer/demo.js | Add file-name-specific aria-labels for repeated table actions and sync labels during async state text changes. |
| .jules/palette.md | Record guidance about updating/restoring aria-label during loading state text changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const originalAriaLabel = el.retryBtn.getAttribute("aria-label"); | ||
| el.retryBtn.dataset.originalAriaLabel = originalAriaLabel || ""; | ||
| el.retryBtn.disabled = true; | ||
| el.retryBtn.textContent = "Refreshing..."; | ||
| if (originalAriaLabel) { | ||
| el.retryBtn.setAttribute("aria-label", "Refreshing..."); | ||
| } |
| } | ||
| if (job.jobId) { | ||
| actionsCell.appendChild(createLink(`/viewer/${encodeURIComponent(job.jobId)}`, "Open viewer")); | ||
| actionsCell.appendChild(createLink(`/viewer/${encodeURIComponent(job.jobId)}`, "Open viewer", `Open viewer for ${fileName}`)); |
Closed as superseded by #162. This branch also has an unresolved review finding: repeated
setLoading()calls can overwrite the stored originalaria-label, preventing correct restoration. Any unique viewer-label behavior should be reimplemented after #162 without that state bug.