@oprt/react 0.1.0 → 0.2.1

package/dist/ActionStatus/ActionStatus.js

@@ -8,6 +8,7 @@ import { Badge } from "../Badge/Badge.js";
 import { Button } from "../Button/Button.js";
 import { useActionFocus } from "../_internal/useActionFocus.js";
 import { devValidate } from "../_internal/devValidate.js";
+import { useHoldBackNewText } from "../_internal/liveRegion.js";
 import { ActionStatusManifest } from "./ActionStatus.manifest.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var statusStyles = cva(
@@ -34,6 +35,8 @@ function ActionStatusLine({
   requestId,
   children
 }) {
+  const spoken = [`${label}, ${state}.`, requestId && `Request: ${requestId}.`, message].filter(Boolean).join(" ");
+  const holdBack = useHoldBackNewText(true);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -42,13 +45,21 @@ function ActionStatusLine({
       "aria-atomic": "true",
       className: "flex min-w-0 flex-col gap-1u",
       children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere font-medium uppercase tracking-oprt-caps", children: label }),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: variants[state], indicator: "dot", children: state }) }),
-        requestId && /* @__PURE__ */ jsxs("span", { className: "min-w-0 oprt-wrap-anywhere font-mono", children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: holdBack ? null : spoken }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "min-w-0 oprt-wrap-anywhere font-medium uppercase tracking-oprt-caps",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Badge, { variant: variants[state], indicator: "dot", children: state }) }),
+        requestId && /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "min-w-0 oprt-wrap-anywhere font-mono", children: [
           "Request: ",
           requestId
         ] }),
-        message && /* @__PURE__ */ jsx("p", { className: "m-0 min-w-0 oprt-wrap-anywhere", children: message }),
+        message && /* @__PURE__ */ jsx("p", { "aria-hidden": "true", className: "m-0 min-w-0 oprt-wrap-anywhere", children: message }),
         children
       ]
     }

package/dist/Alert/Alert.js

@@ -7,6 +7,7 @@ import { forwardRef } from "react";
 import clsx from "clsx";
 import { AlertManifest } from "./Alert.manifest.js";
 import { devValidate } from "../_internal/devValidate.js";
+import { useHoldBackNewText } from "../_internal/liveRegion.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ICONS = {
   info: Info,
@@ -48,6 +49,7 @@ var Alert = forwardRef((allProps, ref) => {
     ...props
   } = allProps;
   const role = variant === "error" || variant === "warning" ? "alert" : "status";
+  const holdBack = useHoldBackNewText(role === "status");
   const Icon = ICONS[variant];
   const hasBody = children != null && typeof children !== "boolean" && children !== "";
   if (process.env.NODE_ENV !== "production") {
@@ -55,19 +57,26 @@ var Alert = forwardRef((allProps, ref) => {
   }
   return /* @__PURE__ */ jsxs("div", { ref, role, className: clsx(containerStyles({ variant }), className), ...props, children: [
     /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: clsx("shrink-0", accentStyles({ variant })), children: /* @__PURE__ */ jsx(Icon, { size: 16 }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1u oprt-wrap-anywhere", children: [
-      title && /* @__PURE__ */ jsx(
-        "p",
-        {
-          className: clsx(
-            "m-0 text-oprt-sm uppercase tracking-oprt-sm",
-            accentStyles({ variant })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex min-w-0 flex-1 flex-col gap-1u oprt-wrap-anywhere",
+        ...holdBack ? { "aria-hidden": true } : {},
+        children: [
+          title && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: clsx(
+                "m-0 text-oprt-sm uppercase tracking-oprt-sm",
+                accentStyles({ variant })
+              ),
+              children: title
+            }
           ),
-          children: title
-        }
-      ),
-      hasBody && /* @__PURE__ */ jsx("div", { className: "text-oprt-base normal-case text-oprt-text", children })
-    ] }),
+          hasBody && /* @__PURE__ */ jsx("div", { className: "text-oprt-base normal-case text-oprt-text", children })
+        ]
+      }
+    ),
     dismissible && /* @__PURE__ */ jsx(
       "button",
       {

package/dist/AttachmentPreview/AttachmentPreview.js

@@ -77,18 +77,21 @@ var AttachmentPreview = forwardRef(
               /* @__PURE__ */ jsx("span", { className: "oprt-wrap-anywhere", children: attachment.mediaType })
             ] })
           ] }),
-          preview.kind === "image" && (imageError ? /* @__PURE__ */ jsx("p", { role: "status", className: "m-0 text-oprt-error", children: imageError }) : /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: preview.src,
-              alt: preview.alt,
-              onError: () => setImageState(
-                (current) => current.key === imageKey ? { key: imageKey, failed: true } : current
-              ),
-              className: clsx(PREVIEW_HEIGHT, "max-w-full self-start object-contain")
-            },
-            imageKey
-          )),
+          preview.kind === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { role: "status", className: imageError ? "m-0 text-oprt-error" : "sr-only", children: imageError }),
+            !imageError && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: preview.src,
+                alt: preview.alt,
+                onError: () => setImageState(
+                  (current) => current.key === imageKey ? { key: imageKey, failed: true } : current
+                ),
+                className: clsx(PREVIEW_HEIGHT, "max-w-full self-start object-contain")
+              },
+              imageKey
+            )
+          ] }),
           preview.kind === "text" && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "pre",

package/dist/Chart/Chart.js

@@ -874,7 +874,15 @@ var Chart = forwardRef((allProps, ref) => {
                   onBlur: () => setInspectionFocused(false)
                 }
               ),
-              empty ? /* @__PURE__ */ jsx("p", { className: "m-0 py-6u text-oprt-base text-oprt-text-dim", role: "status", children: empty }) : /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  role: "status",
+                  className: empty ? "m-0 py-6u text-oprt-base text-oprt-text-dim" : "sr-only",
+                  children: empty
+                }
+              ),
+              empty ? null : /* @__PURE__ */ jsxs(
                 "svg",
                 {
                   role: "img",
@@ -1092,7 +1100,7 @@ var Chart = forwardRef((allProps, ref) => {
                 variant: "ghost",
                 size: "sm",
                 className: "min-w-0 max-w-full oprt-wrap-anywhere",
-                "aria-label": variant === "heatmap" ? `${seriesNumber.get(item.id)} ${item.label}` : item.label,
+                "aria-label": `${variant === "heatmap" ? `${seriesNumber.get(item.id)} ${item.label}` : item.label}${hidden.has(item.id) ? " Hidden" : ""}`,
                 "aria-pressed": !hidden.has(item.id),
                 disabled,
                 onClick: () => {

package/dist/CopyButton/CopyButton.js

@@ -21,9 +21,28 @@ var feedbackStyles = cva("min-w-0 break-words font-sans text-oprt-base normal-ca
     }
   }
 });
+var reportedLabels = /* @__PURE__ */ new Set();
+function reportLabelWithoutVisibleText(label) {
+  if (process.env.NODE_ENV === "production" || reportedLabels.has(label)) return;
+  reportedLabels.add(label);
+  console.error(
+    JSON.stringify(
+      {
+        component: "CopyButton",
+        error: "LABEL_OMITS_VISIBLE_TEXT",
+        prop: "label",
+        received: label,
+        suggestion: 'The button shows the word "Copy", so its label must contain it (WCAG 2.5.3, Label in Name). Start the label with it: "Copy equipment ID".'
+      },
+      null,
+      2
+    )
+  );
+}
 var CopyButton = forwardRef((allProps, ref) => {
   const { value, label, onCopy, onCopyError, disabled = false, size = "md", className } = allProps;
   const [pending, setPending] = useState(false);
+  if (!/copy/i.test(label)) reportLabelWithoutVisibleText(label);
   const [feedback, setFeedback] = useState(null);
   const pendingRef = useRef(false);
   const isMounted = useIsMounted();

package/dist/CopyButton/CopyButton.manifest.js

@@ -11,7 +11,7 @@ var CopyButtonManifest = {
       label: {
         type: "string",
         required: true,
-        description: 'Accessible action name identifying the value. Feedback reads this label, then the outcome: "Copy equipment ID: copied".'
+        description: 'Accessible action name identifying the value. It must contain "Copy", the word the button shows. Feedback reads this label, then the outcome: "Copy equipment ID: copied".'
       },
       size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
       disabled: { type: "boolean", default: false },

package/dist/EventTimeline/EventTimeline.js

@@ -172,7 +172,15 @@ var EventTimeline = forwardRef(
         "aria-label": label,
         className: clsx(timelineStyles(), className),
         children: [
-          !validRange ? /* @__PURE__ */ jsx("p", { role: "status", className: "m-0 text-oprt-base text-oprt-text-dim", children: "Choose a valid time range with start before end." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              role: "status",
+              className: !validRange ? "m-0 text-oprt-base text-oprt-text-dim" : "sr-only",
+              children: !validRange ? "Choose a valid time range with start before end." : ""
+            }
+          ),
+          !validRange ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-between gap-1u font-mono text-oprt-base text-oprt-text-dim", children: [
               /* @__PURE__ */ jsx("time", { dateTime: new Date(start).toISOString(), children: utc(start) }),
               /* @__PURE__ */ jsx("time", { dateTime: new Date(end).toISOString(), children: utc(end) })

package/dist/LayerControl/LayerControl.js

@@ -165,7 +165,7 @@ var LayerControl = forwardRef(
                       {
                         size: "sm",
                         variant: "tertiary",
-                        "aria-label": `Move ${item.label} up`,
+                        "aria-label": `Move up ${item.label}`,
                         disabled: !canMove(index, -1),
                         onClick: () => move(index, -1),
                         children: "Move up"
@@ -176,7 +176,7 @@ var LayerControl = forwardRef(
                       {
                         size: "sm",
                         variant: "tertiary",
-                        "aria-label": `Move ${item.label} down`,
+                        "aria-label": `Move down ${item.label}`,
                         disabled: !canMove(index, 1),
                         onClick: () => move(index, 1),
                         children: "Move down"

package/dist/Toast/Toast.js

@@ -165,7 +165,7 @@ var Toast = forwardRef((allProps, ref) => {
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 select-text flex-col gap-1u oprt-wrap-anywhere", children: [
           /* @__PURE__ */ jsx(RadixToast.Title, { className: titleStyles({ variant: severity }), children: title }),
           description && /* @__PURE__ */ jsxs(RadixToast.Description, { className: "m-0 text-oprt-base normal-case text-oprt-text", children: [
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: ". " }),
+            /* @__PURE__ */ jsx("span", { "data-radix-toast-announce-exclude": "", "data-radix-toast-announce-alt": ". " }),
             description
           ] })
         ] }),

package/dist/Tooltip/Tooltip.js

@@ -23,6 +23,7 @@ import { isSingleElement, SCREEN_MARGIN, toPlacement, TOOLTIP_WIDTH } from "../_
 import { FocusableWhenUnavailableProvider } from "../_internal/unavailable.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PLAIN_TRIGGER = "inline-flex min-h-3u items-center border-0 bg-transparent p-0 [color:inherit] [font:inherit] [letter-spacing:inherit] underline decoration-dotted underline-offset-2 cursor-help outline-hidden focus-visible:shadow-oprt-focus";
+var CLOSE_DELAY = 150;
 var Tooltip = forwardRef(
   ({
     content,
@@ -78,7 +79,7 @@ var Tooltip = forwardRef(
         isOpen,
         onOpenChange: setOpen,
         delay: delayDuration,
-        closeDelay: 0,
+        closeDelay: CLOSE_DELAY,
         shouldCloseOnPress: !unavailable,
         children: [
           unavailable ? /* @__PURE__ */ jsx(FocusableWhenUnavailableProvider, { value: true, children: focusable }) : focusable,

package/dist/Tooltip/Tooltip.manifest.js

@@ -1,7 +1,7 @@
 // src/Tooltip/Tooltip.manifest.ts
 var TooltipManifest = {
   Tooltip: {
-    description: "Supplementary text on hover or keyboard focus of a trigger, wrapping at about 20rem. A disabled Button trigger stays focusable and announced unavailable, so focus or a tap shows the explanation. Built on React Aria Components (TooltipTrigger + Tooltip), portal'd, with a bordered surface.",
+    description: "Supplementary text on hover or keyboard focus of a trigger, wrapping at about 20rem. The pointer can move onto the tooltip without closing it; it closes 150 ms after the pointer has left both. A disabled Button trigger stays focusable and announced unavailable, so focus or a tap shows the explanation. Built on React Aria Components (TooltipTrigger + Tooltip), portal'd, with a bordered surface.",
     props: {
       side: { type: "enum", values: ["top", "right", "bottom", "left"], default: "top" },
       align: { type: "enum", values: ["start", "center", "end"], default: "center" },

package/dist/UploadQueue/UploadQueue.js

@@ -223,7 +223,7 @@ var UploadQueue = forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: /* @__PURE__ */ jsx(ByteCountLabel, { value: item.sizeBytes }) }),
+                  /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim oprt-wrap-anywhere", children: /* @__PURE__ */ jsx(ByteCountLabel, { value: item.sizeBytes }) }),
                   item.message && /* @__PURE__ */ jsx("p", { className: "m-0 oprt-wrap-anywhere", children: item.message }),
                   transferring && (invalidProgress ? /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-error", children: "Invalid progress counts." }) : item.totalBytes === 0 ? /* @__PURE__ */ jsx("p", { className: "m-0 text-oprt-text-dim", children: `0${NUMBER_UNIT_SPACE}bytes total; no percentage available.` }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
@@ -233,7 +233,7 @@ var UploadQueue = forwardRef(
                         ...item.totalBytes !== void 0 && validLoaded ? { value: item.loadedBytes, max: item.totalBytes } : {}
                       }
                     ),
-                    /* @__PURE__ */ jsxs("p", { className: "m-0 font-mono tabular-nums text-oprt-text-dim", children: [
+                    /* @__PURE__ */ jsxs("p", { className: "m-0 font-mono tabular-nums text-oprt-text-dim oprt-wrap-anywhere", children: [
                       validLoaded ? `${item.loadedBytes}${NUMBER_UNIT_SPACE}bytes transferred` : "Transferred byte count unavailable",
                       item.totalBytes !== void 0 ? ` of ${item.totalBytes}${NUMBER_UNIT_SPACE}bytes` : "; total unknown",
                       "."

package/dist/_internal/liveRegion.js

@@ -0,0 +1,27 @@
+"use client";
+
+// src/_internal/liveRegion.ts
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+var neverChanges = () => () => {
+};
+var LIVE_REGION_LEAD_MS = 100;
+function useHoldBackNewText(enabled) {
+  const hydrating = useSyncExternalStore(
+    neverChanges,
+    () => false,
+    () => true
+  );
+  const lateArrival = useRef(null);
+  if (lateArrival.current === null) lateArrival.current = !hydrating;
+  const [held, setHeld] = useState(Boolean(lateArrival.current));
+  useEffect(() => {
+    if (!held) return;
+    const timer = window.setTimeout(() => setHeld(false), LIVE_REGION_LEAD_MS);
+    return () => window.clearTimeout(timer);
+  }, [held]);
+  return enabled && held;
+}
+export {
+  LIVE_REGION_LEAD_MS,
+  useHoldBackNewText
+};