@tangle-network/ui 11.50.2 → 11.50.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.50.3
+
+### Patch Changes
+
+- 7ff67c6: `Progress` passes its `value` to the Radix root, so the bar announces `aria-valuenow` and reads `data-state="loading"` or `"complete"`. Before this, a screen reader heard every bar as indeterminate whatever it showed.
+
 ## 11.50.2
 
 ### Patch Changes

package/dist/primitives/progress.js

@@ -18,6 +18,7 @@ const Progress = React.forwardRef(({ className, value, variant = "default", tone
 		className: "relative",
 		children: [/* @__PURE__ */ jsx(ProgressPrimitive.Root, {
 			ref,
+			value,
 			className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
 			...props,
 			children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.50.2",
+  "version": "11.50.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/primitives/progress.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Progress } from "./progress";
+
+describe("Progress", () => {
+  it("announces its reading and reads complete at its maximum", () => {
+    render(
+      <>
+        <Progress value={10} aria-label="Seats used" />
+        <Progress value={100} tone="danger" aria-label="Projects used" />
+      </>,
+    );
+    const seats = screen.getByRole("progressbar", { name: "Seats used" });
+    expect(seats).toHaveAttribute("aria-valuenow", "10");
+    expect(seats).toHaveAttribute("aria-valuemax", "100");
+    expect(seats).toHaveAttribute("data-state", "loading");
+    expect(screen.getByRole("progressbar", { name: "Projects used" })).toHaveAttribute(
+      "data-state",
+      "complete",
+    );
+  });
+});

package/src/primitives/progress.tsx

@@ -33,6 +33,7 @@ const Progress = React.forwardRef<
       <div className="relative">
         <ProgressPrimitive.Root
           ref={ref}
+          value={value}
           className={cn(
             "relative h-2 w-full overflow-hidden rounded-full bg-muted",
             className,