🎨 Palette: 접근성 개선 - ContextSection 토글의 ARIA 속성 추가 by seonghobae · Pull Request #110 · ContextualWisdomLab/argos

seonghobae · 2026-06-23T22:13:29Z

💡 What

ContextSection 컴포넌트 내 토글 버튼에 aria-controls 속성 추가 및 콘텐츠 영역 id 자동 생성 매핑
방향성 화살표 아이콘(Chevron)에 aria-hidden="true" 속성 부여
100% 테스트 커버리지를 위한 context-section.test.tsx 추가 및 vitest 설정 업데이트 (happy-dom 사용)

🎯 Why

사용자 경험 향상 및 접근성 준수: 스크린 리더 등 보조 기기를 사용하는 사용자가 토글 버튼이 열고 닫는 컨텐츠의 대상을 명확히 알 수 있도록 합니다.
불필요한 노이즈 최소화: 시각적인 장식용 아이콘들을 스크린 리더가 불필요하게 읽는 문제를 방지합니다.

📸 Before/After

(시각적인 변화는 없으며 내부 접근성 속성만 개선되었습니다.)

♿ Accessibility

aria-expanded와 aria-controls의 완벽한 짝을 맞추어 키보드 및 스크린 리더 사용자에게 컨텍스트 섹션의 명확한 상태와 대상 전달.

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

…licate calculation `buildTimelineGroups` was calculated redundantly inside both `EventList` and `SessionActivityRibbon` inside `useMemo` hooks. This commit moves the `useMemo` computation into the parent `page.tsx` component and passes down `groups` as a prop to its children, preventing duplicate O(n) array iterations per `events` change.

Replace chained `.reduce()` and `Object.values()` with a single `for...of` loop over `Object.keys()` to avoid unnecessary intermediate array allocations and improve iteration performance during report aggregation.

overview-stats 컴포넌트의 설명 텍스트를 펼치거나 접는 버튼에 키보드 포커스 스타일이 누락되어 있어, 키보드 내비게이션 사용자에게 현재 포커스 위치를 명확히 보여주지 못하는 문제를 수정했습니다. Tailwind CSS의 `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm` 클래스를 추가하여 탭(Tab) 키 이동 시 포커스 링이 보이도록 접근성을 개선했습니다.

- `TokenUsageChart`와 `WeeklyFlowChart`의 데이터 변환 로직에 `useMemo`를 적용하여 불필요한 리렌더링 최적화.

…y-improvements-7782421783208925042

…data-8534904799192449677

…tats-focus-1138085163110647654

…-loops-in-reports-11490543380196529130

…line-groups-memo-10280015208843955185

- `aria-controls`를 추가하여 토글 버튼과 콘텐츠 영역 간의 연관 관계 설정 - `Chevron` 아이콘에 `aria-hidden="true"`를 부여하여 스크린 리더 불필요한 노이즈 최소화 - 100% 컴포넌트 테스트 커버리지 추가

google-labs-jules · 2026-06-23T22:13:30Z

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

Copilot

Pull request overview

This PR improves the accessibility of the ContextSection toggle in the web dashboard reports by wiring up aria-controls/aria-expanded and hiding decorative chevron icons from assistive tech, and adds component-level tests by enabling a DOM-like Vitest environment.

Changes:

Add aria-controls mapping via a generated content id and set chevron icons to aria-hidden="true".
Add ContextSection component tests and expand Vitest to include .test.tsx files.
Add Testing Library and happy-dom dev dependencies to support DOM-based tests.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Adds `happy-dom`/Testing Library deps and updates lock resolutions.
packages/web/vitest.config.ts	Switches test environment and expands include patterns for TSX tests.
packages/web/src/components/dashboard/reports/context-section.tsx	Adds ARIA attributes and hides decorative icons.
packages/web/src/components/dashboard/reports/context-section.test.tsx	Adds unit tests for toggle behavior and ARIA wiring.
packages/web/package.json	Adds Testing Library + `happy-dom` devDependencies for Vitest/RTL.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

 'use client'

-import { useState, type ReactNode } from 'react'
+import React, { useState, useId, type ReactNode } from 'react'


      {open && (
-        <div className="px-4 pb-4 pt-1">
+        <div id={contentId} className="px-4 pb-4 pt-1">
          {children}
        </div>
      )}


  test: {
-    environment: 'node',
-    include: ['src/**/*.test.ts'],
+    environment: 'happy-dom',
+    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],


@@ -0,0 +1,59 @@
+import * as React from 'react'


      next:
        specifier: '15'
-        version: 15.5.18(@babel/core@7.29.7)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+        version: 15.5.18(@babel/core@7.29.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
      next-auth:
        specifier: 5.0.0-beta.30
-        version: 5.0.0-beta.30(next@15.5.18(@babel/core@7.29.7)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)
+        version: 5.0.0-beta.30(next@15.5.18(@babel/core@7.29.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5))(react@19.2.5)


seonghobae · 2026-07-07T06:35:23Z

Closing as superseded during org-wide PR triage. Keeping #210 as the canonical PR for the same overlapping topic: ContextSection/accessibility accordion. This PR is stale/conflicted or has review blockers, so retaining one current PR reduces duplicated review and merge conflict work.

google-labs-jules · 2026-07-07T06:37:29Z

Closing as superseded during org-wide PR triage. Keeping #210 as the canonical PR for the same overlapping topic: ContextSection/accessibility accordion. This PR is stale/conflicted or has review blockers, so retaining one current PR reduces duplicated review and merge conflict work.

Understood. Acknowledging that this work is now obsolete and stopping work on this task.

seonghobae and others added 11 commits June 22, 2026 10:26

refactor(web): optimize multiple reduce loops in weekly reports

3547906

Replace chained `.reduce()` and `Object.values()` with a single `for...of` loop over `Object.keys()` to avoid unnecessary intermediate array allocations and improve iteration performance during report aggregation.

⚡ Bolt: 차트 컴포넌트의 데이터 변환 로직에 useMemo 적용

a1e0025

- `TokenUsageChart`와 `WeeklyFlowChart`의 데이터 변환 로직에 `useMemo`를 적용하여 불필요한 리렌더링 최적화.

🎨 Palette: [접근성 개선] 로그아웃 버튼에 aria-label 추가

3e2eeac

Merge pull request #104 from ContextualWisdomLab/palette/accessibilit…

48388f7

…y-improvements-7782421783208925042

Merge pull request #103 from ContextualWisdomLab/bolt-optimize-chart-…

8a7b265

…data-8534904799192449677

Merge pull request #102 from ContextualWisdomLab/feat/a11y-overview-s…

3ef540b

…tats-focus-1138085163110647654

Merge pull request #101 from ContextualWisdomLab/bolt/optimize-reduce…

0ea0ea5

…-loops-in-reports-11490543380196529130

Merge pull request #100 from ContextualWisdomLab/bolt-perf-build-time…

339134f

…line-groups-memo-10280015208843955185

Copilot AI review requested due to automatic review settings June 23, 2026 22:13

Copilot started reviewing on behalf of seonghobae June 23, 2026 22:14 View session

Copilot AI reviewed Jun 23, 2026

View reviewed changes

seonghobae mentioned this pull request Jun 28, 2026

[codex] ContextSection 토글 ARIA 접근성 개선 vibemafiaclub/argos#69

Closed

seonghobae force-pushed the developmental branch from 339134f to d8a0bb1 Compare July 7, 2026 02:17

seonghobae closed this Jul 7, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

🎨 Palette: 접근성 개선 - ContextSection 토글의 ARIA 속성 추가#110

🎨 Palette: 접근성 개선 - ContextSection 토글의 ARIA 속성 추가#110
seonghobae wants to merge 11 commits into
developmentalfrom
feat/palette-ux-context-section-aria-10943410953225494199

seonghobae commented Jun 23, 2026

Uh oh!

google-labs-jules Bot commented Jun 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

seonghobae commented Jul 7, 2026

Uh oh!

google-labs-jules Bot commented Jul 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

seonghobae commented Jun 23, 2026

💡 What

🎯 Why

📸 Before/After

♿ Accessibility

Uh oh!

google-labs-jules Bot commented Jun 23, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

seonghobae commented Jul 7, 2026

Uh oh!

google-labs-jules Bot commented Jul 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants