@wix/editor-react-components 1.2446.0 → 1.2447.0

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

@@ -41,8 +41,11 @@ export type TextMarqueeProps = {
         font?: string;
         spaceBetweenItems?: string;
     } & Record<string, unknown>;
+    useNewA11y?: boolean;
     translations: {
         ariaLabel?: string;
+        playAnimation?: string;
+        pauseAnimation?: string;
     };
     tagName?: TagName;
     isPreviewAnimationActive?: boolean;

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

@@ -1,10 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { useService } from "@wix/services-manager-react";
+import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { L as Link } from "../chunks/Link.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { p as parseSvg } from "../chunks/parseSvg.js";
+import { g as getTranslation } from "../chunks/getTranslation.js";
 const PauseSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M7.5,5 C8.32842712,5 9,5.67157288 9,6.5 L9,11.5 C9,12.3284271 8.32842712,13 7.5,13 C6.67157288,13 6,12.3284271 6,11.5 L6,6.5 C6,5.67157288 6.67157288,5 7.5,5 Z M11.5,5 C12.3284271,5 13,5.67157288 13,6.5 L13,11.5 C13,12.3284271 12.3284271,13 11.5,13 C10.6715729,13 10,12.3284271 10,11.5 L10,6.5 C10,5.67157288 10.6715729,5 11.5,5 Z M7.5,6 C7.22385763,6 7,6.22385763 7,6.5 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,6.5 C8,6.22385763 7.77614237,6 7.5,6 Z M11.5,6 C11.2238576,6 11,6.22385763 11,6.5 L11,11.5 C11,11.7761424 11.2238576,12 11.5,12 C11.7761424,12 12,11.7761424 12,11.5 L12,6.5 C12,6.22385763 11.7761424,6 11.5,6 Z" }));
 PauseSmall.displayName = "PauseSmall";
 var PauseSmall_default = PauseSmall;
@@ -53,9 +57,20 @@ const TestIds = {
   marqueeUnit: "marquee-unit",
   headingTag: "heading-tag"
 };
+const PLAY_PAUSE_A11Y_EXPERIMENT = "TextMarqueePlayPauseA11y";
+const TRANSLATIONS_NAMESPACE = "ariaLabels";
+const TranslationKeys = {
+  playAnimation: "textMarquee_aria_label_play",
+  pauseAnimation: "textMarquee_aria_label_pause"
+};
+const DefaultTranslations = {
+  playAnimation: "Play animation",
+  pauseAnimation: "Pause animation"
+};
 const PlayPauseButton = ({
   isPlaying,
   onToggle,
+  useNewA11y = false,
   translations,
   className
 }) => {
@@ -65,13 +80,14 @@ const PlayPauseButton = ({
       e.preventDefault();
     }
   };
+  const actionLabel = isPlaying ? translations.pauseAnimation : translations.playAnimation;
   return /* @__PURE__ */ jsx(
     "button",
     {
       className,
       onKeyDown: handleKeyDown,
-      "aria-label": translations.ariaLabel,
-      "aria-pressed": isPlaying,
+      "aria-label": useNewA11y ? actionLabel : translations.ariaLabel,
+      ...useNewA11y ? {} : { "aria-pressed": isPlaying },
       children: isPlaying ? /* @__PURE__ */ jsx(PauseSmall_default, {}) : /* @__PURE__ */ jsx(PlaySmall_default, {})
     }
   );
@@ -236,6 +252,7 @@ const TextMarquee$1 = (props) => {
     speed,
     movementDirection,
     translations,
+    useNewA11y = false,
     customClassNames = [],
     isPreviewAnimationActive = false,
     isBuilder
@@ -353,6 +370,7 @@ const TextMarquee$1 = (props) => {
           {
             isPlaying: animationState === "running",
             onToggle: pauseOnClick,
+            useNewA11y,
             translations,
             className: clsx(styles.playButton, styles.visuallyHidden)
           }
@@ -366,9 +384,33 @@ const SPEED_PANEL_RANGE = [0, 100];
 const panelToDataSpeed = (speed) => SPEED_DATA_RANGE[0] + (speed - SPEED_PANEL_RANGE[0]) * (SPEED_DATA_RANGE[1] - SPEED_DATA_RANGE[0]) / (SPEED_PANEL_RANGE[1] - SPEED_PANEL_RANGE[0]);
 const TextMarquee = React__default.forwardRef(
   (props, ref) => {
+    var _a;
     const DEFAULT_SPEED = 9;
+    const env = useService(EnvironmentDefinition);
+    const useNewA11y = ((_a = env == null ? void 0 : env.isExperimentOpen) == null ? void 0 : _a.call(env, PLAY_PAUSE_A11Y_EXPERIMENT)) ?? false;
+    const { translate } = useService(TranslationsDefinition);
+    const translations = useMemo(() => {
+      if (!useNewA11y) {
+        return { ariaLabel: "TextMarquee" };
+      }
+      const tr = translate(TRANSLATIONS_NAMESPACE);
+      return {
+        playAnimation: getTranslation(
+          tr,
+          "playAnimation",
+          TranslationKeys,
+          DefaultTranslations
+        ),
+        pauseAnimation: getTranslation(
+          tr,
+          "pauseAnimation",
+          TranslationKeys,
+          DefaultTranslations
+        )
+      };
+    }, [useNewA11y, translate]);
     const memoizedProps = useMemo(() => {
-      var _a, _b, _c, _d;
+      var _a2, _b, _c, _d;
       const shouldAllowColorOverride = (svg) => {
         if ((svg == null ? void 0 : svg.contentType) !== "color") {
           return true;
@@ -389,8 +431,9 @@ const TextMarquee = React__default.forwardRef(
           text: props.text || "Text Marquee",
           resolvedLink: props.link
         },
-        tagName: ((_a = props.a11y) == null ? void 0 : _a.tag) || "p",
-        translations: { ariaLabel: "TextMarquee" },
+        tagName: ((_a2 = props.a11y) == null ? void 0 : _a2.tag) || "p",
+        useNewA11y,
+        translations,
         className: `${props.className || ""} text-marquee`,
         svgString: (_b = props == null ? void 0 : props.svg) == null ? void 0 : _b.svgContent,
         allowColorOverride: shouldAllowColorOverride(props == null ? void 0 : props.svg),
@@ -400,7 +443,7 @@ const TextMarquee = React__default.forwardRef(
         isInEditor: props.isInEditor || false,
         ariaHidden: (_d = props.a11y) == null ? void 0 : _d.ariaHidden
       };
-    }, [props]);
+    }, [props, useNewA11y, translations]);
     return /* @__PURE__ */ jsx(TextMarquee$1, { ...memoizedProps, rootRef: ref });
   }
 );

package/dist/site/components/TextMarquee/components/PlayPauseButton.d.ts

@@ -2,10 +2,13 @@ import { default as React } from 'react';
 type PlayPauseButtonProps = {
     isPlaying: boolean;
     onToggle: () => void;
+    useNewA11y?: boolean;
     translations: {
         ariaLabel?: string;
+        playAnimation?: string;
+        pauseAnimation?: string;
     };
     className?: string;
 };
-export declare const PlayPauseButton: ({ isPlaying, onToggle, translations, className, }: PlayPauseButtonProps) => React.JSX.Element;
+export declare const PlayPauseButton: ({ isPlaying, onToggle, useNewA11y, translations, className, }: PlayPauseButtonProps) => React.JSX.Element;
 export {};

package/dist/site/components/TextMarquee/components/constants.d.ts

@@ -4,3 +4,13 @@ export declare const TestIds: {
     marqueeUnit: string;
     headingTag: string;
 };
+export declare const PLAY_PAUSE_A11Y_EXPERIMENT = "TextMarqueePlayPauseA11y";
+export declare const TRANSLATIONS_NAMESPACE = "ariaLabels";
+export declare const TranslationKeys: {
+    readonly playAnimation: "textMarquee_aria_label_play";
+    readonly pauseAnimation: "textMarquee_aria_label_pause";
+};
+export declare const DefaultTranslations: {
+    readonly playAnimation: "Play animation";
+    readonly pauseAnimation: "Pause animation";
+};

package/dist/site/components/TextMarquee/manifest.js

@@ -162,7 +162,17 @@ const manifest = {
   resources: {
     client: {
       componentUrl: "./site/components/TextMarquee/component.tsx",
-      moduleSpecifier: "@wix/editor-react-components/TextMarquee"
+      moduleSpecifier: "@wix/editor-react-components/TextMarquee",
+      serviceDependencies: [
+        "@wix/viewer-service-environment",
+        "@wix/viewer-service-translations"
+      ],
+      dependencies: {
+        serviceDependencies: [
+          "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations"
+        ]
+      }
     },
     editor: {
       componentUrl: "./site/components/TextMarquee/component.preview.tsx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2446.0",
+  "version": "1.2447.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "fb22e8c05ce26a57255ba8adfa67c91f00ae3d1a19b7ff0f710a37b0"
+  "falconPackageHash": "c2c560804b08a14c1ed0caba9014056c45883716d0bef03e4841601e"
 }