🎨 Palette: [UX improvement] 아코디언 접근성 및 키보드 포커스 개선 by seonghobae · Pull Request #210 · ContextualWisdomLab/argos

seonghobae · 2026-07-06T21:43:46Z

💡 What

ContextSection 컴포넌트의 <button>과 콘텐츠 영역이 ARIA 속성으로 연결되지 않아 접근성이 떨어지는 부분을 개선했습니다 (aria-controls, role="region", aria-labelledby 도입).
<button>을 통한 키보드 탐색 시(Tab 이동 시) 포커스 링이 명확하게 표시되도록 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset 유틸리티 클래스를 추가했습니다.
vitest를 통해 해당 변경사항에 대한 접근성 및 상태 변경 테스트 커버리지를 100%로 확보했습니다.

🎯 Why

접근성(A11y): 스크린 리더 사용자가 현재 버튼이 조작하는 영역(region)이 무엇인지 명확하게 인지하고 상태(open/close)에 따라 변화를 잘 파악하게 하기 위함입니다.
키보드 접근성(A11y): 마우스를 사용할 수 없는 사용자가 탭(Tab) 키로 페이지를 탐색할 때, 현재 초점이 어디에 위치해 있는지 시각적으로 분명하게 피드백을 주기 위해 포커스 인디케이터가 필수적입니다.

📸 Before/After

Before: 스크린 리더기에서 버튼 클릭 시 어떤 영역이 열리는지 연결고리가 없었으며, 탭키를 통한 탐색 시 ContextSection의 토글 버튼에 시각적 포커스 링이 나타나지 않아 혼란을 줄 수 있었습니다.
After: 고유한 동적 ID를 활용한 ARIA 속성 연결을 통해 접근성이 개선되었고, 명확한 포커스 링 디자인 추가로 키보드 네비게이션 사용성이 향상되었습니다.

♿ Accessibility

useId()를 통해 버튼(aria-controls)과 패널(id, aria-labelledby)을 시맨틱하게 연결.
키보드 포커스 스타일 명시 (focus-visible:ring-2).
스크린 리더 무의미 콘텐츠 제외(aria-hidden="true"를 아이콘에 적용).

PR created automatically by Jules for task 2033724048262015987 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

- `ContextSection` 내 커스텀 아코디언 토글과 콘텐츠 영역 간 `aria-controls`, `role="region"`, `aria-labelledby` 등 필수 ARIA 연결 속성 누락 문제를 `useId()`를 활용하여 동적으로 부여함으로써 해결했습니다. - 기본 UI primitive를 사용하지 않는 커스텀 `<button>` 요소에 대해 `focus-visible` 등 명확한 키보드 포커스 스타일을 추가해 키보드 조작 가시성을 높였습니다. - 불필요한 스크린 리더 음성 출력을 막기 위해 chevron 아이콘에 `aria-hidden="true"`를 부여했습니다. - 관련 테스트 코드(`context-section.test.tsx`)를 작성하여 테스트 커버리지를 100% 확보하고 의도된 기능과 접근성 속성이 잘 적용되는지 검증했습니다.

google-labs-jules · 2026-07-06T21:43:48Z

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

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

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: [UX improvement] 아코디언 접근성 및 키보드 포커스 개선#210

🎨 Palette: [UX improvement] 아코디언 접근성 및 키보드 포커스 개선#210
seonghobae wants to merge 11 commits into
developmentalfrom
palette/accordion-a11y-2033724048262015987

seonghobae commented Jul 6, 2026

Uh oh!

google-labs-jules Bot commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

seonghobae commented Jul 6, 2026

💡 What

🎯 Why

📸 Before/After

♿ Accessibility

Uh oh!

google-labs-jules Bot commented Jul 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant