Skip to content

🎨 Palette: Improve accessibility of disabled access control button - #1297

Open
seonghobae wants to merge 3 commits into
mainfrom
palette-export-modal-a11y-8472358479807696153
Open

seonghobae wants to merge 3 commits into
mainfrom
palette-export-modal-a11y-8472358479807696153

Conversation

@seonghobae

@seonghobae seonghobae commented Oct 11, 2026 •

Copy link
Copy Markdown
Collaborator

πŸ’‘ What: Replaced native disabled attribute with aria-disabled="true" on the access control button in ExportModal. 🎯 Why: This allows screen readers to focus the element and read its description instead of skipping over it, providing crucial context to visually impaired users. πŸ“Έ Before/After: Visuals remain unchanged. β™Ώ Accessibility: Improved keyboard discoverability and screen reader context for the disabled state.


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


Devin Review

Summary by CodeRabbit

  • μ ‘κ·Όμ„± κ°œμ„ 
    • 곡유 링크의 β€˜μ ‘κ·Ό 관리’ λ²„νŠΌμ΄ λΉ„ν™œμ„± μƒνƒœμ—μ„œλ„ ν‚€λ³΄λ“œ νƒ­ μˆœμ„œμ— ν¬ν•¨λ˜λ©°, 클릭은 μ°¨λ‹¨λ©λ‹ˆλ‹€.
    • λΉ„ν™œμ„± λ²„νŠΌμ˜ μ‹œκ°μ  μŠ€νƒ€μΌμ€ μœ μ§€λ©λ‹ˆλ‹€.

@google-labs-jules

Copy link
Copy Markdown

πŸ‘‹ 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

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Review in Change Stack β†’

No actionable comments were generated in the recent review. πŸŽ‰

ℹ️ Recent review info
βš™οΈ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: f6ab29e9-cf63-4c48-8526-526668fd94fe


πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between 8dc7469 and c0e08c9.



πŸ“’ 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


Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.




πŸ“ Walkthrough
πŸ“ Walkthrough

Walkthrough

Export Modal의 β€œμ ‘κ·Ό 관리” λ²„νŠΌμ—μ„œ λ„€μ΄ν‹°λΈŒ disabled 속성을 μ œκ±°ν•˜κ³  aria-disabled="true"λ₯Ό μ μš©ν•©λ‹ˆλ‹€. 클릭 κΈ°λ³Έ λ™μž‘μ„ μ°¨λ‹¨ν•˜κ³ , ν•΄λ‹Ή ARIA μƒνƒœμ˜ λ²„νŠΌμ— κΈ°μ‘΄ λΉ„ν™œμ„± μŠ€νƒ€μΌμ„ μ μš©ν•©λ‹ˆλ‹€. ν…ŒμŠ€νŠΈμ™€ μ ‘κ·Όμ„± ν•™μŠ΅ ν•­λͺ©λ„ κ°±μ‹ ν•©λ‹ˆλ‹€.

Changes

Export Modal μ ‘κ·Όμ„±

Layer / File(s) Summary
μ ‘κ·Ό 관리 λ²„νŠΌμ˜ λΉ„ν™œμ„± λ™μž‘
frontend/src/components/modals/ExportModal.tsx, frontend/src/styles.css, frontend/src/components/modals/ExportModal.test.tsx, .jules/palette.md
λ²„νŠΌμ˜ disabled 속성을 μ œκ±°ν•˜κ³  aria-disabled="true"와 클릭 κΈ°λ³Έ λ™μž‘ 차단을 μ μš©ν•©λ‹ˆλ‹€. CSS μ„ νƒμžμ— ARIA λΉ„ν™œμ„± μƒνƒœλ₯Ό μΆ”κ°€ν•˜κ³ , ν…ŒμŠ€νŠΈμ™€ λ¬Έμ„œ ν•­λͺ©μ„ κ°±μ‹ ν•©λ‹ˆλ‹€.

Priority: βž– Normal

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

Change: Bug fix

Possibly related PRs

  • ContextualWisdomLab/pg-erd-cloud#675: 같은 ExportModal λ²„νŠΌμ— aria-disabled, 클릭 차단, λΉ„ν™œμ„± μŠ€νƒ€μΌκ³Ό ν…ŒμŠ€νŠΈ 변경을 μ μš©ν•©λ‹ˆλ‹€.
  • ContextualWisdomLab/pg-erd-cloud#1003: 같은 λ²„νŠΌμ˜ 포컀슀 μˆœμ„œμ™€ aria-describedby μ•ˆλ‚΄λ₯Ό 닀루며 κ΅¬ν˜„ μ˜μ—­λ„ μΌμΉ˜ν•©λ‹ˆλ‹€.
  • ContextualWisdomLab/pg-erd-cloud#1073: 같은 λ²„νŠΌμ˜ disabled 제거, 클릭 차단, CSS 및 ν…ŒμŠ€νŠΈ 변경을 ν¬ν•¨ν•©λ‹ˆλ‹€.


Merge Risk: βšͺ Minimal Β· up to 6246b

The access-management button remains discoverable in the tab order and exposes its disabled state, while activation has no reachable action. No material merge risk remains.

Pre-merge checks | Passed 4 | Failed 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files. (2 skipped: 2 … Write docstrings for the functions missing them to satisfy the coverage threshold.
βœ… Passed checks (4 passed)
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed 제λͺ©μ€ ExportModal의 λΉ„ν™œμ„± μ ‘κ·Ό 관리 λ²„νŠΌμ— λŒ€ν•œ μ ‘κ·Όμ„± κ°œμ„ μ„ μ •ν™•ν•˜κ²Œ μ„€λͺ…ν•©λ‹ˆλ‹€. λ³€κ²½ μ‚¬ν•­μ˜ μ£Όμš” λͺ©μ κ³Ό μΌμΉ˜ν•©λ‹ˆλ‹€.
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.


Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files. (2 skipped: 2 unsupported.)




✨ Finishing Touches πŸ’‘ 2
πŸ“ Generate docstrings πŸ’‘
  • Commit to this branch
  • Create a new PR




πŸ› οΈ Fix failing CI checks πŸ’‘
  • Commit to this branch
  • Create a new PR


πŸ§ͺ Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR



  • Autofix Β· Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

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

@devin-ai-integration devin-ai-integration Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Devin Review found 1 potential issue.

Devin Review

Comment on lines +205 to +206
aria-disabled="true"
onClick={(e) => e.preventDefault()}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ” Accessibility change missing from changelog

The access-control button now enters keyboard navigation, but neither changelog records the user-visible change required by repository guidance.

Devin Review


Was this helpful? React with πŸ‘ or πŸ‘Ž to provide feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant