Repository navigation
🐛 fix(radio, slider): 強制カラーモードでも選択中の点と塗りの範囲が見えるようにする - #403
Conversation
- Radio の選択中の点を forced-color-adjust: none にして Highlight（無効時は GrayText）で塗る。内側は Canvas - Slider の塗りの範囲も同様に Highlight / GrayText で塗る - Slider のトラックに、強制カラーモードだけ寸法を変えないアウトラインを付ける - 対応するテストと CHANGELOG を追加 Co-Authored-By: touyou <465697+touyou@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016SVVD5GJ18QmXQmiobfwBA
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codex Review Summary: ✅ CompletedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 92e928244e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| isDisabled: { | ||
| true: "", | ||
| false: "", | ||
| true: "forced-colors:bg-[GrayText]!", | ||
| false: "forced-colors:bg-[Highlight]!", |
There was a problem hiding this comment.
When callers disable the entire group with <Radio disabled>, Radix propagates that state to each item, but RadioItem still passes its own defaulted disabled={false} into this variant. A checked item in such a disabled group therefore receives Highlight rather than GrayText in forced-colors mode and appears enabled; derive this styling from the item's propagated data-disabled state or pass the group state through context.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
There was a problem hiding this comment.
🟡 Changes recommended
Radio items disabled through their group incorrectly render selected indicators with enabled-state Highlight instead of GrayText in forced-colors mode because the styling ignores the group’s disabled state.
1 open issue
What changed in this PR
強制カラーモードでも Sparkle Design の Radio の選択状態と Slider の塗り・トラックを視認できるようにする修正です。通常表示や公開 API は変更しません。
Changes:
- Radio の選択中の点と Slider の塗りにシステムカラーを指定。
- Slider のトラックに、寸法を変えない強制カラーモード専用のアウトラインを追加。
- 関連クラスの回帰テストと CHANGELOG を追加。
| File | Description |
|---|---|
src/components/ui/slider/index.tsx |
塗りのシステムカラーとトラックのアウトラインを追加。 |
src/components/ui/slider/index.test.tsx |
トラック・塗り・無効時のクラスを検証。 |
src/components/ui/radio/index.tsx |
選択中の点と内側の円にシステムカラーを指定。 |
src/components/ui/radio/index.test.tsx |
選択中・項目単位の無効時のクラスを検証。 |
CHANGELOG.md |
強制カラーモードでの表示修正を記録。 |
Review effort: Balanced
- 点の色を RadioItem の disabled prop ではなく、Radix が付ける data-disabled で切り替える - Radio（グループ）側の disabled でもテストする Co-Authored-By: touyou <465697+touyou@users.noreply.github.com> Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016SVVD5GJ18QmXQmiobfwBA
Requested by touyou · project thread
概要
Windows のハイコントラストなどの強制カラーモード（
forced-colors: active）では、ブラウザがbackground-colorを地の色（Canvas）に置き換えます。Radioの選択中の点とSliderの塗りの範囲・トラックは背景色だけで描かれているため、このモードでは消えていました。Radio は、どれが選ばれているか分からなくなっていました。Google Chrome の Modern Web Guidance のガイド（tabs / visual-design）とコンポーネントを突き合わせた監査で見つかったものです。
変更内容
Radio: 選択中の点をforced-color-adjust: noneにし、システムカラーのHighlight（無効時はGrayText）で塗る。内側の白丸はCanvasSlider: 塗りの範囲も同様にHighlight/GrayTextで塗るSlider: トラックに、強制カラーモードのときだけアウトライン（outline-1）を付ける。border と違って寸法が変わらないので、塗りの太さも変わらない通常の表示は変わりません（
forced-colors:の付いたクラスしか足していないため）。動作確認
prettier --check/eslint（変更ファイル）pnpm build:packageが通るpnpm test（822 passed）forcedColors: 'active'で開き、変更前と変更後を撮って比べた（Form/Radio の Default・Disabled、Form/Slider の Default・Disabled）。変更前は選択中の点と塗りが消えていて、変更後は見えること、通常の表示が同じままであることを確かめたセルフレビューリスト
item.json、Code Connect、README、Storybook は API が変わらないので対象外です関連 Issue
Generated by Claude Code