🎨 Palette: [UX improvement] Improve accessibility of disabled buttons

[seonghobae]

💡 What

Modified the "접근 관리" (Access Management) disabled button in the Export modal to use aria-disabled="true" instead of the native HTML disabled attribute, while manually applying visual disabled styles and preventing click propagation. Also updated the corresponding unit tests to verify the aria-disabled behavior.

🎯 Why

The native disabled attribute completely removes an element from the browser's tab order and accessibility tree for interactive exploration. As a result, the aria-describedby hint (which explains why the button is disabled: "접근 권한 관리는 프로젝트 권한 설정에서 처리합니다.") was completely undiscoverable by screen readers or keyboard-only users. Using aria-disabled allows the button to receive focus so assistive technologies can read its helper text, without making it functional.

📸 Before/After

Before: The "접근 관리" button used <button disabled>. It could not receive focus, so screen reader users tabbing through the modal would bypass it entirely and miss the guidance text linked via aria-describedby.
After: The button uses <button aria-disabled="true"> with visual styling in CSS [aria-disabled="true"]. It now receives keyboard focus, and screen readers will announce its label followed by the aria-describedby text, explicitly informing the user why the button is currently inactive.

♿ Accessibility

• Preserved keyboard discoverability for a disabled button.
• Restored access to aria-describedby helper text for screen readers.
• Prevented keyboard interaction manually (onClick={(e) => e.preventDefault()}) to maintain true disabled behavior safely.

---

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

Summary by CodeRabbit

• 접근성 개선
  • 내보내기 모달의 비활성 버튼이 화면 reader에 비활성 상태로 명확히 전달됩니다.
  • 비활성 버튼의 클릭 동작이 차단되고, 시각적으로도 비활성 상태가 표시됩니다.
• 테스트
  • 버튼의 접근성 상태를 새로운 방식에 맞게 검증하도록 업데이트했습니다.
• 문서
  • 접근 가능한 비활성 버튼 사용 지침을 추가했습니다.

[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="true"를 사용하고 클릭 동작을 수동 차단하도록 변경되었습니다. 비활성 시각 스타일, 테스트 검증, 관련 문서도 갱신되었습니다.

Changes

내보내기 모달 접근성

Layer / File(s)	Summary
접근 가능한 비활성 버튼 처리 frontend/src/components/modals/ExportModal.tsx, frontend/src/styles.css, frontend/src/components/modals/ExportModal.test.tsx, .jules/palette.md	접근 관리 버튼이 aria-disabled="true"와 preventDefault()를 사용하도록 변경되었고, 비활성 스타일과 테스트 검증 및 처리 지침이 추가되었습니다.

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

🚥 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 💡 1

🛠️ Fix failing CI checks 💡

• Fix failing CI checks

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-a11y-disabled-btn-3426923303645699969

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

167-174: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

포커스 가능성과 클릭 차단 동작도 검증해 주세요.

현재 테스트는 aria-disabled와 aria-describedby만 확인하므로, 접근 관리 버튼이 포커스를 받을 수 있는지와 onClick에서 기본 동작이 실제로 취소되는지는 회귀를 잡지 못합니다. 두 동작을 함께 검증해 주세요.

🤖 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/ExportModal.test.tsx` around lines 167 - 174,
Extend the “exposes access-control guidance for disabled button” test to verify
that the access-management button remains focusable and that activating it
invokes its click handler while preventing the default action. Use the existing
button identified by the “접근 관리” role/name and preserve the current
accessibility attribute assertions.

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

Outside diff comments:
In `@frontend/src/components/modals/ExportModal.test.tsx`:
- Around line 167-174: Extend the “exposes access-control guidance for disabled
button” test to verify that the access-management button remains focusable and
that activating it invokes its click handler while preventing the default
action. Use the existing button identified by the “접근 관리” role/name and preserve
the current accessibility attribute assertions.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 442a6433-b866-4861-b36d-e7c3ef75207e

📥 Commits

Reviewing files that changed from the base of the PR and between 4bf3968 and 70158d8.

📒 Files selected for processing (4)

• .jules/palette.md
• frontend/src/components/modals/ExportModal.test.tsx
• frontend/src/components/modals/ExportModal.tsx
• frontend/src/styles.css

[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 work is now obsolete and stopping work on this task.