feat: @base-ui/react 기반 커스텀 Slider UI 컴포넌트 구현 및 적용

[seonghobae]

Preservation / consolidation status

이 PR은 Open / Draft / mergeable preservation lane입니다. Reusable Slider는 canonical #1188, Practice Progress accessibility는 canonical #1226이 각각 소유하며 이 branch를 독립 product owner로 병합하지 않습니다.

• Protected base: develop@314ddeae7b775a4957594b599358c8255617eb2e
• Exact current head: 0c3763ecfd400ab43e2970796439fe7170195141
• Current visible delta: Slider wrapper/story/test/doctoring + PracticeProgress migration only
• Canonical Slider owner: feat: Slider UI 컴포넌트 추가 #1188 live ff7d5f1130e69e4462a389e6c0a248d08b708cd4; latest movement over semantic tree 29b7d072... is zero-file only
• Canonical PracticeProgress owner: feat(workspace): compose accessible Practice Progress slider #1226 exact 0f7cf4188eeffef96d796a479c63f8dd00d3573c
• services/analysis-engine/tests/test_supply_chain_policy.py is not this lane's source ownership

Owner boundary

Base UI Slider composition is canonical #1188 ownership. Practice Progress boundary descriptions, visible label association, focusability, 44 CSS px targets and localized Tooltip/aria-describedby behavior are canonical #1226 ownership. This preservation lane supplies provenance/evidence only and must not become a second writer for either.

Verified delta disposition

Fresh file-by-file comparison makes the PR-0 disposition explicit rather than treating all seven changed files as still-live product work:

• apps/desktop/src/components/ui/slider.tsx: superseded by feat: Slider UI 컴포넌트 추가 #1188. This generated wrapper lacks the canonical SliderLabel/SliderControl surface and the later vertical/RTL/focus-placement/Base UI 1.8.0 doctoring contract.
• apps/desktop/src/components/ui/slider.stories.tsx: superseded by feat: Slider UI 컴포넌트 추가 #1188. This lane has only a weak Default story and does not provide the canonical named/labelled, Range, Vertical, Disabled, CustomStep and RTL state coverage.
• apps/desktop/src/components/ui/slider.test.tsx: superseded by feat: Slider UI 컴포넌트 추가 #1188. Its generic role/callback checks are weaker than the canonical accessible-name, callback, vertical-layout, RTL arrow, nested-input focus and placement regressions.
• apps/desktop/src/features/workspace/PracticeProgress.tsx: the valid Base UI migration idea is adopted in stronger form by feat(workspace): compose accessible Practice Progress slider #1226. feat(workspace): compose accessible Practice Progress slider #1226 additionally restores visible SliderLabel association, persistent localized boundary descriptions/Tooltip, canonical SliderControl, 44 CSS px interaction envelopes and finite 0–100 product clamping.
• apps/desktop/src/features/workspace/PracticeProgress.test.tsx: the useful ArrowRight/numeric interaction intent is adopted and expanded by feat(workspace): compose accessible Practice Progress slider #1226 with visible-label naming, boundary guards/descriptions, focus/hover/Escape Tooltip evidence, +/- clamping and target-envelope contracts.
• CHANGELOG.md: this branch's generated duplicate line plus unrelated blank-line churn is rejected as preservation-only metadata. feat: Slider UI 컴포넌트 추가 #1188 owns the code-current Slider/Base UI adoption changelog; feat(workspace): compose accessible Practice Progress slider #1226 owns the product composition authority.
• .jules/bolt.md: generated implementation-learning prose is not a canonical product/runtime/test contract and is rejected from final owner adoption. It remains preserved only in this branch ancestry.

Thus there is no unique production semantic/test/story delta in #1247 that should become a third owner. This does not justify immediate Close because the canonical successors are still Draft/unprotected and have not completed final browser/Electron acceptance.

Repeated foreign-owner repair

Earlier generated continuations had already reintroduced #1176's Ruff-only test_supply_chain_policy.py delta and were repaired by ordinary descendants through 88f17b9ea72bdf4c285f3ea346a4a46dc04a33ce.

Fresh live descendant 97033bfede4a0a1ec3ab571050d8dfba07748311 again changed only that same formatter file (+1/-3) relative to 88f17b9...; Slider and PracticeProgress semantics were unchanged. Ordinary non-force descendant 0c3763ecfd400ab43e2970796439fe7170195141 uses 97033bf... as its parent and restores the exact validated 88f17b9... tree (d048f45e576c132e4dd9cb39b84c458dca32f423). Intervening history remains ancestry and the branch ref advanced with force=false.

This recurrence is a #1176 single-writer repair finding, not Slider or PracticeProgress product source. Every source movement invalidates predecessor checks/reviews; only fresh exact-head evidence may count, and absent/queued/pending is not GREEN.

Adoption / evidence rule

Final product adoption requires central GHAS permission/identity repair, #1176 protected integration, ordinary/non-force reconciliation of #1188 and #1226, then fresh browser/Electron evidence for pointer/touch/keyboard, drag/collision, actual label-click/focus, 400% zoom, forced colors, Narrator/VoiceOver and KO/EN/JA/ZH/VI/ES/DE/FR rendering.

Storybook/jsdom or a generated preservation branch is not buyer acceptance. Close is allowed only after a verified protected successor has actually inherited the adopted deltas above and the rejected deltas remain intentionally excluded; until then keep Draft/Open.

No self-approval, force-push, destructive rebase, copied formatter source, gate weakening, synthetic status, source-neutral wake commit, blind rerun or predecessor-evidence transfer.

[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

---

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 a186d9947f5318c5dec15ae67ca8919821e25913 기준 Material UI Delivery Gate finding입니다.

현재 PracticeProgress의 기존 visible <label htmlFor="practice-progress-slider">는 그대로인데, 그 id가 native <input type="range">에서 Slider.Root로 이동했습니다. Base UI 공식 API에서 Slider.Root는 <div>를 렌더링하고, visible label은 <Slider.Label>을 사용해야 slider thumb들과 자동 연계됩니다. Thumb는 nested <input type="range">를 가지며 aria-label fallback은 가능하지만, 지금 구조에서는 visible label의 htmlFor association/click-to-focus가 더 이상 native control에 연결되지 않습니다. 즉 screen-reader name은 Thumb aria-label로 남더라도 visible-label interaction/semantic association은 regression입니다.

RED: real Chromium/Firefox/WebKit에서 visible label 클릭 시 slider input/thumb focus, Tab/Shift+Tab, Arrow/Page/Home/End, pointer drag/touch, min/max, disabled, focus-visible을 실제 accessibility tree와 함께 고정하십시오. 320/768/desktop screenshot/E2E도 current head로 남기십시오. jsdom getByRole/fireEvent.keyDown만으로는 이 migration gate를 닫을 수 없습니다.

GREEN: visible label을 Base UI의 Slider.Label로 slider tree 안에 두거나, 동등하게 실제 nested range input과 programmatic association이 성립하는 구조로 바꾸십시오. 기존 visible text와 Thumb name이 중복/충돌하지 않는지도 접근성 트리에서 확인하십시오. KO/EN/JA/ZH/VI/ES/DE/FR의 CJK line-wrap/text expansion/font fallback도 이 material control의 screenshot/E2E acceptance에 포함하십시오.

추가로 Storybook이 Default 하나뿐이고 disabled/focus/value-boundary/touch 상태 evidence가 없으므로 현재 CHANGELOG의 접근성과 터치 경험을 개선 claim은 아직 acceptance evidence가 부족합니다.

판정: component migration intent PASS candidate / visible-label association FAIL / browser interaction evidence FAIL / locale evidence FAIL / UI Delivery Gate FAIL.

[seonghobae]

The visible-label finding is valid, but this preservation branch should not become a second Slider owner. I adopted the reusable part in canonical #1188 instead: RED d2c01645dca2b2fcae530af227fa7842d19ebef7 requires a visible Base UI label to name the nested range input; GREEN 29b7d072c979f4772cb51eeaf96c39041505583f exports SliderLabel as a thin wrapper over Base UI Slider.Label and the focused composition regression now proves the association without a Thumb aria-label. Base UI's current Slider API explicitly requires Slider.Label for visible labels. #1247 remains preservation-only; a future ordinary PracticeProgress composition successor must consume #1188's SliderLabel plus #1226's stronger boundary/tooltip/target semantics and prove label-click focus + keyboard/pointer/touch + accessibility-tree behavior in real browsers before UI acceptance.

[google-labs-jules]

The visible-label finding is valid, but this preservation branch should not become a second Slider owner. I adopted the reusable part in canonical #1188 instead: RED d2c01645dca2b2fcae530af227fa7842d19ebef7 requires a visible Base UI label to name the nested range input; GREEN 29b7d072c979f4772cb51eeaf96c39041505583f exports SliderLabel as a thin wrapper over Base UI Slider.Label and the focused composition regression now proves the association without a Thumb aria-label. Base UI's current Slider API explicitly requires Slider.Label for visible labels. #1247 remains preservation-only; a future ordinary PracticeProgress composition successor must consume #1188's SliderLabel plus #1226's stronger boundary/tooltip/target semantics and prove label-click focus + keyboard/pointer/touch + accessibility-tree behavior in real browsers before UI acceptance.

Understood. Acknowledging that this work is now obsolete and stopping work on this task. Returning to preservation boundary state.

[seonghobae]

Canonical succession has advanced without making this preservation branch a product owner. #1226 now points to ordinary/non-force two-parent head 0f7cf4188eeffef96d796a479c63f8dd00d3573c, with canonical #1188 exact 29b7d072c979f4772cb51eeaf96c39041505583f as its Slider parent/base.

That successor absorbs the useful PracticeProgress migration idea while repairing the weaker #1247 semantics: it uses SliderLabel instead of native htmlFor on Slider.Root, consumes canonical SliderControl, restores size-11 +/- targets, persistent localized boundary aria-describedby, Tooltip focus/hover behavior, and a 44 CSS px slider control envelope. Against #1188 the successor changes only four Workspace-owned files.

Keep #1247 Open/Draft as preservation evidence. Do not close it yet under PR-0: current-head hosted/browser evidence and protected integration must first verify that every still-valid #1247 story/test/semantic delta is inherited or explicitly rejected with evidence.