[VideoThumbnail] Call onBeforeStartPlaying onFocus for keyboard suppo…

…rtted video preloading

src/components/MediaCard/MediaCard.tsx

@@ -72,7 +72,10 @@ export function MediaCard({
           preferredAlignment="left"
           preferredPosition="below"
         >
-          <ActionList items={popoverActions} />
+          <ActionList
+            items={popoverActions}
+            onActionAnyItem={togglePopoverActive}
+          />
         </Popover>
       </div>
     ) : null;

src/components/MediaCard/README.md

@@ -230,7 +230,7 @@ Use when vertical screen space is not limited or when the video card is the page
 
 ## Related components
 
-- To create a card with a video placeholder, [use the video thumbnail component](https://polaris.shopify.com/components/images-and-icons/video-thumbnail)
+- To create a video card, [use the video thumbnail component](https://polaris.shopify.com/components/images-and-icons/video-thumbnail)
 - To group similar concepts and tasks together, [use the card component](https://polaris.shopify.com/components/structure/card)
 - To create page-level layout, [use the layout component](https://polaris.shopify.com/components/structure/layout)
 - To explain a feature that merchants haven’t tried yet, [use the empty state component](https://polaris.shopify.com/components/structure/empty-state)

src/components/MediaCard/tests/MediaCard.test.tsx

@@ -5,6 +5,7 @@ import {mountWithApp} from 'test-utilities';
 import {MediaCard} from '../MediaCard';
 
 const mockProps = {
+  children: <img alt="" />,
   title: 'test title',
   description: 'test description',
   primaryAction: {

src/components/VideoThumbnail/README.md

@@ -22,12 +22,12 @@ Video thumbnails are a clickable placeholder image. When clicked, it opens a vid
 
 Video thumbnails should:
 
-Be used with a media card
-Use an image that communicates the subject of the video
-Include a video timestamp
-Capture an image from the video to give a preview of the video content
-Be cropped to a 16:9 aspect ratio
-Be centered on the subject and avoid cropping of important details, like a person’s head
+- Be used with a media card
+- Use an image that communicates the subject of the video
+- Include a video timestamp
+- Capture an image from the video to give a preview of the video content
+- Be cropped to a 16:9 aspect ratio
+- Be centered on the subject and avoid cropping of important details, like a person’s head
 
 ---
 
@@ -58,7 +58,7 @@ Use as a play button for a video player within a media card.
 
 ## Required components
 
-- The video thumbnail should be wrapped in the [media card](https://polaris.shopify.com/components/structure/video-card) component.
+- The video thumbnail should be wrapped in the [media card](https://polaris.shopify.com/components/structure/media-card) component.
 
 ---
 
@@ -92,6 +92,6 @@ See Apple’s Human Interface Guidelines and API documentation about accessibili
 
 Images included in video thumbnails are implemented as decorative background images so that they’re skipped by screen readers.
 
-The play button is keyboard accessible and the `aria-label` includes a timestamp when the `videoLength` prop is set. For example, a video of length 80 is read as “Play video of length 1 minute and 20 seconds”. If no `videoLength` prop is provided, the default label reads “Play video”.
+The play button is keyboard accessible and the `aria-label` includes a timestamp when the `videoLength` prop is set. For example, an 80 second video reads as “Play video of length 1 minute and 20 seconds”. If no `videoLength` prop is provided, the default label reads “Play video”.
 
 <!-- /content-for -->

src/components/VideoThumbnail/VideoThumbnail.tsx

@@ -17,7 +17,7 @@ export interface VideoThumbnailProps {
   accessibilityLabel?: string;
   /** Callback on click or keypress of thumbnail. Use to trigger render of the video player in your chosen format, for example within a modal or fullscreen container. */
   onClick(): void;
-  /** Callback on mouse enter or touch start of thumbnail. Use to trigger video preload. */
+  /** Callback on mouse enter, focus, or touch start of thumbnail. Use to trigger video preload. */
   onBeforeStartPlaying?(): void;
 }
 
@@ -74,6 +74,7 @@ export const VideoThumbnail = ({
         className={styles.PlayButton}
         onClick={onClick}
         onMouseEnter={onBeforeStartPlaying}
+        onFocus={onBeforeStartPlaying}
         onTouchStart={onBeforeStartPlaying}
         aria-label={buttonLabel}
       >