Feat(MWPW-146367):Added accessibility player controls (NON MPC)

libs/blocks/adobetv/adobetv.css

@@ -1,4 +1,5 @@
 @import url('../../styles/iframe.css');
+@import url('../video/video.css');
 
 a[href*='.mp4'].hide-video {
   visibility: hidden !important;

libs/blocks/aside/aside.css

@@ -298,6 +298,7 @@
 }
 
 .aside.rounded-corners .foreground .image img,
+.aside.rounded-corners .foreground .image:not(:has(.video-container)) .pause-play-wrapper,
 .aside.rounded-corners .foreground .image video {
   border-radius: 16px;
 }
@@ -1074,6 +1075,10 @@
     max-width: 1396px;
   }
 
+  .aside.split .video-container .pause-play-wrapper img.accessibility-control {
+    width: auto;
+  }
+
   .aside.split .desktop-wide img,
   .aside.split .desktop-wide video {
     aspect-ratio: var(--aspect-ratio-wide);

libs/blocks/aside/aside.js

@@ -197,7 +197,7 @@ function decorateLayout(el) {
   }
   const foregroundImage = foreground.querySelector(':scope > div:not(.text) img')?.closest('div');
   const bgImage = el.querySelector(':scope > div:not(.text):not(.foreground) img')?.closest('div');
-  const foregroundMedia = foreground.querySelector(':scope > div:not(.text) video, :scope > div:not(.text) a:is([href*=".mp4"], [href*="tv.adobe.com"])')?.closest('div');
+  const foregroundMedia = foreground.querySelector(':scope > div:not(.text) .video-container,:scope > div:not(.text) video, :scope > div:not(.text) a:is([href*=".mp4"], [href*="tv.adobe.com"])')?.closest('div:not(.video-container)');
   const bgMedia = el.querySelector(':scope > div:not(.text):not(.foreground) video, :scope > div:not(.text):not(.foreground) a:is([href*=".mp4"], [href*="tv.adobe.com"])')?.closest('div');
   const image = foregroundImage ?? bgImage;
   const asideMedia = foregroundMedia ?? bgMedia ?? image;

libs/blocks/brick/brick.css

@@ -98,6 +98,10 @@
   margin: 0;
 }
 
+.brick .foreground div > .video-container {
+  margin: 0;
+}
+
 .brick .foreground div > * {
   margin-top: var(--spacing-xs);
 }
@@ -342,6 +346,12 @@
     position: absolute;
   }
 
+  .brick.split.row .foreground .brick-media .video-container img,
+  .brick.split.row .foreground .brick-media .video-container video {
+    width: 100%;
+    height: 100%;
+  }
+
   .brick .foreground .brick-media video,
   .brick.split.row .foreground .brick-media video {
     object-fit: fill;

libs/blocks/carousel/carousel.js

@@ -156,7 +156,7 @@ function moveSlides(event, carouselElements, jumpToIndex) {
   referenceSlide.classList.remove('reference-slide');
   referenceSlide.style.order = null;
   activeSlide.classList.remove('active');
-  activeSlide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', -1); });
+  activeSlide.querySelectorAll('a,video').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', -1); });
   activeSlideIndicator.classList.remove('active');
   activeSlideIndicator.setAttribute('tabindex', -1);
 
@@ -218,10 +218,10 @@ function moveSlides(event, carouselElements, jumpToIndex) {
       if (index < show) {
         tabIndex = 0;
       }
-      slide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', tabIndex); });
+      slide.querySelectorAll('a,:not(.video-container,.pause-play-wrapper) > video').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', tabIndex); });
     });
   } else {
-    activeSlide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', 0); });
+    activeSlide.querySelectorAll('a,:not(.video-container,.pause-play-wrapper) > video').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', 0); });
   }
   activeSlideIndicator.classList.add('active');
   activeSlideIndicator.setAttribute('tabindex', 0);

libs/blocks/figure/figure.css

@@ -69,6 +69,7 @@
   .figure .figure {
     margin: 0 auto;
     max-width: 800px;
+    width: fit-content;
   }
 
   .figure-list {

libs/blocks/figure/figure.js

@@ -1,4 +1,4 @@
-import { applyHoverPlay, decorateAnchorVideo } from '../../utils/decorate.js';
+import { applyHoverPlay, decorateAnchorVideo, applyAccessibiltyEvents } from '../../utils/decorate.js';
 import { createTag } from '../../utils/utils.js';
 
 function buildCaption(pEl) {
@@ -21,6 +21,7 @@ function decorateVideo(clone, figEl) {
   if (anchorTag && !anchorTag.hash) anchorTag.hash = '#autoplay';
   if (anchorTag) decorateAnchorVideo({ src: anchorTag.href, anchorTag });
   if (videoTag) {
+    const videoContainer = clone.querySelector('.video-container') || clone.querySelector('.pause-play-wrapper') || clone.querySelector('video');
     videoTag.removeAttribute('data-mouseevent');
     if (videoTag.dataset?.videoSource) {
       videoTag.appendChild(
@@ -31,7 +32,8 @@ function decorateVideo(clone, figEl) {
       );
     }
     applyHoverPlay(videoTag);
-    figEl.prepend(videoTag);
+    applyAccessibiltyEvents(videoTag);
+    figEl.prepend(videoContainer);
   }
 }
 
@@ -68,7 +70,7 @@ export function buildFigure(blockEl) {
       const link = clone.querySelector('a');
       if (link) {
         const img = figEl.querySelector('picture') || figEl.querySelector('video');
-        if (img) {
+        if (img && !link.classList.contains('pause-play-wrapper')) {
           // wrap picture or video in A tag
           link.textContent = '';
           link.append(img);

libs/blocks/hero-marquee/hero-marquee.js

@@ -183,7 +183,7 @@ export default async function init(el) {
   foreground.classList.add('foreground', `cols-${fRows.length}`);
   let copy = fRows[0];
   const anyTag = foreground.querySelector('p, h1, h2, h3, h4, h5, h6');
-  const asset = foreground.querySelector('div > picture, div > video, div > a[href*=".mp4"], div > a.image-link');
+  const asset = foreground.querySelector('div > picture,div > .video-container,div > .pause-play-wrapper, div > video, div > a[href*=".mp4"], div > a.image-link');
   const allRows = foreground.querySelectorAll('div > div');
   copy = anyTag.closest('div');
   copy.classList.add('copy');

libs/blocks/marquee/marquee.js

@@ -88,7 +88,7 @@ function decorateSplit(el, foreground, media) {
 
   let mediaCreditInner;
   const txtContent = media?.lastChild?.textContent?.trim();
-  if (txtContent?.match(/^http.*\.mp4/) || media?.lastChild?.tagName === 'VIDEO') return;
+  if (txtContent?.match(/^http.*\.mp4/) || media.querySelector('video')) return;
   if (txtContent) {
     mediaCreditInner = createTag('p', { class: 'body-s' }, txtContent);
   } else if (media.lastElementChild?.tagName !== 'PICTURE') {

libs/blocks/video/video.css

@@ -6,3 +6,98 @@ video {
   max-width: 100%;
   height: auto;
 }
+
+
+.pause-play-wrapper img {
+  min-height:40px !important;
+}
+
+.video-container{
+  display: flex;
+  position: relative;
+  height:100%;
+  width: fit-content;
+  margin: auto;
+}
+
+.aside .video-container,.marquee .video-container,.quiz-marquee .video-container {
+  width: auto;
+}
+
+.brick-media .video-container {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+
+.pause-play-wrapper {
+  display: flex;
+  width: fit-content;
+  margin: auto;
+}
+
+.video-container .pause-play-wrapper {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  position: absolute;
+  right: 2%;
+  bottom: 2%;
+  margin: 0;
+  background:#242424;
+  border-radius: 50%;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.video-container .pause-play-wrapper:hover {
+  background:#0000;
+}
+
+.video-container .pause-play-wrapper:focus-visible {
+  background:#0000;
+  border: 3px solid var(--color-white);
+  outline: var(--color-accent-focus-ring) solid 2px;
+}
+
+.editorial-card .video-container,
+.editorial-card:not(:has(.video-container)) .pause-play-wrapper,
+.hero-marquee:not(:has(.video-container)) .pause-play-wrapper,
+.marquee.split:not(:has(.video-container)) .pause-play-wrapper {
+  width: auto;
+  height: 100%;
+}
+
+.brick .brick-media:not(:has(.video-container)) .pause-play-wrapper {
+  border-radius: 0;
+  border-top-right-radius: inherit;
+  border-bottom-right-radius: inherit;
+  width: auto;
+  height: 100%;
+  margin: 0;
+}
+
+.hero-marquee .background .video-container {
+  position: inherit;
+}
+
+.video-container .pause-play-wrapper img.accessibility-control {
+  width: auto;
+}
+
+.video-container .pause-play-wrapper img.hidden{
+  display: none;
+}
+
+.marquee .background .video-container {
+  display: contents;
+}
+
+@media (min-width: 900px) {
+.media:not(.media-reverse-mobile, .media-reversed) .pause-play-wrapper,
+.aside:not(.split-left) .pause-play-wrapper,
+.hero-marquee.asset-left .pause-play-wrapper {
+  left: 2%;
+}
+}

libs/utils/decorate.js

@@ -228,12 +228,73 @@
   return `${globalAttrs} controls`;
 }
 
+export function syncPausePlayIcon(video) {
+  const playIcon = video.nextElementSibling?.querySelector('.play-icon');
+  const pauseIcon = video.nextElementSibling?.querySelector('.pause-icon');
+  if (video.paused || video.ended) {
+    playIcon?.classList.remove('hidden');
+    pauseIcon?.classList.add('hidden');
+  } else {
+    pauseIcon?.classList.remove('hidden');
+    playIcon?.classList.add('hidden');
+  }
+}
+
+export function addAccessibilityControl(videoString, videoAttributes, tabIndex = 0) {
+  if (!videoAttributes.includes('controls')) {
+    if (videoAttributes.includes('hoverplay')) {
+      return `<a class='pause-play-wrapper' tabindex=${tabIndex} alt='play/pause motion' aria-label='play/pause motion' >${videoString}
+    </a>`;
+    }
+    return `<div class='video-container'>${videoString}
+  <a class='pause-play-wrapper' role='button' tabindex=${tabIndex} alt='play/pause motion' aria-label='play/pause motion'>
+    <img class='accessibility-control pause-icon ${videoAttributes.includes('autoplay') ? '' : 'hidden'}' alt='pause icon' src='https://main--federal--adobecom.hlx.page/federal/assets/svgs/accessibility-pause.svg'/>
+    <img class='accessibility-control play-icon ${videoAttributes.includes('autoplay') ? 'hidden' : ''}' alt='play icon' src='https://main--federal--adobecom.hlx.page/federal/assets/svgs/accessibility-play.svg'/>
+  </a>
+  </div>`;
+  }
+  return videoString;
+}
+
+export function handlePause(event) {
+  event.stopPropagation();
+  if (event.code !== 'Enter' && event.code !== 'Space' && !['focus', 'click', 'blur'].includes(event.type)) {
+    return;
+  }
+  event.preventDefault();
+  const video = event.target.parentElement.parentElement.querySelector('video');
+  if (event.type === 'blur') {
+    video.pause();
+  } else if (video.paused || video.ended || event.type === 'focus') {
+    video.play();
+  } else {
+    video.pause();
+  }
+  syncPausePlayIcon(video);
+}
+
 export function applyHoverPlay(video) {
   if (!video) return;
-  if (video.hasAttribute('data-hoverplay') && !video.hasAttribute('data-mouseevent')) {
-    video.addEventListener('mouseenter', () => { video.play(); });
-    video.addEventListener('mouseleave', () => { video.pause(); });
-    video.setAttribute('data-mouseevent', true);
+  if (video.hasAttribute('data-hoverplay')) {
+    video.parentElement.addEventListener('focus', handlePause);
+    video.parentElement.addEventListener('blur', handlePause);
+    if (!video.hasAttribute('data-mouseevent')) {
+      video.addEventListener('mouseenter', () => { video.play(); });
+      video.addEventListener('mouseleave', () => { video.pause(); });
+      video.addEventListener('ended', () => { syncPausePlayIcon(video); });
+      video.setAttribute('data-mouseevent', true);
+    }
+  }
+}
+
+export function applyAccessibiltyEvents(videoEl) {
+  const pausePlayWrapper = videoEl.parentElement.querySelector('.pause-play-wrapper') || videoEl.closest('.pause-play-wrapper');
+  if (pausePlayWrapper?.querySelector('.accessibility-control')) {
+    pausePlayWrapper?.addEventListener('click', handlePause);
+    pausePlayWrapper?.addEventListener('keydown', handlePause);
+  }
+  if (videoEl.hasAttribute('autoplay')) {
+    videoEl.addEventListener('ended', () => { syncPausePlayIcon(videoEl); });
   }
 }
 
@@ -269,7 +330,7 @@
         const isHaveLoopAttr = video.getAttributeNames().includes('loop');
         const { playedOnce = false } = video.dataset;
         const isPlaying = video.currentTime > 0 && !video.paused && !video.ended
-        && video.readyState > video.HAVE_CURRENT_DATA;
+          && video.readyState > video.HAVE_CURRENT_DATA;
 
         if (intersectionRatio <= 0.8) {
           video.pause();
@@ -325,11 +386,27 @@
   }
 }
 
+export function isAccessible(anchorTag) {
+  const section = anchorTag.closest('div[class="section"]');
+  if (section) {
+    const [block] = Array.from(section.children).filter((element) => element.contains(anchorTag));
+    return !block.classList.contains('hide-controls');
+  }
+  return true;
+}
+
 export function decorateAnchorVideo({ src = '', anchorTag }) {
   if (!src.length || !(anchorTag instanceof HTMLElement)) return;
   if (anchorTag.closest('.marquee, .aside, .hero-marquee, .quiz-marquee') && !anchorTag.hash) anchorTag.hash = '#autoplay';
+  const accessibilityEnabled = isAccessible(anchorTag);
   const { dataset, parentElement } = anchorTag;
-  const video = `<video ${getVideoAttrs(anchorTag.hash, dataset)} data-video-source=${src}></video>`;
+  const attrs = getVideoAttrs(anchorTag.hash, dataset);
+  const tabIndex = anchorTag.tabIndex || 0;
+  const videoIndex = (tabIndex === -1) ? 'tabindex=-1' : '';
+  let video = `<video ${attrs} data-video-source=${src} ${videoIndex}></video>`;
+  if (accessibilityEnabled) {
+    video = addAccessibilityControl(video, attrs, tabIndex);
+  }
   anchorTag.insertAdjacentHTML('afterend', video);
   const videoEl = parentElement.querySelector('video');
   createIntersectionObserver({
@@ -339,6 +416,7 @@
       videoEl?.appendChild(createTag('source', { src, type: 'video/mp4' }));
     },
   });
+  if (accessibilityEnabled) applyAccessibiltyEvents(videoEl);
   applyHoverPlay(videoEl);
   applyInViewPortPlay(videoEl);
   anchorTag.remove();