@wix/form-public 0.121.0 → 0.122.0

package/dist/index.cjs

@@ -39417,20 +39417,33 @@ var CountryButton = (_ref3) => {
   } = _ref3;
   const {
     inputId,
-    ariaDescribedBy
+    labelId
   } = useFieldAttributes2();
   const {
     id
   } = useFieldPropsV2();
+  const {
+    t
+  } = useTranslation();
+  const {
+    selectedCountryCode,
+    countries
+  } = usePhoneInputContext();
+  const buttonId = `${inputId}-country`;
   const ref = React44.useRef(null);
   useFocusFieldEvent(() => {
     var _ref$current;
     (_ref$current = ref.current) == null || _ref$current.focus();
   }, id);
+  const selectedCountry = selectedCountryCode ? countries.find((c) => c.shortCountryCode === selectedCountryCode) : void 0;
+  const dialingCode = selectedCountry ? getCallingCode2(selectedCountry.longCountryCode) || "" : "";
+  const countryCodeLabel = t("field.phone.country-code.aria-label");
+  const ariaLabel = selectedCountry ? `${countryCodeLabel}, ${selectedCountry.countryName}, ${dialingCode}` : countryCodeLabel;
   return /* @__PURE__ */ React44__namespace.default.createElement(reactAriaComponents.Button, {
     ref,
-    id: `${inputId}-country`,
-    "aria-describedby": ariaDescribedBy,
+    id: buttonId,
+    "aria-label": ariaLabel,
+    "aria-labelledby": labelId ? `${labelId} ${buttonId}` : void 0,
     className
   }, children);
 };
@@ -39560,6 +39573,9 @@ var PhoneNumber2 = (_ref1) => {
   let {
     className
   } = _ref1;
+  const {
+    t
+  } = useTranslation();
   const {
     inputId,
     ariaDescribedBy
@@ -39570,7 +39586,9 @@ var PhoneNumber2 = (_ref1) => {
     disabled,
     required,
     onBlur,
-    onFocus
+    onFocus,
+    label,
+    hasError
   } = useFieldPropsV2();
   const {
     currentValue,
@@ -39591,7 +39609,9 @@ var PhoneNumber2 = (_ref1) => {
     required,
     onBlur,
     onFocus,
+    "aria-label": `${label}. ${t("field.phone.aria-label")}`,
     "aria-describedby": ariaDescribedBy,
+    "aria-invalid": hasError,
     placeholder,
     className
   });
@@ -39603,9 +39623,7 @@ var Control3 = (_ref10) => {
   } = _ref10;
   const {
     disabled,
-    required,
-    onBlur,
-    onFocus
+    required
   } = useFieldPropsV2();
   const {
     selectedCountryCode,
@@ -39621,8 +39639,7 @@ var Control3 = (_ref10) => {
     onChange: (key) => handleCountryCodeChange(key),
     isDisabled: disabled,
     isRequired: required,
-    onBlur,
-    onFocus
+    placeholder: ""
   }, countryButtonElement, countryOptionsElement), phoneNumberElement);
 };
 PhoneInput.Label = Label;