fix(Mwpw-163747):fix for accessibility bugs. (#3381)

* image size is 40px| overriden styles made more specific * play/pause button is synced when carousel containing video is slided
adobecom · Jan 9, 2025 · a8222fd · a8222fd
1 parent 5ed9985
commit a8222fd
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/libs/blocks/aside/aside.css b/libs/blocks/aside/aside.css
@@ -752,7 +752,7 @@
   }
 
   .aside .split-image .modal-img-link,
-  .aside.split .split-image img,
+  .aside.split .split-image img:not(.accessibility-control),
   .aside.split .split-image video {
     width: 50vw;
     position: absolute;

diff --git a/libs/blocks/carousel/carousel.js b/libs/blocks/carousel/carousel.js
@@ -1,5 +1,5 @@
 import { createTag, getConfig, MILO_EVENTS } from '../../utils/utils.js';
-import { decorateAnchorVideo } from '../../utils/decorate.js';
+import { decorateAnchorVideo, syncPausePlayIcon } from '../../utils/decorate.js';
 
 const { miloLibs, codeRoot } = getConfig();
 const base = miloLibs || codeRoot;
@@ -134,8 +134,9 @@ function jumpToDirection(activeSlideIndex, jumpToIndex, slideContainer) {
 function checkSlideForVideo(activeSlide) {
   const video = activeSlide.querySelector('video');
   /* c8 ignore start */
-  if (video?.played.length > 0) {
+  if (video?.played.length > 0 && !video?.paused) {
     video.pause();
+    syncPausePlayIcon(video);
   }
   /* c8 ignore end */
 }

diff --git a/libs/blocks/video/video.css b/libs/blocks/video/video.css
@@ -112,8 +112,11 @@ video {
   position: inherit;
 }
 
-:is(.video-container .pause-play-wrapper, .aside.split.split-left .split-image) img.accessibility-control {
-  width: auto;
+:is(.video-container .pause-play-wrapper, .aside.split.split-left .split-image) img.accessibility-control,
+.brick.split.row.media-right .foreground .brick-media img.accessibility-control {
+  width: inherit;
+  height: inherit;
+  margin: 0;
 }
 
 .video-container .pause-play-wrapper img.hidden {