@octaviaflow/core 3.0.4 → 3.0.6

package/dist/index.js

@@ -607,6 +607,32 @@ function Breadcrumb({
 import { motion as motion2 } from "framer-motion";
 import { useRef as useRef3 } from "react";
 import { useButton } from "react-aria";
+
+// src/utils/a11y.ts
+function resolveAccessibleName(input) {
+  if (input.ariaLabelledby) {
+    return { "aria-labelledby": input.ariaLabelledby };
+  }
+  if (input.ariaLabel) {
+    return { "aria-label": input.ariaLabel };
+  }
+  if (typeof input.label === "string" && input.label.trim().length > 0) {
+    return { "aria-label": input.label };
+  }
+  for (const candidate of input.fallbacks ?? []) {
+    if (typeof candidate === "string" && candidate.trim().length > 0) {
+      return { "aria-label": candidate };
+    }
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.error(
+      `[@octaviaflow/core ${input.componentName}] No accessible name. Pass a string \`label\`, or \`aria-label\`, or \`aria-labelledby\` so screen readers can announce this control.`
+    );
+  }
+  return { "aria-label": `Unlabeled ${input.componentName}` };
+}
+
+// src/components/Button/Button.tsx
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function Button({
   variant = "primary",
@@ -624,11 +650,19 @@ function Button({
   const ref = useRef3(null);
   const isDisabled = disabled || loading;
   const resolvedType = type ?? "button";
+  const hasVisibleText = typeof children === "string" ? children.trim().length > 0 : Boolean(children);
+  const needsAriaName = !hasVisibleText;
+  const ariaNameProps = needsAriaName ? resolveAccessibleName({
+    ariaLabel: props["aria-label"],
+    ariaLabelledby: props["aria-labelledby"],
+    componentName: "Button"
+  }) : void 0;
   const { buttonProps } = useButton(
     {
       isDisabled,
       onPress: props.onClick,
-      type: resolvedType
+      type: resolvedType,
+      ...ariaNameProps ?? {}
     },
     ref
   );
@@ -644,7 +678,7 @@ function Button({
     onBlur: _onBlur,
     ...passthroughProps
   } = props;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx10(
     motion2.button,
     {
       ...passthroughProps,
@@ -662,27 +696,32 @@ function Button({
       "data-loading": loading || void 0,
       whileTap: isDisabled ? void 0 : { scale: 0.97 },
       transition: { duration: 0.1 },
-      children: [
-        /* @__PURE__ */ jsxs10("span", { className: "ods-btn__content", "aria-hidden": loading, children: [
-          leftIcon && /* @__PURE__ */ jsx10("span", { className: "ods-btn__icon ods-btn__icon--left", children: leftIcon }),
-          children && /* @__PURE__ */ jsx10("span", { className: "ods-btn__label", children }),
-          rightIcon && /* @__PURE__ */ jsx10("span", { className: "ods-btn__icon ods-btn__icon--right", children: rightIcon })
-        ] }),
-        loading && /* @__PURE__ */ jsx10("span", { className: "ods-btn__spinner", role: "status", "aria-label": "Loading", children: /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", children: /* @__PURE__ */ jsx10(
-          "circle",
+      children: /* @__PURE__ */ jsxs10("span", { className: "ods-btn__content", children: [
+        loading ? /* @__PURE__ */ jsx10(
+          "span",
           {
-            cx: "12",
-            cy: "12",
-            r: "10",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            strokeDasharray: "32",
-            strokeDashoffset: "12"
+            className: "ods-btn__icon ods-btn__icon--left ods-btn__icon--spinner",
+            role: "status",
+            "aria-label": "Loading",
+            children: /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", children: /* @__PURE__ */ jsx10(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "10",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeDasharray: "32",
+                strokeDashoffset: "12"
+              }
+            ) })
           }
-        ) }) })
-      ]
+        ) : leftIcon && /* @__PURE__ */ jsx10("span", { className: "ods-btn__icon ods-btn__icon--left", children: leftIcon }),
+        children && /* @__PURE__ */ jsx10("span", { className: "ods-btn__label", children }),
+        rightIcon && !loading && /* @__PURE__ */ jsx10("span", { className: "ods-btn__icon ods-btn__icon--right", children: rightIcon })
+      ] })
     }
   );
 }
@@ -2454,13 +2493,19 @@ function Checkbox({
     defaultSelected: defaultChecked,
     onChange
   });
+  const ariaNameProps = resolveAccessibleName({
+    label,
+    ariaLabel: props["aria-label"],
+    ariaLabelledby: props["aria-labelledby"],
+    componentName: "Checkbox"
+  });
   const { inputProps } = useCheckbox(
     {
       isSelected: state.isSelected,
       isIndeterminate: indeterminate,
       isDisabled: disabled,
       onChange,
-      "aria-label": typeof label === "string" ? label : void 0
+      ...ariaNameProps
     },
     state,
     ref
@@ -6010,7 +6055,7 @@ function DescriptionList({
 // src/components/Dialog/Dialog.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion5 } from "framer-motion";
 import { useRef as useRef11 } from "react";
-import { FocusScope, useDialog, useModal, useOverlay } from "react-aria";
+import { FocusScope, OverlayProvider, useDialog, useModal, useOverlay } from "react-aria";
 import { createPortal } from "react-dom";
 
 // src/utils/motion.ts
@@ -6130,7 +6175,10 @@ function DialogContent({
 }
 function Dialog(props) {
   if (typeof document === "undefined") return null;
-  return createPortal(/* @__PURE__ */ jsx26(DialogContent, { ...props }), document.body);
+  return createPortal(
+    /* @__PURE__ */ jsx26(OverlayProvider, { children: /* @__PURE__ */ jsx26(DialogContent, { ...props }) }),
+    document.body
+  );
 }
 
 // src/components/DonutChart/DonutChart.tsx
@@ -6360,11 +6408,27 @@ function MenuPopup({
   }
   return null;
 }
-function DropdownMenu({ trigger, items, align = "start", className }) {
+function DropdownMenu({
+  trigger,
+  items,
+  align = "start",
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
   const triggerRef = useRef12(null);
   const state = $e3403870bfb691da$export$79fefeb1c2091ac3({});
   const { menuTriggerProps } = useMenuTrigger({}, state, triggerRef);
-  const { buttonProps } = useButton3(menuTriggerProps, triggerRef);
+  const ariaNameProps = resolveAccessibleName({
+    ariaLabel,
+    ariaLabelledby,
+    componentName: "DropdownMenu",
+    fallbacks: [typeof trigger === "string" ? trigger : void 0]
+  });
+  const { buttonProps } = useButton3(
+    { ...menuTriggerProps, ...ariaNameProps },
+    triggerRef
+  );
   const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safeTriggerProps } = buttonProps;
   return /* @__PURE__ */ jsxs28(Fragment6, { children: [
     /* @__PURE__ */ jsx29("button", { ...safeTriggerProps, ref: triggerRef, className: "ods-dropdown__trigger", children: trigger }),
@@ -10178,11 +10242,18 @@ function Radio({
 }) {
   const state = useRadioGroupContext();
   const ref = useRef24(null);
+  const ariaNameProps = resolveAccessibleName({
+    label,
+    ariaLabel: props["aria-label"],
+    ariaLabelledby: props["aria-labelledby"],
+    componentName: "Radio",
+    fallbacks: [value]
+  });
   const { inputProps } = useRadio(
     {
       value,
       isDisabled: disabled,
-      "aria-label": label
+      ...ariaNameProps
     },
     state,
     ref
@@ -10780,6 +10851,15 @@ function Select({
       (o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)
     );
   }, [options, searchQuery, searchable]);
+  const ariaNameProps = useMemo10(
+    () => resolveAccessibleName({
+      label,
+      ariaLabel,
+      ariaLabelledby: ariaLabelledBy,
+      componentName: "Select"
+    }),
+    [label, ariaLabel, ariaLabelledBy]
+  );
   const ariaProps = useMemo10(() => {
     const items = filteredOptions.map((o) => ({
       key: o.value,
@@ -10788,7 +10868,10 @@ function Select({
       isDisabled: o.disabled
     }));
     const props = {
-      label: label || "Select",
+      // Visible string label when present; otherwise rely on the aria-*
+      // props for screen-reader name.
+      label: typeof label === "string" ? label : void 0,
+      ...ariaNameProps,
       items,
       children: (item) => /* @__PURE__ */ jsx66($05678f3aee5e7d1a$export$6d08773d2e66f8f2, { textValue: item.label, children: item.label }, item.key),
       isDisabled: disabled,
@@ -10804,7 +10887,7 @@ function Select({
       props.defaultSelectedKey = defaultValue;
     }
     return props;
-  }, [filteredOptions, label, disabled, value, defaultValue, onChange]);
+  }, [filteredOptions, label, disabled, value, defaultValue, onChange, ariaNameProps]);
   const state = $29256f53a2edafe9$export$5159ec8b34d4ec12(ariaProps);
   const { triggerProps, menuProps } = useSelect(ariaProps, state, triggerRef);
   const { buttonProps } = useButton4(triggerProps, triggerRef);
@@ -11476,7 +11559,7 @@ function Skeleton({ variant = "text", width, height, lines = 1, className }) {
 // src/components/SlideoutPanel/SlideoutPanel.tsx
 import { AnimatePresence as AnimatePresence9, motion as motion12 } from "framer-motion";
 import { useRef as useRef28 } from "react";
-import { FocusScope as FocusScope2, useDialog as useDialog2, useModal as useModal2, useOverlay as useOverlay2 } from "react-aria";
+import { FocusScope as FocusScope2, OverlayProvider as OverlayProvider2, useDialog as useDialog2, useModal as useModal2, useOverlay as useOverlay2 } from "react-aria";
 import { createPortal as createPortal8 } from "react-dom";
 import { Fragment as Fragment16, jsx as jsx71, jsxs as jsxs69 } from "react/jsx-runtime";
 var slideVariants2 = {
@@ -11569,7 +11652,10 @@ function SlideoutContent({
 }
 function SlideoutPanel(props) {
   if (typeof document === "undefined") return null;
-  return createPortal8(/* @__PURE__ */ jsx71(SlideoutContent, { ...props }), document.body);
+  return createPortal8(
+    /* @__PURE__ */ jsx71(OverlayProvider2, { children: /* @__PURE__ */ jsx71(SlideoutContent, { ...props }) }),
+    document.body
+  );
 }
 
 // src/components/Slider/Slider.tsx
@@ -12160,12 +12246,18 @@ function Switch({
     defaultSelected: defaultChecked,
     onChange
   });
+  const ariaNameProps = resolveAccessibleName({
+    label,
+    ariaLabel: props["aria-label"],
+    ariaLabelledby: props["aria-labelledby"],
+    componentName: "Switch"
+  });
   const { inputProps } = useSwitch(
     {
       isSelected: state.isSelected,
       isDisabled: disabled,
       onChange,
-      "aria-label": typeof label === "string" ? label : void 0
+      ...ariaNameProps
     },
     state,
     ref
@@ -12611,9 +12703,18 @@ function Textarea({
   const ref = useRef32(null);
   const errorId = useId4();
   const [charCount, setCharCount] = useState26(() => String(value ?? defaultValue ?? "").length);
+  const ariaNameProps = resolveAccessibleName({
+    label,
+    ariaLabel: props["aria-label"],
+    ariaLabelledby: props["aria-labelledby"],
+    componentName: "Textarea"
+  });
   const { labelProps, inputProps } = useTextField2(
     {
-      label: label || props["aria-label"] || "textarea",
+      // Pass a string `label` only when caller gave a string; otherwise rely
+      // on the aria-* props from resolveAccessibleName.
+      label: typeof label === "string" ? label : void 0,
+      ...ariaNameProps,
       isDisabled: disabled,
       errorMessage,
       validationState: error ? "invalid" : void 0,
@@ -15504,7 +15605,7 @@ function YamlViewer({
 // src/provider/OdsProvider.tsx
 import { generateCssVars, resolveConfig } from "@octaviaflow/config";
 import { createContext as createContext3, useContext as useContext3, useEffect as useEffect21, useMemo as useMemo18 } from "react";
-import { OverlayProvider } from "react-aria";
+import { OverlayProvider as OverlayProvider3 } from "react-aria";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var OdsContext = createContext3(null);
 function OdsProvider({ config: userConfig, children }) {
@@ -15526,7 +15627,7 @@ function OdsProvider({ config: userConfig, children }) {
     }
   }, [resolved]);
   const contextValue = useMemo18(() => ({ config: resolved }), [resolved]);
-  return /* @__PURE__ */ jsx98(OdsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx98(OverlayProvider, { children }) });
+  return /* @__PURE__ */ jsx98(OdsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx98(OverlayProvider3, { children }) });
 }
 function useOds() {
   const ctx = useContext3(OdsContext);