🎨 Palette: [UX improvement] Replace native disabled with aria-disabled on inline editor save button - #477
Conversation
…d on inline editor save button - 💡 What: Changed the save button in the inline editor to use `aria-disabled="true"` instead of the native `disabled` attribute when there are validation errors, and added an event handler to intercept form submission and show a toast message. - 🎯 Why: Native `disabled` attributes swallow DOM events and prevent focus, breaking keyboard navigation for users tabbing through the page. By using `aria-disabled`, keyboard users retain their context and focus, and we can provide helpful inline toast feedback explaining *why* they can't save. - ♿ Accessibility: Improves screen reader and keyboard navigation experience by preserving focus and providing explicit feedback.
|
👋 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. |
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthrough편집 폼의 저장 버튼이 유효성 오류를 Changes저장 버튼 접근성 처리
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app.js`:
- Around line 432-436: saveEditor()에서 saveButton의 aria-disabled 상태를 확인하기 전에
renderDraftValidation.flush()를 호출해 최신 검증 결과를 반영하세요. flush()가
renderEditorValidation()을 호출하므로 중복 호출은 추가하지 말고 기존 saveEditor() 동기 검증은 유지하세요. 또한
저장 버튼의 비활성 상태를 native disabled 속성으로 설정하거나 E2E 검증을 aria-disabled 기준으로 일치시키세요.
- Around line 1076-1080: 저장 차단 검증을 네이티브 disabled가 아닌 aria-disabled 계약에 맞추세요.
tests/e2e/scopeweave.spec.js의 toBeDisabled() 4곳을 aria-disabled="true" 속성 검증으로
변경하고 오류 메시지 및 편집기 표시 검증은 유지하세요. 제출 핸들러에서는 renderDraftValidation.flush() 또는 최신
draft 검증을 먼저 수행한 뒤 aria-disabled 상태를 확인해 유효한 최신 입력이 이전 오류 상태로 차단되지 않게 하세요.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
…d on inline editor save button and update hono version - 💡 What: Changed the save button in the inline editor to use `aria-disabled="true"` instead of the native `disabled` attribute when there are validation errors, and added an event handler to intercept form submission and show a toast message. Also updated `hono` in package-lock.json to resolve Trivy FS scan failure due to a vulnerability. - 🎯 Why: Native `disabled` attributes swallow DOM events and prevent focus, breaking keyboard navigation for users tabbing through the page. By using `aria-disabled`, keyboard users retain their context and focus, and we can provide helpful inline toast feedback explaining *why* they can't save. Also fixing the CI failure caused by the vulnerable dependency. - ♿ Accessibility: Improves screen reader and keyboard navigation experience by preserving focus and providing explicit feedback.
…d on inline editor save button and update hono version - 💡 What: Changed the save button in the inline editor to use `aria-disabled="true"` instead of the native `disabled` attribute when there are validation errors, and added an event handler to intercept form submission and show a toast message. Also updated `hono` in package-lock.json to resolve Trivy FS scan failure due to a vulnerability. - 🎯 Why: Native `disabled` attributes swallow DOM events and prevent focus, breaking keyboard navigation for users tabbing through the page. By using `aria-disabled`, keyboard users retain their context and focus, and we can provide helpful inline toast feedback explaining *why* they can't save. Also fixing the CI failure caused by the vulnerable dependency. - ♿ Accessibility: Improves screen reader and keyboard navigation experience by preserving focus and providing explicit feedback.
![opencode-agent[bot]](https://avatars.githubusercontent.com/in/1549082?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
OpenCode cannot approve yet because required coverage evidence did not pass.
Review outcome
1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence
-
Problem: The required coverage-evidence job result was
failure, so OpenCode cannot establish approval sufficiency for this head. -
Root cause: Automated approval is only valid when the same-head coverage-evidence job proves supported repository test suites passed and configured docstring gates passed or were advisory, or reports not applicable because no supported source files or package manifests exist. Missing, failed, skipped, unavailable, or unsupported-tooling test evidence is a blocker.
-
Fix: Install or configure the repository test/docstring evidence tooling when source files or package manifests exist, rerun the current-head coverage-evidence job, and approve only after it reports
successwith required evidence or explicit no-source not-applicable evidence. -
Regression test: Keep the approval branch checking
needs.coverage-evidence.result == successbefore posting APPROVE, and publish REQUEST_CHANGES when coverage-evidence blocker states such as cancelled, skipped, failed, unsupported-tooling, or below-100 evidence are present. -
Result: REQUEST_CHANGES
-
Reason: coverage-evidence result was
failure, so required test/docstring evidence was not proven for current heade3d8c18d1633399f15d938e057657d6f552fe3ad. -
Head SHA:
e3d8c18d1633399f15d938e057657d6f552fe3ad -
Workflow run: 31701436838
-
Workflow attempt: 1
Coverage evidence
Coverage Decision
- Result: FAIL
- Test evidence: not proven passing
- Docstring evidence: not proven passing when configured
- Failure count: 1
Changed-File Evidence Map
flowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file (2 files)"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file (2 files)"]
R1 --> V1["required checks"]
OpenCode Review Overview
Pull request overviewOpenCode cannot approve yet because required coverage evidence did not pass. Review outcome1. HIGH .github/workflows/opencode-review.yml:1 - Coverage evidence did not prove required test/docstring evidence
Coverage evidenceCoverage Decision
Changed-File Evidence Mapflowchart LR
PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
Evidence --> S1["Changed file (2 files)"]
S1 --> I1["repository behavior"]
I1 --> R1["Review risk: Changed file (2 files)"]
R1 --> V1["required checks"]
|
|
Closing as superseded by #468. This implementation checks the existing #468 contains the stronger test-first contract: the button remains focusable, presentation uses |
Understood. Acknowledging that this work is now superseded by #468 and stopping work on this task. |
1 participant
🎨 Palette: [UX improvement]
aria-disabled="true"instead of the nativedisabledattribute when there are validation errors. Intercepts the form submission to show a toast message if the user tries to save an invalid form.disabledattributes swallow DOM events and prevent focus, breaking keyboard navigation for users tabbing through the page. By usingaria-disabled, keyboard users retain their context and focus, and we can provide helpful inline toast feedback explaining why they can't save.PR created automatically by Jules for task 4102716748264453504 started by @seonghobae
Summary by CodeRabbit