🎨 Palette: [UX improvement] Add ARIA disabled state to editor save button

[seonghobae]

네이티브 disabled 속성을 사용할 경우 버튼이 탭 이동 순서에서 제외되어, 폼 유효성 검사 실패 시 화면 판독기 사용자가 버튼이 비활성화된 이유(툴팁 등)를 파악하기 어려운 접근성 문제가 있었습니다.

이를 개선하기 위해:

• 저장 버튼의 disabled 속성 대신 aria-disabled="true"를 사용하도록 변경하여 포커스 가능 상태를 유지했습니다.
• 버튼이 aria-disabled="true"인 상태에서 클릭하거나 엔터를 눌러 폼이 제출될 때, 네이티브 HTML5 유효성 검사 팝업이 뜨거나 액션이 실행되지 않도록 click 및 submit 이벤트에 방어 로직(event.preventDefault())을 추가했습니다.
• E2E 테스트에서 발생하던 modulepreload 누락 문제를 수정했습니다.
• .jules/palette.md 파일에 접근성 개선에 대한 배움을 기록했습니다.

---

PR created automatically by Jules for task 5071278339747262059 started by @seonghobae

---

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

Warning

Review limit reached

@seonghobae, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 42 minutes

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 80cb37fe-5970-407c-8b89-ce500b3a60b0

📥 Commits

Reviewing files that changed from the base of the PR and between 2c32887 and dc9d16f.

📒 Files selected for processing (3)

• .jules/palette.md
• app.js
• index.html

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[devin-ai-integration]

Devin Review found 1 potential issue.

[devin-ai-integration]

🟡 Native browser validation popup still appears when clicking the disabled save button

The guard meant to swallow clicks on the disabled save button (event.target.closest('button[type="submit"]') at app.js:404-408) is placed after an early return that only continues for rows carrying a task id, but the editor form sits in a row without one, so the guard never runs and the browser's native validation bubble pops up on click.
Impact: A user who clicks the greyed-out save button while required fields are invalid sees the native browser validation popup, the exact jarring behavior this change set out to eliminate.

Why the click guard is unreachable

The click listener starts with const row = event.target.closest('tr[data-task-id]'); if (!row) return; (app.js:387-390). The editor form is rendered inside renderEditorRow, whose <tr> gets row.dataset.editorAnchor = anchorId (app.js:797) and is a sibling of task rows, not a descendant. Task rows are the only ones with data-task-id (app.js:687). Therefore, when the save button is clicked, closest('tr[data-task-id]') returns null, the handler returns at line 389, and the new block at app.js:404-408 never executes. Because the click's default action is not prevented, the browser runs constraint validation for required fields (set at app.js:887) and shows the native popup before any submit event is dispatched. The submit-event guard at app.js:439-442 cannot help here because constraint-validation failure suppresses the submit event entirely. Previously the native disabled attribute made the click a no-op, so this is a regression against the PR's goal.

Prompt for agents

The click guard added in bindTableEvents (app.js:404-408) that calls event.preventDefault() when the submit button has aria-disabled="true" is never reached. The tableBody click handler returns early at app.js:387-390 whenever event.target has no ancestor tr[data-task-id]. The editor form's row is created in renderEditorRow with row.dataset.editorAnchor (app.js:797) and has no data-task-id, so clicks on the save button hit the early return before reaching the guard. As a result, clicking the aria-disabled save button is not prevented at the click level, and the browser's native constraint-validation popup (for required fields set at app.js:887) still appears — defeating the purpose of the change. Fix by relocating the save-button aria-disabled check to run before the `if (!row) return` early return at the top of the click handler (or otherwise ensure the guard executes for clicks originating inside the editor row), so event.preventDefault() is called on the click before the browser attempts form submission.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[seonghobae]

Closing as superseded by the existing canonical editor-validation lane #468 after exact semantic comparison against current develop.

The overlap is complete for the valuable buyer surface (aria-disabled save semantics and restored modulepreload entries), while #468 additionally preserves the actual persistence authority with synchronous latest-draft validation, aria-describedby, focused browser regression coverage, and the related CSV hardening. This PR's new click guard is also currently unreachable for the editor row because the table click handler returns before reaching it when there is no tr[data-task-id], as the current Devin review correctly identifies. Its submit guard additionally relies on the presentation-time aria-disabled state rather than the latest-draft validation boundary, so adopting it would reintroduce the stale-debounce failure that #468 was created to remove.

No unique product behavior from this branch needs to be preserved separately. The .jules/palette.md note is non-authoritative agent learning, not a production requirement. Please continue the accessibility fix through #468 rather than maintaining a competing branch.

[google-labs-jules]

Closing as superseded by the existing canonical editor-validation lane #468 after exact semantic comparison against current develop.

The overlap is complete for the valuable buyer surface (aria-disabled save semantics and restored modulepreload entries), while #468 additionally preserves the actual persistence authority with synchronous latest-draft validation, aria-describedby, focused browser regression coverage, and the related CSV hardening. This PR's new click guard is also currently unreachable for the editor row because the table click handler returns before reaching it when there is no tr[data-task-id], as the current Devin review correctly identifies. Its submit guard additionally relies on the presentation-time aria-disabled state rather than the latest-draft validation boundary, so adopting it would reintroduce the stale-debounce failure that #468 was created to remove.

No unique product behavior from this branch needs to be preserved separately. The .jules/palette.md note is non-authoritative agent learning, not a production requirement. Please continue the accessibility fix through #468 rather than maintaining a competing branch.

Understood. Acknowledging that this work is superseded by #468 and stopping work on this task. I will not push any further updates to this branch.