@wix/editor-react-components 1.2641.0 → 1.2643.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";
@@ -220,6 +221,9 @@ class IconContentFetcher {
     if (this.pendingRequests.has(cacheKey)) {
       throw this.pendingRequests.get(cacheKey);
     }
+    if (typeof fetch !== "function") {
+      return "";
+    }
     const url = `https://static.parastorage.com/services/wix-ui-icons-common/dist/icons/${theme}/${category}/${name}.${hash}.json`;
     const request = fetch(url, {
       signal: createTimeoutSignal(ABORT_SIGNAL_TIMEOUT)
@@ -445,6 +449,7 @@ const style$1 = {
 };
 const errorMessageFallbackText = "Error text displays here.";
 const InlineErrorMessage = ({
+  id,
   errorMessage,
   errorMessageType,
   shouldShowValidityIndication,
@@ -464,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;
@@ -624,6 +629,7 @@ const TextInput = (props, ref) => {
     onMouseEnter = noop,
     onMouseLeave = noop,
     onHydrationComplete = noop,
+    a11y,
     ariaAttributes,
     contentRef
   } = props;
@@ -847,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,
@@ -897,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(
@@ -919,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,
@@ -977,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.2641.0",
+  "version": "1.2643.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -84,7 +84,7 @@
     "@wix/site-service-business-logger": "^1.0.2",
     "@wix/site-service-configuration": "^1.0.1",
     "@wix/site-service-rendering-context": "^1.0.1",
-    "@wix/site-ui": "1.267.0",
+    "@wix/site-ui": "1.268.0",
     "@wix/video": "^1.106.0",
     "@wix/viewer-service-consent-policy": "^1.0.103",
     "@wix/web-bi-logger": "^2.1.29",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "f5fd7c46f975978d8a69260f7c61a6245145b7c1df69b74112540f32"
+  "falconPackageHash": "4ba57de011d631522ee555c6f7edfe20ac94137c9555adfc101d0228"
 }