@wix/editor-react-components 1.2480.0 → 1.2481.0

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

@@ -3282,6 +3282,7 @@ function tvControllerFactory({
   };
   return controller;
 }
+const isActivationKey = (event) => event.key === " " || event.key === "Enter";
 function useTransparentVideo(props) {
   const {
     a11y,
@@ -3378,6 +3379,16 @@ 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) {
@@ -3400,6 +3411,16 @@ function useTransparentVideo(props) {
     },
     []
   );
+  const onAudioToggleKeyDownHandler = useCallback(
+    (event) => {
+      if (isActivationKey(event)) {
+        event.stopPropagation();
+        event.preventDefault();
+        setIsMuted((prev) => !prev);
+      }
+    },
+    []
+  );
   return {
     a11y,
     className,
@@ -3409,7 +3430,9 @@ function useTransparentVideo(props) {
     id,
     shouldMuteVideo,
     onAudioToggleClickHandler,
+    onAudioToggleKeyDownHandler,
     onClickHandler,
+    onKeyDownHandler,
     onMouseEnterHandler,
     onMouseOutHandler,
     shouldAutoplay,
@@ -3510,7 +3533,9 @@ function TransparentVideo(props) {
     isPlaying,
     shouldMuteVideo,
     onAudioToggleClickHandler,
+    onAudioToggleKeyDownHandler,
     onClickHandler,
+    onKeyDownHandler,
     onMouseEnterHandler,
     onMouseOutHandler,
     shouldAutoplay,
@@ -3538,7 +3563,10 @@ 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: [
@@ -3584,7 +3612,11 @@ function TransparentVideo(props) {
           "div",
           {
             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, {})
           }
         ),
@@ -3592,6 +3624,10 @@ function TransparentVideo(props) {
           "div",
           {
             className: clsx(styles.playWrapper, { [styles.isShown]: !isPlaying }),
+            tabIndex: 0,
+            "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || void 0,
+            onKeyDown: onKeyDownHandler,
+            "data-testid": "play-button",
             children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
           }
         )

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

@@ -12,6 +12,9 @@
 .mainWrapper__gc4Bd:hover .playWrapper__yH3ix svg {
   transform: scale(1.05);
 }
+.mainWrapper__gc4Bd:focus-visible .playWrapper__yH3ix {
+  opacity: 1;
+}
 
 .videoWrapper__e-kgj {
   width: 100%;
@@ -52,7 +55,7 @@
   opacity: 0;
   transition: opacity 500ms ease;
 }
-.playWrapper__yH3ix.isShown__QBpcz, .playWrapper__yH3ix:hover {
+.playWrapper__yH3ix.isShown__QBpcz, .playWrapper__yH3ix:hover, .playWrapper__yH3ix:focus-visible {
   opacity: 1;
 }
 .playWrapper__yH3ix svg {
@@ -66,6 +69,9 @@
   bottom: 0;
   right: 0;
 }
+.audioToggle__k2EqB:focus-visible {
+  opacity: 1;
+}
 
 .filterEffectSvg__B9Lye {
   height: 0;

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

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { KeyboardEvent, 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;
@@ -9,7 +9,9 @@ export declare function useTransparentVideo(props: TransparentVideoProps): {
     id: string;
     shouldMuteVideo: boolean;
     onAudioToggleClickHandler: (event: MouseEvent<HTMLDivElement>) => void;
+    onAudioToggleKeyDownHandler: (event: KeyboardEvent<HTMLDivElement>) => 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.2480.0",
+  "version": "1.2481.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "69893529805957b9c1fc5462a9b8964610b9dfd35cd23a5d3de3dc4d"
+  "falconPackageHash": "bd03f80f2453c294fc1ddd539364db5cdc495b4518e54b05a5028acb"
 }