From 271e6f5db60b72c7ddd6656b94d4b883718bee03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sat, 8 Aug 2026 20:52:20 +0200 Subject: [PATCH 01/11] fix(mood): make the slider clear affordance an icon, not a text label MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The clear-action button sat as muted text beside the value, so a set slider read as one phrase — the number fused with the word next to it (a value of 4 next to "leeren" showed as "4 leeren"). Replace it with an icon-only X that carries the same label as its accessible name, so the value readout stays the bare number in every locale at once. --- src/components/ui/__tests__/slider.test.tsx | 6 +++++- src/components/ui/slider.tsx | 7 +++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/ui/__tests__/slider.test.tsx b/src/components/ui/__tests__/slider.test.tsx index 1908fc897..2c218e5aa 100644 --- a/src/components/ui/__tests__/slider.test.tsx +++ b/src/components/ui/__tests__/slider.test.tsx @@ -105,7 +105,11 @@ describe("", () => { it("offers to clear an answer only when there is one to clear", () => { const set = field({ onClear: () => {}, clearLabel: "zurücksetzen" }); expect(set).toContain('data-slot="slider-field-clear"'); - expect(set).toContain("zurücksetzen"); + // The clear affordance is icon-only: the label rides the accessible name, + // not visible text beside the value, so a set slider never reads "4 leeren". + expect(set).toContain('aria-label="zurücksetzen"'); + // The value span holds only the bare number, never the clear-action label. + expect(set).toMatch(/data-slot="slider-field-value"[^>]*>7<\/span>/); const unanswered = field({ value: null, diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx index 53ed01642..7ee57446a 100644 --- a/src/components/ui/slider.tsx +++ b/src/components/ui/slider.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { Slider as SliderPrimitive } from "radix-ui"; +import { X } from "lucide-react"; import { cn } from "@/lib/utils"; @@ -136,9 +137,11 @@ function SliderField({ type="button" onClick={onClear} data-slot="slider-field-clear" - className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 rounded text-xs underline-offset-2 outline-none hover:underline focus-visible:ring-[3px]" + aria-label={clearLabel} + className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 flex size-6 items-center justify-center rounded outline-none focus-visible:ring-[3px]" > - {clearLabel} +