a11y(frontend): complete color radio-group keyboard contract

[seonghobae]

What

Aligns the Business Group color selector with the WAI-ARIA radio-group interaction contract.

• retains the role="radiogroup" container;
• exposes each mutually exclusive swatch as role="radio" with aria-checked;
• keeps only the selected radio in the tab sequence through roving tabIndex;
• moves both selection and focus with Left/Right/Up/Down Arrow keys, including wraparound;
• preserves native button click and Space activation;
• preserves the selected visual state through the matching CSS selector.

Regression coverage

Focused tests verify checked state, a single tab stop, forward and backward arrow navigation, wrapping at both ends, unrelated-key handling, and a safe first-radio fallback when an unknown color is supplied.

Evidence

docs/doctoring/accessibility-radio-group.md records the W3C WAI-ARIA Authoring Practices evidence and APA 7th edition references used for the interaction design.

Scope

The branch contains only the color-selector component and styles, focused component regression coverage, and the accessibility evidence record. It makes no dependency, package-manager, database, API, or runtime-service contract change.

Verification contract

Current-head frontend typecheck, complete 100%-coverage suite, production build, Security Scan, Semgrep, and independent current-head approval must pass before merge.

[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

@seonghobae, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 3 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 4a1d794c-b969-4072-b855-f8ecec1671b6

📥 Commits

Reviewing files that changed from the base of the PR and between 85de93d and 4ce05b3.

📒 Files selected for processing (3)

• docs/doctoring/accessibility-radio-group.md
• frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx
• frontend/src/components/modals/GroupModal.tsx

📝 Walkthrough

Walkthrough

색상 선택 컨트롤이 aria-pressed 대신 role="radio"와 aria-checked를 사용합니다. 테스트 쿼리와 선택 상태 스타일이 변경된 의미를 반영합니다. react-dom, @types/react-dom, vite 버전도 조정되었습니다.

Changes

색상 선택 접근성

Layer / File(s)	Summary
색상 라디오 의미와 검증 frontend/src/components/modals/GroupModal.tsx, frontend/src/styles.css, frontend/src/components/modals/ModalCoverage.test.tsx, .Jules/palette.md	색상 선택 요소가 radio 역할과 aria-checked를 사용합니다. 테스트는 radio 역할을 조회합니다. 선택 상태 스타일과 접근성 지침도 갱신되었습니다.

프론트엔드 버전 조정

Layer / File(s)	Summary
패키지 버전 변경 frontend/package.json	react-dom, @types/react-dom, vite의 지정 버전이 변경되었습니다.

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

Possibly related PRs

• ContextualWisdomLab/pg-erd-cloud#686: GroupModal과 관련 테스트의 접근성 변경을 다룹니다.
• ContextualWisdomLab/pg-erd-cloud#707: frontend/package.json의 vite 버전을 변경합니다.
• ContextualWisdomLab/pg-erd-cloud#718: react-dom과 @types/react-dom 버전 변경을 되돌립니다.

Suggested labels: javascript, dependencies

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 색상 선택기를 라디오 그룹으로 변경하는 접근성 변경을 명확하게 설명합니다.

✨ 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/color-swatch-a11y-10094327760965026187

---

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

[seonghobae]

@opencode-agent @cwl-noema-review Please independently review exact current head 87938821dc15818359ad018fc62a231623f85f48. Confirm the custom color selector exposes a coherent radio-group contract with role=radio, aria-checked, retained visual selection, and no keyboard/accessibility regression. Exact-head CI, Security Scan, and Semgrep are green; submit APPROVE only if no blocker remains.

[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/GroupModal.tsx (1)

78-84: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

라디오 그룹의 키보드 동작을 구현하세요.

현재 각 button이 기본 Tab 순서에 포함되지만, 화살표 키 처리와 tabIndex 관리가 없습니다. 선택된 항목에만 tabIndex={0}을 설정하고 화살표 키로 선택과 포커스를 함께 이동하세요. 또는 네이티브 <input type="radio">를 사용하세요. 관련 키보드 동작을 테스트로 추가하세요.

🤖 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/GroupModal.tsx` around lines 78 - 84, Update
the color swatch radio controls in GroupModal so only the selected color has
tabIndex={0} and all others have tabIndex={-1}; add keyboard handling for
ArrowUp/ArrowDown/ArrowLeft/ArrowRight to select and focus the corresponding
swatch, with appropriate wrapping, while preserving existing click behavior. Add
tests covering roving tabIndex and arrow-key selection/focus behavior.

🤖 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/GroupModal.tsx`:
- Around line 78-84: Update the color swatch radio controls in GroupModal so
only the selected color has tabIndex={0} and all others have tabIndex={-1}; add
keyboard handling for ArrowUp/ArrowDown/ArrowLeft/ArrowRight to select and focus
the corresponding swatch, with appropriate wrapping, while preserving existing
click behavior. Add tests covering roving tabIndex and arrow-key selection/focus
behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 441e0e0e-4ced-417c-a2c0-3e4d7656efca

📥 Commits

Reviewing files that changed from the base of the PR and between 72afe6d and 85de93d.

⛔ Files ignored due to path filters (2)

• frontend/package-lock.json is excluded by !**/package-lock.json
• frontend/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• .Jules/palette.md
• frontend/package.json
• frontend/src/components/modals/GroupModal.tsx
• frontend/src/components/modals/ModalCoverage.test.tsx
• frontend/src/styles.css

[seonghobae]

@opencode-agent Please review exact current head cbb049c553712b913a0dee0221091d015bd772f7 after queued checks complete. The branch was narrowed to exactly three frontend files; all npm downgrades, the second package-manager lock, and palette-history drift were removed. Verify WAI-ARIA radio-group semantics, CSS selected-state parity, and focused tests. Submit APPROVE only if no blocker remains.

[seonghobae]

@cwl-noema-review Please independently review exact current head cbb049c553712b913a0dee0221091d015bd772f7 after checks complete. Confirm the branch contains only the radio-group accessibility change and tests, with no dependency or package-manager drift; submit APPROVE only if no blocker remains.

[seonghobae]

@opencode-agent @cwl-noema-review Please independently review exact current head 4ce05b341b7804ad1abd88486aa8446e02361d68. Current-head CI, Security Scan, and SAST Semgrep are successful. Verify WAI-ARIA radio-group semantics, one roving tab stop, ArrowLeft/Right/Up/Down selection-and-focus with wraparound, click and Space behavior, safe unknown-color fallback, visual checked-state selector, focused tests, and the APA 7th doctoring record. Submit APPROVE only for this exact head if no blocking finding remains.

[seonghobae]

@opencode-agent Please review exact current head 4ce05b341b7804ad1abd88486aa8446e02361d68. Verify the color selector implements the WAI-ARIA radio-group contract with one roving tab stop, arrow-key selection and focus in four directions with wraparound, click and Space compatibility, safe unknown-color fallback, complete focused coverage, and accurate APA 7 doctoring. Current-head CI, Security Scan, Semgrep, and CodeRabbit are green; submit APPROVE only if no blocking finding remains.

[seonghobae]

@cwl-noema-review Please independently review exact current head 4ce05b341b7804ad1abd88486aa8446e02361d68. Confirm the semantic radio contract, focus movement, wrapping, visual state, and keyboard regressions match WAI-ARIA practice without introducing an inaccessible custom-control edge. Submit APPROVE only if no blocker remains.

[google-labs-jules]

@opencode-agent @cwl-noema-review Please independently review exact current head 4ce05b341b7804ad1abd88486aa8446e02361d68. Current-head CI, Security Scan, and SAST Semgrep are successful. Verify WAI-ARIA radio-group semantics, one roving tab stop, ArrowLeft/Right/Up/Down selection-and-focus with wraparound, click and Space behavior, safe unknown-color fallback, visual checked-state selector, focused tests, and the APA 7th doctoring record. Submit APPROVE only for this exact head if no blocking finding remains.

Ignored as this is addressed to other review bots.

[google-labs-jules]

@opencode-agent Please review exact current head 4ce05b341b7804ad1abd88486aa8446e02361d68. Verify the color selector implements the WAI-ARIA radio-group contract with one roving tab stop, arrow-key selection and focus in four directions with wraparound, click and Space compatibility, safe unknown-color fallback, complete focused coverage, and accurate APA 7 doctoring. Current-head CI, Security Scan, Semgrep, and CodeRabbit are green; submit APPROVE only if no blocking finding remains.

Ignored as this is addressed to other review bots.

[google-labs-jules]

@cwl-noema-review Please independently review exact current head 4ce05b341b7804ad1abd88486aa8446e02361d68. Confirm the semantic radio contract, focus movement, wrapping, visual state, and keyboard regressions match WAI-ARIA practice without introducing an inaccessible custom-control edge. Submit APPROVE only if no blocker remains.

Ignored as this is addressed to other review bots.