@wix/editor-react-components 1.2642.0 → 1.2644.0

package/dist/site/components/Checkbox/component.js

@@ -9,6 +9,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { d as defaultValues, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants40.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__0DpH8";
@@ -87,7 +88,8 @@ function CheckboxComponent(props) {
     onBlur(event);
     handleValidationBlur();
   };
-  const ariaLabel = !label2 ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
+  const customAccessibleNameId = label2 && ariaLabel ? `${id}-accessible-name` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   const rootClassName = clsx(
     className,
@@ -113,6 +115,14 @@ function CheckboxComponent(props) {
               formatClassNames(semanticClassNames.root)
             ),
             children: [
+              customAccessibleNameId && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  id: customAccessibleNameId,
+                  className: accessibilityStyles.visuallyHidden,
+                  children: ariaLabel
+                }
+              ),
               /* @__PURE__ */ jsx(
                 Checkbox.Root,
                 {
@@ -128,6 +138,7 @@ function CheckboxComponent(props) {
                   ),
                   "data-testid": TestIds.control,
                   "aria-label": ariaLabel,
+                  "aria-labelledby": customAccessibleNameId,
                   onFocus,
                   onBlur: handleBlur,
                   children: /* @__PURE__ */ jsx(

package/dist/site/components/Checkbox/css.css

@@ -216,4 +216,15 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.visuallyHidden__Md84p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/site/components/CheckboxGroup/component.js

@@ -18,6 +18,7 @@ const groupLabel = "groupLabel__gW0O8";
 const tooltipButton = "tooltipButton__9ySi3";
 const tooltip = "tooltip__xXd2k";
 const group = "group__5et8j";
+const list = "list__PAzjO";
 const option = "option__mUn-C";
 const control = "control__MMIkR";
 const indicator = "indicator__mDg93";
@@ -32,6 +33,7 @@ const styles = {
   tooltipButton,
   tooltip,
   group,
+  list,
   option,
   control,
   indicator,
@@ -130,7 +132,8 @@ function CheckboxGroupComponent(props) {
   };
   const hasLegend = displayLabel && !!label2;
   const showLabelRow = hasLegend || !!tooltip2;
-  const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
+  const legendId = hasLegend ? `${id}-legend` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   const rootClassName = clsx(
     className,
@@ -188,6 +191,7 @@ function CheckboxGroupComponent(props) {
           hasLegend && /* @__PURE__ */ jsxs(
             Fieldset.Legend,
             {
+              id: legendId,
               className: clsx(
                 styles.groupLabel,
                 selectors.groupLabel,
@@ -223,7 +227,7 @@ function CheckboxGroupComponent(props) {
             /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           CheckboxGroup_CheckboxGroup_CheckboxGroup,
           {
             ...valueProps,
@@ -234,14 +238,16 @@ function CheckboxGroupComponent(props) {
             "aria-invalid": isInvalid || void 0,
             "aria-describedby": showErrorMessage ? errorId : void 0,
             "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabel ? void 0 : legendId,
             className: styles.group,
             "data-testid": TestIds.group,
             onFocus,
             onBlur: handleBlur,
-            children: [
+            children: /* @__PURE__ */ jsxs("div", { role: "list", className: styles.list, children: [
               selectAll && /* @__PURE__ */ jsxs(
                 "label",
                 {
+                  role: "listitem",
                   className: clsx(
                     styles.option,
                     formatClassNames(semanticClassNames.option)
@@ -267,6 +273,7 @@ function CheckboxGroupComponent(props) {
               options.map((option2, index) => /* @__PURE__ */ jsxs(
                 "label",
                 {
+                  role: "listitem",
                   className: clsx(
                     styles.option,
                     formatClassNames(semanticClassNames.option)
@@ -294,7 +301,7 @@ function CheckboxGroupComponent(props) {
                 },
                 option2.value || index
               ))
-            ]
+            ] })
           }
         ),
         showErrorMessage && /* @__PURE__ */ jsxs(

package/dist/site/components/CheckboxGroup/css.css

@@ -72,6 +72,10 @@
 }
 
 .group__5et8j {
+  align-self: stretch;
+}
+
+.list__PAzjO {
   display: flex;
   flex-direction: column;
   align-items: var(--alignment, flex-start);

package/dist/site/components/Dropdown/component.js

@@ -11,6 +11,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { A as ALL_VALUE, s as selectors, a as semanticClassNames, T as TestIds, d as defaultValues, b as TriggerModeValues, c as ARIA_LABEL_NAMESPACE, e as AriaLabels, V as VALUE_MISSING_MESSAGE } from "../chunks/constants36.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
@@ -529,6 +530,7 @@ const DropdownTrigger = ({
       className: triggerClassName,
       "data-testid": TestIds.trigger,
       "aria-label": ariaLabel,
+      "aria-labelledby": labelId,
       "aria-describedby": describedById,
       "aria-invalid": isInvalid || void 0,
       onFocus,
@@ -700,7 +702,7 @@ function Dropdown(props) {
     inline
   });
   const t = translate(ARIA_LABEL_NAMESPACE);
-  const ariaLabel = label2 ? void 0 : t(AriaLabels.root.key) || (a11y == null ? void 0 : a11y.ariaLabel) || AriaLabels.root.default;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || (label2 ? void 0 : t(AriaLabels.root.key) || AriaLabels.root.default);
   const clearLabel = t(AriaLabels.clear.key) || AriaLabels.clear.default;
   const removeItemLabel = t(AriaLabels.removeItem.key) || AriaLabels.removeItem.default;
   const selectedItemValues = selectedItems.map((item) => item.value).filter((value2) => value2 !== "");
@@ -736,6 +738,7 @@ function Dropdown(props) {
   const labelId = label2 ? `${comboboxId}-label` : void 0;
   const fieldName = name || void 0;
   const hasInput = isMultiple || isSearchable;
+  const customAccessibleNameId = label2 && ariaLabel && !hasInput ? `${id}-accessible-name` : void 0;
   const popupOpen = previewList === true || (isMultiple || !isSearchable ? isOpen : isOpen && hasQuery);
   const triggerRegion = /* @__PURE__ */ jsx(
     DropdownTrigger,
@@ -747,7 +750,7 @@ function Dropdown(props) {
       selectedItems,
       placeholder,
       ariaLabel,
-      labelId,
+      labelId: customAccessibleNameId ?? (ariaLabel ? void 0 : labelId),
       clearLabel,
       removeItemLabel,
       describedById: descriptionId,
@@ -808,6 +811,14 @@ function Dropdown(props) {
       ...inline ? {} : { open: popupOpen, onOpenChange: setIsOpen },
       ...isSearchable ? { inputValue, onInputValueChange: handleInputValueChange } : {},
       children: [
+        customAccessibleNameId && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: customAccessibleNameId,
+            className: accessibilityStyles.visuallyHidden,
+            children: ariaLabel
+          }
+        ),
         label2 && /* @__PURE__ */ jsxs(
           Combobox.Label,
           {

package/dist/site/components/Dropdown/css.css

@@ -450,4 +450,15 @@ div.group-XazO1A {
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.visuallyHidden__Md84p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/site/components/RadioButtons/component.js

@@ -9,6 +9,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants24.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__4SkBh";
@@ -103,7 +104,8 @@ function RadioButtonsComponent(props) {
     }
   };
   const hasLegend = !!label2;
-  const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
+  const customAccessibleNameId = hasLegend && ariaLabel ? `${id}-accessible-name` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   const rootClassName = clsx(
     className,
@@ -121,6 +123,14 @@ function RadioButtonsComponent(props) {
       lang: environmentService.language,
       "data-testid": TestIds.root,
       children: /* @__PURE__ */ jsxs(Fieldset.Root, { className: styles.fieldset, children: [
+        customAccessibleNameId && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: customAccessibleNameId,
+            className: accessibilityStyles.visuallyHidden,
+            children: ariaLabel
+          }
+        ),
         (hasLegend || tooltip2) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
           hasLegend && /* @__PURE__ */ jsxs(
             Fieldset.Legend,
@@ -171,6 +181,7 @@ function RadioButtonsComponent(props) {
             "aria-invalid": isInvalid || void 0,
             "aria-describedby": isInvalid && validity.validationMessage ? errorId : void 0,
             "aria-label": ariaLabel,
+            "aria-labelledby": customAccessibleNameId,
             className: styles.group,
             "data-testid": TestIds.group,
             onFocus,

package/dist/site/components/RadioButtons/css.css

@@ -126,6 +126,12 @@
   --radio-border: var(--unselectedBorderColor, #000);
 }
 
+.control__w6l6-:focus-visible,
+.control__w6l6-:has(:focus-visible) {
+  outline: 2px solid #116dff;
+  outline-offset: 2px;
+}
+
 .control__w6l6-[data-checked] {
   --radio-bg: var(--selectedBackgroundColor, #fff);
   --radio-border: var(--selectedBorderColor, #116dff);
@@ -193,4 +199,15 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.visuallyHidden__Md84p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/site/components/TextBox/component.js

@@ -9,6 +9,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { d as defaultValues, s as selectors, T as TestIds, V as VALIDATION_MESSAGES, a as semanticClassNames } from "../chunks/constants18.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__dlp5n";
@@ -108,7 +109,8 @@ function TextBoxComponent(props) {
   };
   const hasLabel = !!label2;
   const hasTooltip = !!tooltip2;
-  const ariaLabel = !hasLabel ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
+  const customAccessibleNameId = hasLabel && ariaLabel ? `${id}-accessible-name` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   const rootClassName = clsx(
     className,
@@ -132,6 +134,14 @@ function TextBoxComponent(props) {
           disabled,
           invalid: isInvalid,
           children: [
+            customAccessibleNameId && /* @__PURE__ */ jsx(
+              "span",
+              {
+                id: customAccessibleNameId,
+                className: accessibilityStyles.visuallyHidden,
+                children: ariaLabel
+              }
+            ),
             (hasLabel || hasTooltip) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
               hasLabel && /* @__PURE__ */ jsxs(
                 Field.Label,
@@ -189,6 +199,7 @@ function TextBoxComponent(props) {
                 minLength: minLength ?? void 0,
                 maxLength: maxLength ?? void 0,
                 "aria-label": ariaLabel,
+                "aria-labelledby": customAccessibleNameId,
                 "data-testid": TestIds.input,
                 onFocus,
                 onBlur: handleBlur

package/dist/site/components/TextBox/css.css

@@ -158,4 +158,15 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.visuallyHidden__Md84p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/site/components/TextInput/TextInput.types.d.ts

@@ -1,4 +1,4 @@
-import { Direction } from '@wix/editor-react-types';
+import { A11y, Direction } from '@wix/editor-react-types';
 import { CorvidTypes } from '../../../types/vendored/editor-elements-types-corvid';
 import { DefaultCompPlatformProps } from '../../../types/vendored/editor-elements-types-thunderbolt';
 import { IReadOnlyPropSDK } from '../../../common/sdk/props-factories/readOnlyPropsSDKFactory';
@@ -27,6 +27,7 @@ type Spx = {
 };
 export type ITextInputImperativeActions = IFocusPropsImperativeActions & IValidationPropsImperativeActions;
 export type ITextInputProps = ITextInputMapperProps & DefaultCompPlatformProps & IValidationPropSDKProps & FieldValidationProps<string> & IChangePropsSDKActions<HTMLInputElement> & Partial<ITextInputPropsSDKActions<HTMLInputElement>> & Partial<IFocusPropsSDKActions> & Partial<IClickPropsSDKActions> & Partial<IValidationPropsSDKActions<ITextInputProps>> & Partial<IElementPropsSDKActions> & Partial<HydrationSDKAction> & ITextInputControllerProps & IAccessibilityPropSDKProps & {
+    a11y?: Pick<A11y, 'ariaLabel'>;
     ref?: React.Ref<ITextInputImperativeActions>;
     autoFocus?: boolean;
     className?: string;

package/dist/site/components/TextInput/component.js

@@ -7,6 +7,7 @@ import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
@@ -448,6 +449,7 @@ const style$1 = {
 };
 const errorMessageFallbackText = "Error text displays here.";
 const InlineErrorMessage = ({
+  id,
   errorMessage,
   errorMessageType,
   shouldShowValidityIndication,
@@ -467,7 +469,7 @@ const InlineErrorMessage = ({
       className: style$1.inlineErrorIndication,
       children: [
         /* @__PURE__ */ jsx(StatusAlertSmall_default, { className: style$1.iconErrorMessage }),
-        /* @__PURE__ */ jsx("span", { className: style$1.txtErrMsg, children: errorMessageText })
+        /* @__PURE__ */ jsx("span", { id, className: style$1.txtErrMsg, children: errorMessageText })
       ]
     }
   ) : null;
@@ -627,6 +629,7 @@ const TextInput = (props, ref) => {
     onMouseEnter = noop,
     onMouseLeave = noop,
     onHydrationComplete = noop,
+    a11y,
     ariaAttributes,
     contentRef
   } = props;
@@ -850,10 +853,20 @@ const TextInput = (props, ref) => {
   };
   const getMinLength = () => activePhoneFormat ? activePhoneFormat.length : minLength ?? void 0;
   const {
-    ariaAttributes: { "aria-label": ariaLabel, ...restAriaAttributes }
+    ariaAttributes: { "aria-label": sdkAriaLabel, ...restAriaAttributes }
   } = getAccessibilityAttributes({ ariaAttributes });
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || sdkAriaLabel;
+  const explicitLabelledBy = restAriaAttributes["aria-labelledby"];
+  const customAccessibleNameId = label2 && ariaLabel && !explicitLabelledBy ? `${id}-accessible-name` : void 0;
+  const componentViewMode = (getPreviewMode == null ? void 0 : getPreviewMode()) ? "preview" : "editor";
   const hasFocus = () => !!inputRef.current && inputRef.current === document.activeElement;
   const descriptionId = description ? `description_${id}` : void 0;
+  const errorId = `${id}-error`;
+  const describedByIds = [
+    restAriaAttributes["aria-describedby"],
+    descriptionId,
+    errorMessageType === "inline" && showErrorIndication && (componentViewMode === "editor" || errorMessageToShow) ? errorId : void 0
+  ].filter(Boolean);
   const inputClasses = clsx(
     style.input,
     selectors.input,
@@ -900,11 +913,11 @@ const TextInput = (props, ref) => {
     ...ariaLabel && { "aria-label": ariaLabel },
     ...!required && { "aria-required": false },
     ...restAriaAttributes,
-    ...descriptionId || restAriaAttributes["aria-describedby"] ? {
-      "aria-describedby": [
-        restAriaAttributes["aria-describedby"],
-        descriptionId
-      ].filter(Boolean).join(" ")
+    ...customAccessibleNameId && {
+      "aria-labelledby": customAccessibleNameId
+    },
+    ...describedByIds.length ? {
+      "aria-describedby": describedByIds.join(" ")
     } : {}
   };
   return /* @__PURE__ */ jsx(
@@ -922,6 +935,14 @@ const TextInput = (props, ref) => {
       onMouseLeave: _onMouseLeave,
       lang: language,
       children: /* @__PURE__ */ jsxs($bcdf0525bf22703d$export$2c73285ae9390cec, { ...textFieldProps, children: [
+        customAccessibleNameId && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: customAccessibleNameId,
+            className: accessibilityStyles.visuallyHidden,
+            children: ariaLabel
+          }
+        ),
         (label2 || tooltip2) && /* @__PURE__ */ jsxs("div", { className: style.labelRow, children: [
           label2 && /* @__PURE__ */ jsxs(
             $01b77f81d0f07f68$export$b04be29aa201d4f5,
@@ -980,11 +1001,12 @@ const TextInput = (props, ref) => {
         /* @__PURE__ */ jsx(
           InlineErrorMessage,
           {
+            id: errorId,
             errorMessageType,
             errorMessage: errorMessageToShow,
             shouldShowValidityIndication: showErrorIndication,
             translations,
-            componentViewMode: (getPreviewMode == null ? void 0 : getPreviewMode()) ? "preview" : "editor"
+            componentViewMode
           }
         )
       ] })

package/dist/site/components/TextInput/css.css

@@ -245,4 +245,15 @@
 }
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
+}
+.visuallyHidden__Md84p {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/site/components/chunks/accessibility.module.js

@@ -0,0 +1,7 @@
+const visuallyHidden = "visuallyHidden__Md84p";
+const accessibilityStyles = {
+  visuallyHidden
+};
+export {
+  accessibilityStyles as a
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2642.0",
+  "version": "1.2644.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "cb674697aa929d269ea449769b32669d8a3d5a873a3d38b56e58c5eb"
+  "falconPackageHash": "4ba57de011d631522ee555c6f7edfe20ac94137c9555adfc101d0228"
 }