🎨 Palette: [UX improvement] Add accessible disabled states to submit buttons

[seonghobae]

🎨 Palette: [UX improvement] Add accessible disabled states to submit buttons

💡 What:

• Removed native disabled attributes from submit buttons in AddTableModal and GroupModal.
• Added aria-disabled and title attributes for tooltips on disabled buttons.
• Added explicit onClick handlers to prevent form submission when the button is visually disabled.
• Updated visual styling to replicate the disabled state (opacity: 0.5, cursor: "not-allowed").
• Updated corresponding test assertions in ModalCoverage.test.tsx to check aria-disabled.

🎯 Why:
Native disabled buttons are removed from the browser's tab order, making them invisible to screen readers and preventing users from discovering why the button is disabled via tooltips. Using aria-disabled solves this, but requires manual intervention to block submissions.

📸 Before/After:
Before: disabled attribute used. Tooltips wouldn't show.
After: aria-disabled used with custom styles and onClick handlers. Tooltips appear on hover/focus.

♿ Accessibility:
Screen readers now announce the buttons as disabled, and keyboard-only users can tab to the buttons to read the tooltips explaining the required actions.

---

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

Summary by CodeRabbit

• 접근성 개선

  • 테이블 및 그룹 생성 모달의 버튼에 aria-disabled와 안내 툴팁을 추가했습니다.
  • 입력값이 없을 때 버튼의 클릭 및 제출 동작을 차단하도록 개선했습니다.
  • 비활성 상태가 시각적으로 명확히 표시되도록 투명도와 커서 스타일을 적용했습니다.

• 테스트

  • 모달 버튼의 비활성 상태 검증을 ARIA 속성 기준으로 업데이트했습니다.

[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]

📝 Walkthrough

Walkthrough

두 모달의 비활성 버튼이 disabled 대신 aria-disabled와 클릭 이벤트 차단을 사용하도록 변경되었습니다. 비활성 상태 안내와 스타일이 추가되었고, 관련 테스트는 ARIA 속성을 검증하도록 갱신되었습니다.

Changes

모달 버튼 접근성

Layer / File(s)	Summary
비활성 버튼 상태와 검증 .jules/palette.md, frontend/src/components/modals/AddTableModal.tsx, frontend/src/components/modals/GroupModal.tsx, frontend/src/components/modals/ModalCoverage.test.tsx	저장 및 그룹 추가 버튼이 aria-disabled, 안내 title, 비활성 스타일을 사용하고, 입력값이 없을 때 preventDefault()로 기본 동작을 차단합니다. 테스트는 aria-disabled 값을 검증하도록 변경되었습니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• ContextualWisdomLab/pg-erd-cloud#675: aria-disabled와 preventDefault()를 사용하는 동일한 접근성 변경 방향과 관련되어 있습니다.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 제출 버튼의 접근 가능한 비활성 상태 추가라는 핵심 변경을 정확히 요약합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-accessible-disabled-buttons-1031071165122331047

---

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

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/components/modals/ModalCoverage.test.tsx (1)

86-86: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

비활성 상태의 실제 제출 차단도 테스트하세요.

현재 테스트는 aria-disabled 값만 확인하므로, 클릭 또는 폼 제출 차단 로직이 제거되어도 통과합니다. 빈/공백 이름에서 클릭과 Enter 제출 시 callback이 호출되지 않는지, 유효한 이름에서는 callback이 호출되는지도 검증해 주세요.

Also applies to: 245-245

🤖 Prompt for 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.

In `@frontend/src/components/modals/ModalCoverage.test.tsx` at line 86, Update the
ModalCoverage tests around the save-button assertions to verify actual
submission behavior, not only the aria-disabled attribute. Add cases confirming
blank and whitespace-only names do not invoke the callback when clicking the
button or submitting with Enter, and that a valid name does invoke the callback.

🤖 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.

Nitpick comments:
In `@frontend/src/components/modals/ModalCoverage.test.tsx`:
- Line 86: Update the ModalCoverage tests around the save-button assertions to
verify actual submission behavior, not only the aria-disabled attribute. Add
cases confirming blank and whitespace-only names do not invoke the callback when
clicking the button or submitting with Enter, and that a valid name does invoke
the callback.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 46a33222-f44f-4d3f-b64b-0fed21d0d180

📥 Commits

Reviewing files that changed from the base of the PR and between 4bf3968 and 17735eb.

📒 Files selected for processing (4)

• .jules/palette.md
• frontend/src/components/modals/AddTableModal.tsx
• frontend/src/components/modals/GroupModal.tsx
• frontend/src/components/modals/ModalCoverage.test.tsx

[seonghobae]

Closed as superseded/duplicate Palette a11y PR; keyboard/form a11y baseline already on main (#568/#567/#534). Remaining a11y land via priority PR or follow-up if needed.

[google-labs-jules]

Closed as superseded/duplicate Palette a11y PR; keyboard/form a11y baseline already on main (#568/#567/#534). Remaining a11y land via priority PR or follow-up if needed.

Understood. Acknowledging that this PR has been closed as superseded/duplicate, and stopping further work on this task.