@wix/editor-react-components 1.2791.0 → 1.2793.0

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

@@ -11,7 +11,6 @@ function SiteLogo(props) {
   const internalSvgId = React__default.useMemo(() => getUniqueId("svg", "-"), []);
   const { mediaType, svgId, image, link, a11y, className, id, ...otherProps } = props;
   const elementId = id ?? internalSvgId;
-  const alt = !(a11y == null ? void 0 : a11y.ariaHidden) ? (a11y == null ? void 0 : a11y.ariaLabel) || "" : "";
   if (mediaType === "image") {
     return /* @__PURE__ */ jsx(
       Image3,
@@ -20,11 +19,11 @@ function SiteLogo(props) {
         className: clsx(semanticClassNames.root, className),
         link,
         displayMode: "fit",
-        a11y: (a11y == null ? void 0 : a11y.ariaHidden) ? { role: "presentation" } : void 0,
-        image: { ...image, alt }
+        image: image && { ...image, alt: image.alt || void 0 }
       }
     );
   }
+  const alt = !(a11y == null ? void 0 : a11y.ariaHidden) ? (a11y == null ? void 0 : a11y.ariaLabel) || "" : "";
   const svg = svgId ?? {
     uri: "empty.svg",
     viewBox: "0 0 200 200",

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

@@ -1,4 +1,8 @@
+import { DATA } from '@wix/component-protocol/schema';
 import { VideoUploadProps } from '../VideoUpload/VideoUpload.types';
+type TransparentVideoBaseProps = Omit<VideoUploadProps, 'a11y'> & {
+    a11y?: Partial<typeof DATA.A11Y_ATTRIBUTES>;
+};
 export declare enum VideoStartType {
     auto = "auto",
     click = "click",
@@ -20,13 +24,13 @@ export type TransparentVideoFilterEffect = {
     saturation?: number;
     invert?: boolean;
 };
-export interface TransparentVideoProps extends VideoUploadProps {
+export interface TransparentVideoProps extends TransparentVideoBaseProps {
     hideCanvas: boolean;
     videoStartType: VideoStartType;
     videoEndType: VideoEndType;
     filterEffect?: TransparentVideoFilterEffect;
 }
-export interface TransparentVideoBuilderProps extends TransparentVideoFilterEffect, VideoUploadProps {
+export interface TransparentVideoBuilderProps extends TransparentVideoFilterEffect, TransparentVideoBaseProps {
     hideCanvas: boolean;
     videoStartType: VideoStartType;
     videoEndType: VideoEndType;
@@ -47,3 +51,4 @@ export declare enum FilterEffectType {
     grayscale = "grayscale",
     tvHue = "tvHue"
 }
+export {};

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

@@ -3280,7 +3280,6 @@ function tvControllerFactory({
   };
   return controller;
 }
-const isActivationKey = (event) => event.key === " " || event.key === "Enter";
 function useTransparentVideo(props) {
   const {
     a11y,
@@ -3428,16 +3427,6 @@ function useTransparentVideo(props) {
       (_b = videoRef.current) == null ? void 0 : _b.play();
     }
   }, [playingState, isPlaying, shouldReplay]);
-  const onKeyDownHandler = useCallback(
-    (event) => {
-      if (isActivationKey(event)) {
-        event.stopPropagation();
-        event.preventDefault();
-        onClickHandler();
-      }
-    },
-    [onClickHandler]
-  );
   const onMouseEnterHandler = useCallback(() => {
     var _a;
     if (playingState === VideoPlayingState.ended && !shouldReplay) {
@@ -3460,16 +3449,6 @@ function useTransparentVideo(props) {
     },
     []
   );
-  const onAudioToggleKeyDownHandler = useCallback(
-    (event) => {
-      if (isActivationKey(event)) {
-        event.stopPropagation();
-        event.preventDefault();
-        setIsMuted((prev) => !prev);
-      }
-    },
-    []
-  );
   return {
     a11y,
     className,
@@ -3479,9 +3458,7 @@ function useTransparentVideo(props) {
     id,
     shouldMuteVideo,
     onAudioToggleClickHandler,
-    onAudioToggleKeyDownHandler,
     onClickHandler,
-    onKeyDownHandler,
     onMouseEnterHandler,
     onMouseOutHandler,
     shouldAutoplay,
@@ -3582,9 +3559,7 @@ function TransparentVideo(props) {
     isPlaying,
     shouldMuteVideo,
     onAudioToggleClickHandler,
-    onAudioToggleKeyDownHandler,
     onClickHandler,
-    onKeyDownHandler,
     onMouseEnterHandler,
     onMouseOutHandler,
     shouldAutoplay,
@@ -3612,10 +3587,7 @@ function TransparentVideo(props) {
       className: clsx(styles.mainWrapper, className, "wixui-transparent-video"),
       "data-has-alpha": "true",
       "data-playing": shouldAutoplay ? "" : void 0,
-      tabIndex: 0,
-      "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || void 0,
       onClick: onClickHandler,
-      onKeyDown: onKeyDownHandler,
       onMouseEnter: onMouseEnterHandler,
       onMouseLeave: onMouseOutHandler,
       children: [
@@ -3630,7 +3602,11 @@ function TransparentVideo(props) {
                 {
                   id: `wix-video-${id}`,
                   videoRef,
-                  videoMedia: { ...video, name: (a11y == null ? void 0 : a11y.ariaLabel) || video.name },
+                  videoMedia: {
+                    ...video,
+                    name: (a11y == null ? void 0 : a11y.ariaHidden) ? "" : (a11y == null ? void 0 : a11y.ariaLabel) || video.name || "",
+                    poster: video.poster && { ...video.poster, alt: "" }
+                  },
                   muted: shouldMuteVideo,
                   loop: videoEndType === VideoEndType.loop,
                   autoplay: shouldAutoplay,
@@ -3652,31 +3628,29 @@ function TransparentVideo(props) {
                 "webglcanvas",
                 shouldHideCanvas && styles.hidden
               ),
-              "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || "",
               role: "presentation",
               "data-testid": "canvas"
             }
           )
         ] }),
         shouldDisplayAudioToggle && /* @__PURE__ */ jsx(
-          "div",
+          "button",
           {
+            type: "button",
             className: clsx(styles.audioToggle),
-            tabIndex: 0,
             "aria-label": isMuted ? "Unmute video" : "Mute video",
             onClick: onAudioToggleClickHandler,
-            onKeyDown: onAudioToggleKeyDownHandler,
             "data-testid": "audio-toggle",
             children: isMuted ? /* @__PURE__ */ jsx(MutedIcon, {}) : /* @__PURE__ */ jsx(UnMutedIcon, {})
           }
         ),
-        shouldDisplayPlayButton && /* @__PURE__ */ jsx(
-          "div",
+        shouldDisplayPlayButton && // Activating the button (click, Enter or Space) bubbles to the player's onClick
+        /* @__PURE__ */ jsx(
+          "button",
           {
+            type: "button",
             className: clsx(styles.playWrapper, { [styles.isShown]: !isPlaying }),
-            tabIndex: 0,
-            "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || void 0,
-            onKeyDown: onKeyDownHandler,
+            "aria-label": isPlaying ? "Pause" : "Play",
             "data-testid": "play-button",
             children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
           }

package/dist/site/components/TransparentVideo/css.css

@@ -13,8 +13,18 @@
 .mainWrapper__gc4Bd:hover .playWrapper__yH3ix svg {
   transform: scale(1.05);
 }
-.mainWrapper__gc4Bd:focus-visible .playWrapper__yH3ix {
-  opacity: 1;
+
+.playWrapper__yH3ix,
+.audioToggle__k2EqB {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  display: flex;
 }
 
 .videoWrapper__e-kgj {

package/dist/site/components/TransparentVideo/useTransparentVideo.d.ts

@@ -1,17 +1,15 @@
-import { KeyboardEvent, MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import { TransparentVideoProps, VideoEndType } from './TransparentVideo.types';
 export declare function useTransparentVideo(props: TransparentVideoProps): {
-    a11y: Pick<typeof import('@wix/ambassador-devcenter-v1-component-type-data/types').A11yAttributes, "ariaLabel"> | undefined;
+    a11y: Partial<typeof import('@wix/ambassador-devcenter-v1-component-type-data/types').A11yAttributes> | undefined;
     className: string | undefined;
     canvasRef: import('react').RefObject<HTMLCanvasElement>;
     isMuted: boolean;
     isPlaying: boolean;
     id: string;
     shouldMuteVideo: boolean;
-    onAudioToggleClickHandler: (event: MouseEvent<HTMLDivElement>) => void;
-    onAudioToggleKeyDownHandler: (event: KeyboardEvent<HTMLDivElement>) => void;
+    onAudioToggleClickHandler: (event: MouseEvent<HTMLButtonElement>) => void;
     onClickHandler: () => void;
-    onKeyDownHandler: (event: KeyboardEvent<HTMLDivElement>) => void;
     onMouseEnterHandler: () => void;
     onMouseOutHandler: () => void;
     shouldAutoplay: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2791.0",
+  "version": "1.2793.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -222,5 +222,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "3c9322a0775e296eb0a5409dcf55b782f474434ad18f614a1308ec9d"
+  "falconPackageHash": "14fc0f14bf234b2ed1eb3bfcbb254f7b2a1ea2a5adc15ae2db8e4e6b"
 }