🎨 Palette: [접근성] 날짜 범위 선택 버튼에 aria-label 추가

[seonghobae]

💡 What: date-range-picker.tsx의 날짜 범위 선택 버튼(7d, 30d, 90d, ALL)에 스크린 리더용 aria-label 속성을 추가하고 테스트를 갱신했습니다.
🎯 Why: 아이콘은 아니지만 "7d" 같은 약어 텍스트만 있는 버튼은 스크린 리더 사용자가 직관적으로 이해하기 어렵습니다. "지난 7일"과 같이 명확한 맥락을 제공하여 웹 접근성을 개선합니다.
📸 Before/After: 시각적인 변경 사항은 없으며, 스크린 리더에서 '7d' 대신 '지난 7일'로 읽어줍니다.
♿ Accessibility: 버튼 컴포넌트에 접근 가능한 aria-label을 추가했습니다.

---

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

Summary by CodeRabbit

• 개선 사항
  • 날짜 범위 선택기 프리셋 버튼에 한국어 접근성 이름을 제공해 스크린 리더 사용자가 각 기간을 더 쉽게 구분할 수 있도록 개선했습니다.
  • 프리셋 버튼의 접근성 라벨이 ‘지난 7일’, ‘지난 30일’, ‘지난 90일’, ‘전체 기간’으로 표시됩니다.

[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]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 7254b415-d7b4-4a67-a247-1eaf788f5674

📥 Commits

Reviewing files that changed from the base of the PR and between 2fa9201 and ab1bf96.

📒 Files selected for processing (2)

• packages/web/src/components/dashboard/date-range-picker.test.tsx
• packages/web/src/components/dashboard/date-range-picker.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

DateRangePicker 프리셋 버튼에 한국어 aria-label을 추가했습니다. 관련 테스트의 버튼 조회 이름을 새 라벨에 맞게 변경했습니다.

Changes

날짜 범위 선택기 접근성

Layer / File(s)	Summary
프리셋 접근성 라벨 및 테스트 packages/web/src/components/dashboard/date-range-picker.tsx, packages/web/src/components/dashboard/date-range-picker.test.tsx	프리셋에 한국어 ariaLabel 값을 추가하고 버튼에 aria-label을 설정했습니다. 테스트는 지난 7일, 지난 30일, 지난 90일, 전체 기간을 조회합니다.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Feature

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 날짜 범위 선택 버튼에 접근성을 위한 aria-label을 추가하는 주요 변경 사항을 정확하게 설명합니다. 간결하고 명확합니다.
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 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[seonghobae]

Exact-head review: 63f99b3a6c3da76b377fac0601975d3b75068cfa

현재 수리는 스크린 리더 설명을 늘리지만, visible label과 accessible name을 서로 다른 문자열로 만들어 WCAG 2.5.3 Label in Name 계약을 깨뜨립니다. 버튼에는 여전히 7d / 30d / 90d / ALL이 보이는데 aria-label은 각각 지난 7일 / 지난 30일 / 지난 90일 / 전체 기간으로 visible token을 전혀 포함하지 않습니다. 음성 입력 사용자는 화면에서 보이는 7d를 말해도 그 이름으로 컨트롤을 찾지 못할 수 있습니다. W3C APG도 visible text를 accessible name의 우선 소스로 쓰는 편을 권고합니다.

RED: 이 exact head에서 각 버튼의 computed accessible name이 화면에 보이는 token을 포함하는지 실제 browser accessibility tree로 검증하고, Tab/Enter/Space 및 aria-pressed 전환까지 함께 고정해 주세요. aria-label="지난 7일"처럼 visible token을 제거한 mutation은 반드시 실패해야 합니다.

GREEN: 7d — 지난 7일처럼 visible token을 accessible name에 포함시키거나, 더 견고하게는 visible 7d + visually-hidden 설명 suffix로 이름을 content에서 파생시키는 방법이 좋습니다. 제품이 약어 대신 전체 문구를 노출할 수 있다면 visible label 자체를 명확한 locale 문자열로 바꾸는 쪽이 더 단순합니다. 한국어 설명을 컴포넌트 상수에 새 canonical truth로 굳히지 말고, locale owner/translation resource가 있으면 그 경계를 사용해 주세요.

UI Delivery Gate: FAIL until current-head browser a11y/keyboard evidence is GREEN.

[seonghobae]

exact 40eeeee1bb05a5737b720609fe8780ff0bba0c65의 접근성 의도는 맞지만, 현재 수리는 accessible name을 한국어 문자열로 source에 고정해 locale contract를 새로 깨뜨립니다. visible label은 7d/30d/90d/ALL처럼 언어 중립인데 aria-label만 지난 7일/지난 30일/지난 90일/전체 기간으로 강제되므로 EN/JA/ZH/VI/ES/DE/FR 사용자와 스크린 리더는 UI locale과 다른 언어의 이름을 받게 됩니다. protected developmental의 이 컴포넌트에는 locale-aware surface가 없고, 이번 PR은 그 상태를 더 깊게 고정합니다.

CWL UI/i18n 경계상 file/JS bundle에 locale catalog를 늘리는 방향도 GREEN이 아닙니다. 날짜 프리셋의 accessible name은 screen-key 기반 versioned translation resource/cache에서 현재 locale로 resolve하고, ontology label ledger와는 분리해야 합니다. 제품이 아직 이 translation boundary를 소비하지 못한다면 이 PR을 Ready로 두기보다 Draft/owner prerequisite로 연결하는 편이 맞습니다.

RED: 같은 current-head component를 KO/EN/JA/ZH/VI/ES/DE/FR locale fixture에서 렌더해 각 preset의 accessible name이 선택 locale과 일치하는지, aria-pressed/click/keyboard 동작이 그대로인지 accessibility tree로 검증하십시오. CJK line-wrap/text expansion은 visible UI가 아니라도 screen-reader name truncation/조합이 없는지 함께 확인하십시오. 320/768/desktop과 Chromium/Firefox/WebKit에서 현재 작은 preset control의 focus-visible/touch target도 material UI delivery evidence로 남겨야 합니다.

GREEN: literal ariaLabel을 PRESETS에 넣지 말고 semantic key(date_range.last_n_days, date_range.all_time 등)+parameter를 현재 product translation boundary에 전달하십시오. full catalog/heavy SPA i18n을 추가하라는 뜻이 아니라, 이미 요구된 DB-versioned screen-key cache를 얇게 소비하는 형태여야 합니다. 해당 owner가 아직 없다면 prerequisite를 명시하고 이 PR은 Draft로 유지하십시오.

판정: a11y intent PASS 후보, accessible-name locale correctness FAIL, translation ownership FAIL/PENDING, material UI locale/E2E evidence FAIL.

[seonghobae]

exact-head a25c908982b710f022f56f9bbc28188296f2dea2 owner-path review입니다.

현재 aria-label='지난 7일'처럼 visible text 7d/30d/90d/ALL을 accessible name에서 완전히 대체하는 방식은 접근성을 개선하면서 동시에 WCAG 2.2 SC 2.5.3 Label in Name 회귀를 만들 수 있습니다. W3C는 visible label의 텍스트가 accessible name에 포함되어야 한다고 요구하고, speech-input 사용자가 화면에 보이는 이름으로 control을 호출할 수 있어야 한다고 설명합니다. aria-label은 button text보다 accessible-name 우선순위가 높으므로 지금 구조에서는 7d가 이름에서 사라집니다. 참고: https://www.w3.org/TR/WCAG22/#label-in-name , https://www.w3.org/WAI/WCAG22/Techniques/failures/F96

또한 accessibility-only string이 component 상수에 한국어로 고정되어 있어 EN/JA/ZH/VI/ES/DE/FR locale에서도 screen reader만 한국어 이름을 받을 수 있습니다. 이 문자열은 visible locale과 같은 screen-key/versioned translation resource에서 나와야 하며 별도 한국어-only path가 되면 안 됩니다.

RED: KO/EN/JA/ZH/VI/ES/DE/FR 각각에서 Chromium/Firefox/WebKit accessibility tree의 name/pressed state를 확인하고, speech/label-in-name acceptance로 visible token 전체(7d 등)가 accessible name에 포함되는지 고정해 주세요. keyboard Tab/Enter/Space, focus-visible, active/inactive state도 current-head E2E로 확인해야 합니다.

GREEN 예시는 visible token을 이름의 선두에 보존하면서 locale 설명을 보충하는 형태(7d, …)이지만, 구체 문구는 product locale owner가 결정하면 됩니다. hard-coded Korean을 제거하고 locale resource + screen key로 연결한 뒤 실제 browser evidence가 있어야 UI Delivery Gate PASS입니다.

[seonghobae]

Admission correction — exact current head a25c908982b710f022f56f9bbc28188296f2dea2 was re-fetched immediately before this transition. The PR remains Open and its branch, commits, reviews, and valid delta are preserved, but it is not merge-admissible: terminal workflow failure: CodeQL PR:cancelled, Security Scan:cancelled. Moving it to Draft/Proposed records the live blocker without retiring or closing the work. Return it to Ready only after the same exact head (or a non-destructive reconciled successor) is mergeable, has no substantive unresolved review state, and has terminal required Checks.