diff --git a/src/components/targets/__tests__/range-bar.test.tsx b/src/components/targets/__tests__/range-bar.test.tsx index bb045a3a4..2f4f2df3e 100644 --- a/src/components/targets/__tests__/range-bar.test.tsx +++ b/src/components/targets/__tests__/range-bar.test.tsx @@ -58,6 +58,19 @@ describe("", () => { expect(html).toContain("var(--destructive)"); }); + it("keeps a lab outlier clear of the bar edge", () => { + const html = render({ + value: 6.8, + min: 30, + max: 100, + unit: "ng/mL", + compact: true, + tone: "lab", + }); + + expect(html).not.toContain("left: 4%"); + }); + it("makes the marker focusable with a text alternative for the value + range (2026-07-17 a11y audit M1)", () => { const html = render({ value: 72, diff --git a/src/components/targets/range-bar.tsx b/src/components/targets/range-bar.tsx index d7b776a5b..a4a992117 100644 --- a/src/components/targets/range-bar.tsx +++ b/src/components/targets/range-bar.tsx @@ -54,6 +54,8 @@ export function RangeBar({ const effectiveOrangeMax = orangeMax != null ? Math.max(orangeMax, max) : computedOrangeMax; + // Keep zero-width ranges from producing invalid percentages. The lab + // adapter currently avoids this by adding a synthetic bound when needed. const orangeSpan = Math.max( isLab ? Number.EPSILON : 1, effectiveOrangeMax - effectiveOrangeMin, @@ -67,7 +69,11 @@ export function RangeBar({ // Lab values can sit far outside a narrow reference window (for example // vitamin D at 6.8 against a minimum of 30). Expand the visible scale to // include the actual value instead of pinning its marker to the edge. - const outlierPadding = Math.max(span * 0.06, Number.EPSILON); + const baseVisualSpan = Math.max( + baseVisualMax - baseVisualMin, + Number.EPSILON, + ); + const outlierPadding = Math.max(baseVisualSpan * 0.06, Number.EPSILON); const visualMin = isLab ? Math.min(baseVisualMin, value - outlierPadding) : baseVisualMin;