@vygruppen/spor-react 12.8.5 → 12.8.6

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.8.5 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.8.6 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,17 +11,17 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/index.mjs           293.38 KB
+ESM dist/index.mjs           293.20 KB
 ESM dist/icons/index.mjs     110.00 B
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       628.34 KB
-ESM ⚡️ Build success in 3041ms
-CJS dist/index.cjs           314.21 KB
+ESM dist/index.mjs.map       628.09 KB
+ESM ⚡️ Build success in 3384ms
+CJS dist/index.cjs           314.03 KB
 CJS dist/icons/index.cjs     381.00 B
 CJS dist/icons/index.cjs.map 157.00 B
-CJS dist/index.cjs.map       628.34 KB
-CJS ⚡️ Build success in 3040ms
-DTS ⚡️ Build success in 31071ms
+CJS dist/index.cjs.map       628.09 KB
+CJS ⚡️ Build success in 3385ms
+DTS ⚡️ Build success in 30082ms
 DTS dist/icons/index.d.ts  44.00 B
 DTS dist/index.d.ts        156.34 KB
 DTS dist/icons/index.d.cts 44.00 B

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.8.5 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.8.6 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 12.8.6
+
+### Patch Changes
+
+- fb78407: Fix accessibility issues in DatePicker and TimePicker.
+
 ## 12.8.5
 
 ### Patch Changes

package/dist/index.cjs

@@ -1725,7 +1725,7 @@ var texts8 = createTexts({
     en: "Calendar"
   }
 });
-var CalendarTriggerButton = React27.forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
+var CalendarTriggerButton = React27.forwardRef(({ variant, disabled, onPress: _, ...buttonProps }, ref) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "datePicker"
@@ -1738,8 +1738,7 @@ var CalendarTriggerButton = React27.forwardRef(({ variant, disabled, ariaLabelle
       "aria-label": t(texts9.openCalendar),
       css: styles.calendarTriggerButton,
       variant: "ghost",
-      disabled,
-      "aria-labelledby": ariaLabelledby
+      disabled
     }
   ) });
 });
@@ -1802,7 +1801,7 @@ function createCalendar2(identifier) {
   }
 }
 var DateField = React27.forwardRef(
-  ({ labelId, ...props }, externalRef) => {
+  (props, externalRef) => {
     var _a5;
     const locale = useCurrentLocale();
     const recipe = react.useSlotRecipe({
@@ -1826,12 +1825,11 @@ var DateField = React27.forwardRef(
       props.label && /* @__PURE__ */ jsxRuntime.jsx(
         react.Box,
         {
-          as: "label",
+          asChild: true,
           css: styles.inputLabel,
           position: "absolute",
           paddingTop: "2px",
-          id: labelId,
-          children: props.label
+          children: /* @__PURE__ */ jsxRuntime.jsx("label", { ...props.labelProps, children: props.label })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1839,7 +1837,6 @@ var DateField = React27.forwardRef(
         {
           segment,
           ariaDescription: t(getAriaLabel(segment.type)),
-          ariaLabel: labelId,
           state
         },
         i
@@ -1849,7 +1846,8 @@ var DateField = React27.forwardRef(
         {
           type: "hidden",
           value: ((_a5 = state.value) == null ? void 0 : _a5.toString()) ?? "",
-          name: props.name
+          name: props.name,
+          id: props.id
         }
       )
     ] });
@@ -1894,7 +1892,7 @@ var getAriaLabel = (segmentType) => {
 };
 var StyledField = React27.forwardRef(
   function StyledField2(props, ref) {
-    const { children, variant, isDisabled, ariaLabelledby, ...otherProps } = props;
+    const { children, variant, isDisabled, ...otherProps } = props;
     const { invalid } = react.useFieldContext() ?? {
       };
     const recipe = react.useSlotRecipe({
@@ -1909,7 +1907,6 @@ var StyledField = React27.forwardRef(
         ref,
         "aria-invalid": invalid,
         "aria-disabled": isDisabled,
-        "aria-labelledby": ariaLabelledby,
         children
       }
     );
@@ -1943,7 +1940,6 @@ var DatePicker = React27.forwardRef(
       state,
       ref
     );
-    const labelId = `label-${React27.useId()}`;
     const inputGroupId = `input-group-${React27.useId()}`;
     const recipe = react.useSlotRecipe({
       key: "datePicker"
@@ -1974,7 +1970,6 @@ var DatePicker = React27.forwardRef(
             {
               display: "inline-flex",
               id: inputGroupId,
-              "aria-labelledby": labelId,
               errorText,
               invalid,
               helperText,
@@ -1986,7 +1981,6 @@ var DatePicker = React27.forwardRef(
                   paddingX: 3,
                   minHeight,
                   isDisabled: props.isDisabled,
-                  ariaLabelledby: labelId,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                       CalendarTriggerButton,
@@ -2003,7 +1997,6 @@ var DatePicker = React27.forwardRef(
                       {
                         label: props.label,
                         labelProps,
-                        labelId,
                         name: props.name,
                         ...fieldProps
                       }
@@ -2177,7 +2170,14 @@ var TimeField = ({ state, ...props }) => {
         children: props.label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(DateTimeSegment, { segment, state }, segment.type)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
+      DateTimeSegment,
+      {
+        segment,
+        state
+      },
+      JSON.stringify(segment)
+    )) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {