@kennycorrea/ui 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.6.1 — 2026-10-08
+
+### Fixed
+- **`Slider` thumbs always have an accessible name.** Without `fillFrom`, `label` landed on the
+  Themes root, which has no role, and the `role="slider"` thumb had none (axe:
+  aria-input-field-name). The thumb is now named `label`; a range's thumbs are
+  `"<label>, minimum"` / `"<label>, maximum"` (`"<label>, n of m"` beyond two) instead of
+  Radix's bare "Minimum"/"Maximum". Consumers using `fillFrom={min}` only to get a name can
+  drop it.
+
 ## 0.6.0 — 2026-10-07
 
 ### Added

package/dist/atoms/Slider/Slider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { Slider as ThemedSlider } from '@radix-ui/themes';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useRef, useState, } from 'react';
 import { cn } from '../../utils/cn.js';
 import { fillEdges, fillStyle, percentOf, thumbCentre } from './geometry.js';
 const MARGIN_KEYS = ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml'];
@@ -30,14 +30,54 @@ export const Slider = forwardRef(function Slider(props, ref) {
         setInner(next);
         onValueChange?.(next);
     };
+    // Themes spreads every prop onto the Root, which has no role, and gives its Thumbs no way in —
+    // so the role="slider" elements are named here, after Radix has rendered them.
+    const themedRoot = useRef(null);
+    const setThemedRoot = useCallback((node) => {
+        themedRoot.current = node;
+        assignRef(ref, node);
+    }, [ref]);
+    // Radix labels a range's thumbs "Minimum"/"Maximum" in a later render of its own, so a
+    // one-off write is overwritten; the observer puts ours back whenever anything touches them.
+    useLayoutEffect(() => {
+        const root = themedRoot.current;
+        if (!root)
+            return;
+        const name = () => {
+            const thumbs = root.querySelectorAll('[role="slider"]');
+            thumbs.forEach((thumb, i) => {
+                const wanted = thumbLabel(label, i, thumbs.length);
+                if (thumb.getAttribute('aria-label') !== wanted)
+                    thumb.setAttribute('aria-label', wanted);
+            });
+        };
+        name();
+        const observer = new MutationObserver(name);
+        observer.observe(root, { subtree: true, childList: true, attributeFilter: ['aria-label'] });
+        return () => observer.disconnect();
+    }, [label]);
     const unsupported = fillFrom === undefined ? null : fillFromUnsupported(props, values.length);
     if (unsupported && isDev)
         console.warn(`Slider: fillFrom is ignored — ${unsupported}.`);
-    const slider = fillFrom !== undefined && !unsupported ? (_jsx(FillFromSlider, { ref: ref, ...rest, label: label, className: className, values: values, fillFrom: fillFrom, min: min, max: max, onValueChange: handleChange })) : (_jsx(ThemedSlider, { ref: ref, size: "2", "aria-label": label, className: cn(className), ...rest, onValueChange: handleChange }));
+    const slider = fillFrom !== undefined && !unsupported ? (_jsx(FillFromSlider, { ref: ref, ...rest, label: label, className: className, values: values, fillFrom: fillFrom, min: min, max: max, onValueChange: handleChange })) : (_jsx(ThemedSlider, { ref: setThemedRoot, size: "2", "aria-label": label, className: cn(className), ...rest, onValueChange: handleChange }));
     if (!marks?.length)
         return slider;
     return (_jsxs("div", { className: "ui-slider-field", children: [_jsx(SliderMarks, { marks: marks, min: min, max: max }), slider] }));
 });
+/** One thumb takes the label; a range says which end each thumb is. */
+function thumbLabel(label, index, count) {
+    if (count === 1)
+        return label;
+    if (count === 2)
+        return `${label}, ${index === 0 ? 'minimum' : 'maximum'}`;
+    return `${label}, ${index + 1} of ${count}`;
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
 /**
  * Radix Themes draws its range itself and offers no way to place it, so this path is built on the
  * primitives and styled in `tokens.css` (`.ui-slider*`) from Themes' public tokens — never by

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Upfront's house component layer: atoms over Radix Themes, the token bridge, and the accent logic.",
   "private": false,
   "type": "module",