🎨 Palette: '접근 관리' 비활성화 버튼 접근성 개선 (aria-disabled 패턴)

[seonghobae]

💡 What

• ExportModal.tsx의 '접근 관리' 버튼에 사용된 네이티브 disabled 속성을 제거하고 aria-disabled="true" 패턴을 적용했습니다.
• 버튼이 클릭될 때 아무 동작도 하지 않도록 onClick={(e) => e.preventDefault()} 핸들러를 추가했습니다.
• ExportModal.test.tsx의 Vitest 테스트 코드에서 해당 버튼에 대한 검증을 .toBeDisabled()에서 .toHaveAttribute('aria-disabled', 'true')로 수정하고, 포커스를 받을 수 있는지 .toHaveFocus()로 확인하도록 보완했습니다.
• .Jules/palette.md에 동적으로 비활성화되는 버튼의 부가적인 설명을 스크린 리더에서 읽을 수 있게 하는 aria-disabled 패턴에 대한 학습 내용을 기록했습니다.

🎯 Why

• 기존처럼 네이티브 disabled 속성을 사용하면 탭 이동(Tab sequence) 대상에서 제외되어, 키보드 전용 사용자나 스크린 리더 사용자가 해당 버튼에 포커스를 둘 수 없습니다.
• 이로 인해 버튼 하단에 연결된 aria-describedby="share-export-access-hint"("접근 권한 관리는 프로젝트 권한 설정에서 처리합니다.")라는 중요한 맥락 힌트를 스크린 리더 사용자가 전혀 인지할 수 없는 문제가 발생합니다.

📸 Before/After

• Before: '접근 관리' 버튼이 disabled 속성을 가져서 키보드 사용자가 접근할 수 없고 부가 설명이 생략됨.
• After: '접근 관리' 버튼에 aria-disabled="true"를 사용하여 기능적으로는 비활성화된 상태를 유지하되, 포커스를 받을 수 있어 연결된 aria-describedby 힌트를 정상적으로 읽어줄 수 있음.

♿ Accessibility

• 키보드 내비게이션 사용자와 스크린 리더(Screen Reader) 사용자 모두 '접근 관리' 버튼이 왜 비활성화되어 있는지, 그리고 어디서 권한을 설정해야 하는지에 대한 안내 메시지를 인지하고 들을 수 있게 되었습니다.
• 이 방식은 UI 상으로는 기존과 동일한 형태(opacity 등 비활성화 스타일 적용)를 띠면서도 접근성 트리를 온전하게 보존하는 모범 사례입니다.

---

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

---

Summary by CodeRabbit

• 접근성 개선

  • 공유 링크 접근 관리 버튼이 키보드 포커스를 유지하면서도 비활성 상태임을 스크린 리더에 전달하도록 개선되었습니다.
  • 비활성 버튼의 클릭 동작이 실행되지 않도록 처리했습니다.

• 문서

  • 동적으로 비활성화되는 버튼과 설명 힌트의 접근성 지침을 추가했습니다.

[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

Next included review available in 29 minutes.

View limit details

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.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 54c1b7d8-fc00-42c1-99b2-87dfc9278132

📥 Commits

Reviewing files that changed from the base of the PR and between 037a690 and cc2d265.

📒 Files selected for processing (3)

• .Jules/palette.md
• frontend/src/components/modals/ExportModal.test.tsx
• frontend/src/components/modals/ExportModal.tsx

📝 Walkthrough

Walkthrough

ExportModal의 접근 관리 버튼이 disabled 대신 aria-disabled="true"를 사용합니다. 클릭 방지 처리를 추가하고, 포커스 가능 상태를 테스트합니다. 관련 접근성 학습 지침도 추가합니다.

Changes

접근성 버튼 상태 변경

Layer / File(s)	Summary
aria-disabled 버튼 동작과 검증 frontend/src/components/modals/ExportModal.tsx, frontend/src/components/modals/ExportModal.test.tsx, .Jules/palette.md	접근 관리 버튼에서 disabled를 제거하고 aria-disabled="true"를 설정합니다. 클릭 시 기본 동작을 방지합니다. 테스트는 버튼의 aria-disabled 속성과 포커스 가능 상태를 확인합니다. 접근성 지침을 추가합니다.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: 🔵 Low · up to 037a6

The button remains focusable and exposes its accessibility hint, but preventing the default action alone may not fully block activation in all event-handling paths. Add an explicit disabled-state guard before merging; the risk is localized and otherwise manageable.

Possibly related PRs

• ContextualWisdomLab/pg-erd-cloud#675: 동일한 ExportModal 버튼과 테스트를 aria-disabled 방식으로 변경합니다.

🚥 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	제목은 '접근 관리' 버튼의 접근성 개선과 aria-disabled 패턴이라는 주요 변경 사항을 명확하게 설명합니다.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
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-aria-disabled-export-modal-12786376928804229987

---

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