Repository navigation
a11y(frontend): complete color radio-group keyboard contract - #730
seonghobae wants to merge 22 commits into
Conversation
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Warning Review limit reached
Next review available in: 53 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthrough
Changes색상 선택 접근성
Estimated code review effort: 3 (Moderate) | ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
|
@opencode-agent @cwl-noema-review Please independently review exact current head |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
⛔ Files ignored due to path filters (2)
frontend/package-lock.jsonis excluded by!**/package-lock.jsonfrontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
.Jules/palette.mdfrontend/package.jsonfrontend/src/components/modals/GroupModal.tsxfrontend/src/components/modals/ModalCoverage.test.tsxfrontend/src/styles.css
|
@opencode-agent Please review exact current head |
|
@cwl-noema-review Please independently review exact current head |
seonghobae
changed the title
|
@opencode-agent @cwl-noema-review Please independently review exact current head |
|
@opencode-agent Please review exact current head |
|
@cwl-noema-review Please independently review exact current head |
Ignored as this is addressed to other review bots. |
Ignored as this is addressed to other review bots. |
Ignored as this is addressed to other review bots. |
|
@opencode-agent @cwl-noema-review Please perform a fresh independent review of current head |
Ignored as this is addressed to other review bots. |
|
Addressed both current-head CodeRabbit findings in |
|
Exact-current-head independent review request for @coderabbitai review Do not modify the branch, bypass protection, merge, tag, release, or publish. |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
expected_sha="33098bf22d99b18e59cedec9f74ee79422e355f9"
printf '%s\n' '== Checked-out commit =='
git rev-parse HEAD
git status --short
git merge-base --is-ancestor "$expected_sha" HEAD && echo "EXPECTED_SHA_IS_ANCESTOR=true" || echo "EXPECTED_SHA_IS_ANCESTOR=false"
printf '%s\n' '== Exact commit files and diff summary =='
git show --no-ext-diff --format=fuller --stat --summary "$expected_sha"
git diff-tree --no-commit-id --name-status -r "$expected_sha"
git show --no-ext-diff --format= --check "$expected_sha"
git show --no-ext-diff --format= "$expected_sha" -- \
frontend/src/components/modals/GroupModal.tsx \
frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx \
frontend/src/components/modals/ModalCoverage.test.tsx \
frontend/src/styles.css \
docs/doctoring/accessibility-radio-group.md \
CHANGELOG.md
printf '%s\n' '== Source outlines =='
ast-grep outline frontend/src/components/modals/GroupModal.tsx --items all
ast-grep outline frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx --items all
ast-grep outline frontend/src/components/modals/ModalCoverage.test.tsx --items all
printf '%s\n' '== Relevant implementation and test text =='
nl -ba frontend/src/components/modals/GroupModal.tsx | sed -n '1,280p'
nl -ba frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx | sed -n '1,260p'
nl -ba frontend/src/components/modals/ModalCoverage.test.tsx | sed -n '1,260p'
rg -n -C 4 'groupManager__swatch|aria-checked|aria-pressed' frontend/src/styles.css
nl -ba docs/doctoring/accessibility-radio-group.md | sed -n '1,220p'
rg -n -C 3 'radio|roving|Arrow|arrow|Group' CHANGELOG.md
printf '%s\n' '== GitHub exact-head metadata =='
gh pr view 730 --repo ContextualWisdomLab/pg-erd-cloud \
--json headRefOid,mergeStateStatus,reviewDecision,statusCheckRollup,comments,reviews \
--jq '{headRefOid,mergeStateStatus,reviewDecision,statusCheckRollup:[.statusCheckRollup[]|{name,conclusion,status,detailsUrl}],reviews:[.reviews[]|{author:.author.login,state,commit:.commit.oid}],commentCount:(.comments|length)}'Length of output: 10909 🏁 Script executed: #!/bin/bash
set -euo pipefail
expected_sha="33098bf22d99b18e59cedec9f74ee79422e355f9"
repo="ContextualWisdomLab/pg-erd-cloud"
printf '%s\n' '== Pull request base and cumulative scope =='
gh pr view 730 --repo "$repo" --json baseRefOid,headRefOid,changedFiles,files \
--jq '{baseRefOid,headRefOid,changedFiles,files:[.files[]|{path,additions,deletions}]}'
base_sha="$(gh pr view 730 --repo "$repo" --json baseRefOid --jq '.baseRefOid')"
printf 'BASE_SHA=%s\nHEAD_SHA=%s\n' "$base_sha" "$expected_sha"
git diff --no-ext-diff --check "$base_sha" "$expected_sha"
git diff --no-ext-diff --name-status "$base_sha" "$expected_sha"
git diff --no-ext-diff --unified=80 "$base_sha" "$expected_sha" -- \
frontend/src/components/modals/GroupModal.tsx \
frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx \
frontend/src/components/modals/ModalCoverage.test.tsx \
frontend/src/styles.css \
docs/doctoring/accessibility-radio-group.md \
CHANGELOG.md
printf '%s\n' '== GroupModal implementation =='
sed -n '1,330p' frontend/src/components/modals/GroupModal.tsx
printf '%s\n' '== Radio-group focused tests =='
sed -n '1,280p' frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx
printf '%s\n' '== Selected-state styles =='
rg -n -C 5 'groupManager__swatch|aria-checked|aria-pressed|:focus' frontend/src/styles.css
printf '%s\n' '== Doctoring record =='
sed -n '1,240p' docs/doctoring/accessibility-radio-group.md
printf '%s\n' '== Exact-head GitHub checks and reviews =='
gh pr view 730 --repo "$repo" \
--json headRefOid,mergeStateStatus,reviewDecision,statusCheckRollup,reviews \
--jq '{headRefOid,mergeStateStatus,reviewDecision,statusCheckRollup:[.statusCheckRollup[]|{name,conclusion,status,detailsUrl}],reviews:[.reviews[]|{author:.author.login,state,commit:.commit.oid}]}'
printf '%s\n' '== Unresolved review threads =='
pr_id="$(gh pr view 730 --repo "$repo" --json id --jq '.id')"
gh api graphql -F prId="$pr_id" -f query='
query($prId: ID!) {
node(id: $prId) {
... on PullRequest {
reviewThreads(first: 100) {
nodes {
isResolved
isOutdated
path
line
comments(first: 20) {
nodes { author { login } body }
}
}
}
}
}
}' --jq '[.data.node.reviewThreads.nodes[] | select(.isResolved == false) | {isOutdated,path,line,comments:[.comments.nodes[]|{author:.author.login,body}]}]'Length of output: 54073
I found no blocking issue in the requested scope.
[approve] You are interacting with an AI system. |
|
Queued @cwl-noema-review for PR #730 at head |
|
Queued @cwl-noema-review for PR #730 at head |
|
@coderabbitai review Please review exact head |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
repo="ContextualWisdomLab/pg-erd-cloud"
pr_number="730"
expected_sha="e34178ec0c41f3e72ea611d097f2ef1481c53f8a"
echo '== Exact-head identity =='
printf 'CHECKED_OUT_SHA='
git rev-parse HEAD
printf 'EXPECTED_SHA=%s\n' "$expected_sha"
git status --short
gh pr view "$pr_number" --repo "$repo" --json headRefOid,baseRefOid \
--jq '{headRefOid,baseRefOid}'
echo '== Current PR scope against its live base =='
base_sha="$(gh pr view "$pr_number" --repo "$repo" --json baseRefOid --jq '.baseRefOid')"
git diff --check "$base_sha" "$expected_sha"
git diff --name-status "$base_sha" "$expected_sha"
git diff --stat "$base_sha" "$expected_sha"
git diff --unified=60 "$base_sha" "$expected_sha" -- \
frontend/src/components/modals/GroupModal.tsx \
frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx \
frontend/src/components/modals/ModalCoverage.test.tsx \
frontend/src/styles.css \
docs/doctoring/accessibility-radio-group.md \
CHANGELOG.md
echo '== Reconciliation commit and changed files =='
git show --format=fuller --stat --summary "$expected_sha"
git diff-tree --no-commit-id --name-status -r "$expected_sha"
git show --format= --check "$expected_sha"
echo '== Implementation map and relevant source =='
ast-grep outline frontend/src/components/modals/GroupModal.tsx --items all
ast-grep outline frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx --items all
sed -n '1,360p' frontend/src/components/modals/GroupModal.tsx
sed -n '1,320p' frontend/src/components/modals/GroupModal.radioKeyboard.test.tsx
sed -n '1,300p' frontend/src/components/modals/ModalCoverage.test.tsx
rg -n -C 6 'groupManager__swatch|aria-checked|aria-pressed|:focus' frontend/src/styles.css
sed -n '1,260p' docs/doctoring/accessibility-radio-group.md
rg -n -C 3 'radio|roving|Arrow|arrow|Group' CHANGELOG.md
echo '== Current exact-head checks and reviews =='
gh pr view "$pr_number" --repo "$repo" \
--json headRefOid,mergeStateStatus,reviewDecision,statusCheckRollup,reviews \
--jq '{headRefOid,mergeStateStatus,reviewDecision,statusCheckRollup:[.statusCheckRollup[]|{name,conclusion,status,detailsUrl}],reviews:[.reviews[]|{author:.author.login,state,commit:.commit.oid}]}'
echo '== Unresolved review threads =='
pr_id="$(gh pr view "$pr_number" --repo "$repo" --json id --jq '.id')"
gh api graphql -F prId="$pr_id" -f query='
query($prId: ID!) {
node(id: $prId) {
... on PullRequest {
reviewThreads(first: 100) {
nodes {
isResolved
isOutdated
path
line
comments(first: 20) {
nodes { author { login } body }
}
}
}
}
}
}' --jq '[.data.node.reviewThreads.nodes[] | select(.isResolved == false) | {isOutdated,path,line,comments:[.comments.nodes[]|{author:.author.login,body}]}]'Length of output: 65195 🏁 Script executed: #!/bin/bash
set -euo pipefail
repo="ContextualWisdomLab/pg-erd-cloud"
pr_number="730"
expected_sha="e34178ec0c41f3e72ea611d097f2ef1481c53f8a"
base_sha="$(gh pr view "$pr_number" --repo "$repo" --json baseRefOid --jq '.baseRefOid')"
echo '== Reconciliation source map =='
ast-grep outline frontend/src/App.tsx --items all
ast-grep outline frontend/src/App.searchPolling.test.tsx --items all
echo '== Reconciliation changes against the live PR base =='
git diff --check "$base_sha" "$expected_sha" -- \
frontend/src/App.tsx \
frontend/src/App.searchPolling.test.tsx \
docs/doctoring/search-identity-and-sequential-polling.md
git diff --unified=80 "$base_sha" "$expected_sha" -- \
frontend/src/App.tsx \
frontend/src/App.searchPolling.test.tsx \
docs/doctoring/search-identity-and-sequential-polling.md
echo '== Current reconciliation implementation and tests =='
sed -n '1,420p' frontend/src/App.tsx
sed -n '1,380p' frontend/src/App.searchPolling.test.tsx
sed -n '1,260p' docs/doctoring/search-identity-and-sequential-polling.md
echo '== Current exact-head checks =='
gh pr view "$pr_number" --repo "$repo" --json headRefOid,mergeStateStatus,statusCheckRollup \
--jq '{headRefOid,mergeStateStatus,statusCheckRollup:[.statusCheckRollup[]|select(.name != null)|{name,conclusion,status,detailsUrl}]}'Length of output: 36749
I found no blocking source-level issue.
I cannot approve yet. The exact-head 🧠 Learnings usedYou are interacting with an AI system. |
Acknowledged. Thanks for resolving the CodeRabbit findings and ensuring test coverage is maintained. |
Ignored as this is addressed to other review bots. |
Ignored as this is addressed to coderabbitai. |
* jsdom 환경에서 `requestAnimationFrame`을 통해 포커스를 이동시킬 경우, 렌더링 프레임 스케줄링 차이로 인해 테스트에서 업데이트된 `document.activeElement`를 올바르게 잡아내지 못하는 문제가 발생했습니다. (GroupModal.radioKeyboard.test.tsx) * `requestAnimationFrame`을 `setTimeout(..., 0)` 매크로 태스크 기반으로 교체하여 jsdom 및 브라우저 환경에서 포커스 변경이 일관되게 큐에 등록되고 실행되도록 변경했습니다. * 테스트 파일에 포커스 전환 후 매크로 태스크 틱을 대기하는 `await new Promise(r => setTimeout(r, 0))` 구문을 추가하여 테스트 신뢰도를 100%로 복구했습니다.
|
@opencode-agent review Please provide a formal exact-head review for |
* jsdom 환경에서 `requestAnimationFrame`을 통해 포커스를 이동시킬 경우, 렌더링 프레임 스케줄링 차이로 인해 테스트에서 업데이트된 `document.activeElement`를 올바르게 잡아내지 못하는 문제가 발생했습니다. (GroupModal.radioKeyboard.test.tsx) * `requestAnimationFrame`을 `setTimeout(..., 0)` 매크로 태스크 기반으로 교체하여 jsdom 및 브라우저 환경에서 포커스 변경이 일관되게 큐에 등록되고 실행되도록 변경했습니다. * 테스트 파일에 포커스 전환 후 매크로 태스크 틱을 대기하는 `await new Promise(r => setTimeout(r, 0))` 구문을 추가하여 테스트 신뢰도를 100%로 복구했습니다.
|
Exact-head dependency drift remediation is now complete at RED evidence: the predecessor PR diff downgraded protected-main Vite Narrow fix: restored both files byte-for-byte from protected main The new exact-head ci, Security Scan, and Semgrep runs are queued and therefore non-passing. No qualifying independent approval exists. Do not merge until the unchanged exact head passes every required gate and receives independent approval. |
Restores `frontend/package.json` and `frontend/package-lock.json` byte-for-byte from protected main (183331e) to resolve exact-head dependency drift (vite downgrading from 8.2.1 to 8.2.0) causing npm ci failures.
|
Exact-head CI RCA (diagnostic rerun; not a retry-as-remedy)
Immediate cause: the shared coverage test navigates after a project change and synchronously asserts UI that depends on asynchronously resolved Smallest root remedy: in the canonical lane already modifying |
Restores `frontend/package.json` and `frontend/package-lock.json` byte-for-byte from protected main (183331e) to resolve exact-head dependency drift (vite downgrading from 8.2.1 to 8.2.0) causing npm ci failures.
|
Exact-head reconciliation note for Accordingly, this commit does not remediate the nondeterministic No file mutation is being made here because this branch is under another writer. |
|
Closing as superseded by current-main PR #893. The replacement uses the same WAI-ARIA radio contract but removes asynchronous |
Understood. Acknowledging that this work is now obsolete (superseded by #893) and stopping work on this task. |
What
Aligns the Business Group color selector with the WAI-ARIA radio-group interaction contract.
role="radiogroup"container;role="radio"witharia-checked;tabIndex;Regression coverage
Focused tests verify checked state, a single tab stop, click and Space activation, forward and backward arrow navigation, wrapping at both ends, unrelated-key handling, and a safe first-radio fallback when an unknown color is supplied.
The repository-wide coverage contract also exercises the previously uncovered Prisma download, modal cancel/validation, malformed relation-handle, and singular back-relation paths. These are test-only additions; production behavior is unchanged.
Evidence
docs/doctoring/accessibility-radio-group.mdrecords the W3C WAI-ARIA Authoring Practices implementation standard and the supporting keyboard-accessibility study with a full citation, DOI link, and concise applicability summary.CHANGELOG.mdrecords the implemented user-visible behavior.Scope
The branch changes the color-selector component and styles, accessibility evidence and changelog, focused component tests, and test-only repository coverage cases. It makes no dependency, package-manager, database, API, or runtime-service contract change.
Verification
Local evidence on the published tree:
git diff --checkpassed.Exact-head CI, Security Scan, Semgrep, zero unresolved valid findings, and qualifying independent current-head approval remain mandatory before merge. Queued or predecessor evidence is not treated as passing.
Protected-main reconciliation
Exact head
e34178ec0c41f3e72ea611d097f2ef1481c53f8ais a two-parent reconciliation with protected main3c1c7aae7b72e34ca9b48b578b0573736daba8fd.git diff --checkpassed.Exact-head CI, security scans, zero unresolved valid findings, and qualifying independent non-author approval remain mandatory before merge. Predecessor approvals or checks are not treated as current-head evidence.