Skip to content

🎨 Palette: [UX improvement] 접을 수 μžˆλŠ” μ˜μ—­ μ ‘κ·Όμ„± κ°•ν™” - #275

Closed
seonghobae wants to merge 4 commits into
developmentalfrom
palette/overview-stats-accessibility-1249246358151176680
Closed

🎨 Palette: [UX improvement] 접을 수 μžˆλŠ” μ˜μ—­ μ ‘κ·Όμ„± κ°•ν™”#275
seonghobae wants to merge 4 commits into
developmentalfrom
palette/overview-stats-accessibility-1249246358151176680

Conversation

@seonghobae

@seonghobae seonghobae commented Jul 18, 2026

Copy link
Copy Markdown

πŸ’‘ What

OverviewStats μ»΄ν¬λ„ŒνŠΈ ν•˜λ‹¨μ˜ "What do these numbers mean?" 접이식 μ„€λͺ… μ˜μ—­μ˜ 접근성을 κ°•ν™”ν–ˆμŠ΅λ‹ˆλ‹€. React의 useId 훅을 λ„μž…ν•΄ ν† κΈ€ λ²„νŠΌκ³Ό μ„€λͺ… 컨텐츠 μ˜μ—­ 간에 고유 IDλ₯Ό ν†΅ν•œ ARIA μ—°κ²°(aria-controls, aria-labelledby)을 κ΅¬μΆ•ν–ˆμŠ΅λ‹ˆλ‹€.

🎯 Why

이전 κ΅¬ν˜„μ—μ„œλŠ” λ²„νŠΌμ˜ aria-controls와 λ‚΄μš© μ˜μ—­μ˜ idκ°€ 정적 λ¬Έμžμ—΄λ‘œ ν•˜λ“œμ½”λ”© λ˜μ–΄ μžˆμ–΄ ν•œ νŽ˜μ΄μ§€μ— 이 μ»΄ν¬λ„ŒνŠΈκ°€ μ—¬λŸ¬ 번 쓰일 경우 ID 좩돌 λ¬Έμ œκ°€ λ°œμƒν•  수 μžˆμ—ˆκ³ , λ‚΄μš© μ˜μ—­μ— λͺ…ν™•ν•œ role 속성이 μ—†μ–΄ 보쑰 기술 μ‚¬μš©μžκ°€ μ ‘νžŒ λ‚΄μš©μ΄ μ–΄λ–»κ²Œ μ—°κ΄€λ˜λŠ”μ§€ νŒŒμ•…ν•˜κΈ° μ–΄λ €μ› μŠ΅λ‹ˆλ‹€. 이λ₯Ό W3C μ ‘κ·Όμ„± ꢌμž₯ νŒ¨ν„΄μ— λ§žμΆ”μ–΄ κ°œμ„ ν–ˆμŠ΅λ‹ˆλ‹€.

πŸ“Έ Before/After

μ‹œκ°μ  λ³€κ²½ 사항은 μ—†μœΌλ©° DOM ꡬ쑰의 μ ‘κ·Όμ„± μ†μ„±λ§Œ μΆ”κ°€/μˆ˜μ •λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

β™Ώ Accessibility

  • λ²„νŠΌ(<button>)에 동적 id λΆ€μ—¬, λ‚΄μš©μ„ μ œμ–΄ν•¨μ„ λͺ…μ‹œ(aria-controls).
  • λ‚΄μš© μ˜μ—­(<div>)에 동적 id λΆ€μ—¬ 및 λžœλ“œλ§ˆν¬ μ—­ν• (role="region") μ„€μ •.
  • λ‚΄μš© μ˜μ—­μ— 이 μ˜μ—­μ„ μ„€λͺ…ν•΄μ£ΌλŠ” λ²„νŠΌ μ°Έμ‘°(aria-labelledby) μΆ”κ°€.

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

Summary by CodeRabbit

  • μ ‘κ·Όμ„± κ°œμ„ 
    • λŒ€μ‹œλ³΄λ“œ κ°œμš” ν†΅κ³„μ˜ ν† κΈ€ λ²„νŠΌκ³Ό μ„€λͺ… μ˜μ—­ 연결을 κ°œμ„ ν–ˆμŠ΅λ‹ˆλ‹€.
    • 동적 μ‹λ³„μžλ₯Ό μ‚¬μš©ν•΄ 보쑰 기술이 κ΄€λ ¨ μ½˜ν…μΈ λ₯Ό 더 μ •ν™•ν•˜κ²Œ μΈμ‹ν•©λ‹ˆλ‹€.

- `OverviewStats` μ»΄ν¬λ„ŒνŠΈμ˜ μ„€λͺ… ν† κΈ€ μ˜μ—­μ— `useId`λ₯Ό μ μš©ν•˜μ—¬ `aria-controls`와 `aria-labelledby`λ₯Ό λ™μ μœΌλ‘œ λ§€ν•‘ν–ˆμŠ΅λ‹ˆλ‹€.
- ν† κΈ€λ˜λŠ” 컨텐츠 μ˜μ—­μ— `role="region"`을 λͺ…μ‹œν•˜μ—¬ 슀크린 리더 ν™˜κ²½μ˜ 접근성을 ν–₯μƒμ‹œμΌ°μŠ΅λ‹ˆλ‹€.
@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 Aug 5, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

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

Next review available in: 28 seconds

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: c64e3ea2-862c-4b4c-956c-d868ef7ad68c

πŸ“₯ Commits

Reviewing files that changed from the base of the PR and between bd2e81f and 2e92eff.

β›” Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
πŸ“’ Files selected for processing (25)
  • .claude/skills/persuasion-review/scripts/probe_harness.py
  • .jules/sentinel.md
  • AGENTS.md
  • CHANGELOG.md
  • docs/doctoring/bcrypt-password-input-boundary.md
  • docs/doctoring/event-list-timestamp-parsing.md
  • osv-scanner.toml
  • package.json
  • packages/cli/src/__tests__/transcript.test.ts
  • packages/cli/src/commands/status.ts
  • packages/cli/src/lib/inject-agent-hooks.ts
  • packages/cli/src/lib/project.ts
  • packages/cli/src/lib/transcript.test.ts
  • packages/shared/src/schemas/auth.test.ts
  • packages/shared/src/schemas/auth.ts
  • packages/web/package.json
  • packages/web/src/app/api/events/route.test.ts
  • packages/web/src/app/api/events/route.ts
  • packages/web/src/app/api/password-reset/[token]/route.ts
  • packages/web/src/components/dashboard/event-list.tsx
  • packages/web/src/lib/format.test.ts
  • packages/web/src/lib/format.ts
  • packages/web/src/lib/server/rbac.test.ts
  • packages/web/src/lib/server/rbac.ts
  • pnpm-workspace.yaml
πŸ“ Walkthrough

Walkthrough

OverviewStatsκ°€ ν•˜λ“œμ½”λ”©λœ ID λŒ€μ‹  React useIdλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. ν† κΈ€ λ²„νŠΌκ³Ό μ„€λͺ… μ˜μ—­μ€ 동적 ID, aria-controls, aria-labelledby둜 μ—°κ²°λ©λ‹ˆλ‹€.

Changes

OverviewStats μ ‘κ·Όμ„± μ—°κ²°

Layer / File(s) Summary
동적 ν† κΈ€ 및 μ„€λͺ… μ˜μ—­ μ—°κ²°
packages/web/src/components/dashboard/overview-stats.tsx
React useId둜 ν† κΈ€ λ²„νŠΌκ³Ό μ„€λͺ… μ˜μ—­μ˜ 고유 IDλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. λ²„νŠΌμ€ aria-controls둜 μ˜μ—­μ„ μ°Έμ‘°ν•˜κ³ , μ˜μ—­μ€ role="region" 및 aria-labelledby둜 λ²„νŠΌμ„ μ°Έμ‘°ν•©λ‹ˆλ‹€.

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
πŸ“ Generate docstrings
  • Create stacked PR
  • Commit on current branch
πŸ§ͺ Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch palette/overview-stats-accessibility-1249246358151176680

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

Copy link
Copy Markdown
Author

@opencode-agent @cwl-noema-review @coderabbitai Please review exact current head 926444b88555f89aef116366796e14b2b52ec28b. Verify unique React useId-based aria-controls/aria-labelledby linkage, region semantics, multi-instance collision avoidance, existing visual behavior, successful current-head CI/security checks, and zero unresolved findings.

@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown
🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

repo="ContextualWisdomLab/argos"
sha="926444b88555f89aef116366796e14b2b52ec28b"
file="packages/web/src/components/dashboard/overview-stats.tsx"

echo "== Checked-out commit =="
git rev-parse HEAD
echo

echo "== Requested commit present =="
git cat-file -t "$sha"
echo

echo "== Diff for requested commit =="
git diff "${sha}^" "$sha" -- "$file"
echo

echo "== Component structure =="
ast-grep outline "$file" --items all --view expanded
echo

echo "== Component source =="
cat -n "$file"
echo

echo "== OverviewStats call sites =="
rg -n -C 3 '\bOverviewStats\b' --glob '*.{ts,tsx,js,jsx}' .
echo

echo "== PR metadata and current head =="
gh pr view 275 --repo "$repo" --json number,url,state,headRefOid,statusCheckRollup,reviews,comments
echo

echo "== Commit check runs =="
gh api "repos/$repo/commits/$sha/check-runs?per_page=100" \
  --jq '.check_runs[] | {name, status, conclusion, details_url}'
echo

echo "== Commit status contexts =="
gh api "repos/$repo/commits/$sha/status" \
  --jq '{state, statuses: [.statuses[] | {context, state, target_url, description}]}'
echo

echo "== CodeRabbit review threads and unresolved review-thread count =="
gh api graphql -F owner="ContextualWisdomLab" -F name="argos" -F number=275 -f query='
query($owner: String!, $name: String!, $number: Int!) {
  repository(owner: $owner, name: $name) {
    pullRequest(number: $number) {
      reviewThreads(first: 100) {
        nodes {
          isResolved
          comments(first: 20) {
            nodes { author { login } body path line originalLine }
          }
        }
      }
    }
  }
}' --jq '
.data.repository.pullRequest.reviewThreads.nodes
| {
    total: length,
    unresolved: [ .[] | select(.isResolved | not) ],
    unresolvedCount: ([ .[] | select(.isResolved | not) ] | length)
  }'

Length of output: 30815


🏁 Script executed:

#!/bin/bash
set -euo pipefail

repo="ContextualWisdomLab/argos"
pr=275
file="packages/web/src/components/dashboard/overview-stats.tsx"

echo "== PR base and changed files =="
gh pr view "$pr" --repo "$repo" --json baseRefOid,headRefOid,files \
  --jq '{baseRefOid, headRefOid, files: [.files[] | {path, additions, deletions}]}'
echo

echo "== Base-to-head patch for the component =="
base_sha="$(gh pr view "$pr" --repo "$repo" --json baseRefOid --jq '.baseRefOid')"
head_sha="$(gh pr view "$pr" --repo "$repo" --json headRefOid --jq '.headRefOid')"
git diff --no-ext-diff --unified=80 "$base_sha" "$head_sha" -- "$file"
echo

echo "== GitHub PR patch for the component =="
gh api "repos/$repo/pulls/$pr/files?per_page=100" \
  --jq --arg file "$file" '.[] | select(.filename == $file) | {filename, status, patch}'

Length of output: 6610


@seonghobae Review complete for exact head 926444b88555f89aef116366796e14b2b52ec28b.

No findings.

  • useId() creates separate IDs for buttonId and contentId in each OverviewStats instance.
  • aria-controls={contentId} and aria-labelledby={buttonId} create a correct reciprocal control-to-region relationship.
  • The content element uses role="region" and has an accessible name through aria-labelledby.
  • Per-instance React IDs prevent collisions when multiple OverviewStats components render in the same tree.
  • The patch preserves the existing expanded state logic, displayed text, and CSS class names. No visual behavior changed.
  • Current-head CI passed, including build.
  • Current-head security and dependency checks passed: Semgrep, Trivy, OSV Scanner, Scorecard, Strix, and Dependency Review.
  • Scheduler and closed-PR control jobs were skipped. They are not failures.
  • GitHub reports zero review threads and zero unresolved findings.
⚠️ Action not completed

No files to review.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@google-labs-jules

Copy link
Copy Markdown

@opencode-agent @cwl-noema-review @coderabbitai Please review exact current head 926444b88555f89aef116366796e14b2b52ec28b. Verify unique React useId-based aria-controls/aria-labelledby linkage, region semantics, multi-instance collision avoidance, existing visual behavior, successful current-head CI/security checks, and zero unresolved findings.

Acknowledged.

- `OverviewStats` μ»΄ν¬λ„ŒνŠΈμ˜ μ„€λͺ… ν† κΈ€ μ˜μ—­μ— `useId`λ₯Ό μ μš©ν•˜μ—¬ `aria-controls`와 `aria-labelledby`λ₯Ό λ™μ μœΌλ‘œ λ§€ν•‘ν–ˆμŠ΅λ‹ˆλ‹€.
- ν† κΈ€λ˜λŠ” 컨텐츠 μ˜μ—­μ— `role="region"`을 λͺ…μ‹œν•˜μ—¬ 슀크린 리더 ν™˜κ²½μ˜ 접근성을 ν–₯μƒμ‹œμΌ°μŠ΅λ‹ˆλ‹€.

Copy link
Copy Markdown
Author

Superseded by clean maintainer replacement #392. The replacement preserves only the intended OverviewStats accessibility change plus focused two-instance regression, CHANGELOG, and APA 7 doctoring on exact current developmental. This lineage had expanded to 30 files and more than 1,200 unrelated deletions; none of its checks or reviews are reused.

@seonghobae seonghobae closed this Aug 5, 2026

Copy link
Copy Markdown
Author

This PR is superseded by maintainer-owned replacement #392 on current main. Replacement #392 carries the same accessible Overview disclosure objective, adds per-instance useId linkage, reciprocal aria-controls/aria-labelledby, a real named region, two-instance collision/independent-activation regression coverage, APA 7 doctoring, and a current-head React runtime repair. Closing this stale line avoids duplicate checks and conflicting merge lineage; no review or check from this PR is reused by #392.

@google-labs-jules

Copy link
Copy Markdown

Superseded by clean maintainer replacement #392. The replacement preserves only the intended OverviewStats accessibility change plus focused two-instance regression, CHANGELOG, and APA 7 doctoring on exact current developmental. This lineage had expanded to 30 files and more than 1,200 unrelated deletions; none of its checks or reviews are reused.

Understood. Acknowledging that this work is superseded by #392 and stopping work on this task.

@google-labs-jules

Copy link
Copy Markdown

This PR is superseded by maintainer-owned replacement #392 on current main. Replacement #392 carries the same accessible Overview disclosure objective, adds per-instance useId linkage, reciprocal aria-controls/aria-labelledby, a real named region, two-instance collision/independent-activation regression coverage, APA 7 doctoring, and a current-head React runtime repair. Closing this stale line avoids duplicate checks and conflicting merge lineage; no review or check from this PR is reused by #392.

Understood. Acknowledging that this work is superseded by #392 and stopping work on this task.

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