diff --git a/src/components/MediaCard/MediaCard.tsx b/src/components/MediaCard/MediaCard.tsx
index b120802812b..58aaa99fbe7 100644
--- a/src/components/MediaCard/MediaCard.tsx
+++ b/src/components/MediaCard/MediaCard.tsx
@@ -72,7 +72,10 @@ export function MediaCard({
preferredAlignment="left"
preferredPosition="below"
>
-
+
) : null;
diff --git a/src/components/MediaCard/README.md b/src/components/MediaCard/README.md
index 2a9616c0543..c3dde95affa 100644
--- a/src/components/MediaCard/README.md
+++ b/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)
diff --git a/src/components/MediaCard/tests/MediaCard.test.tsx b/src/components/MediaCard/tests/MediaCard.test.tsx
index 77164681202..5487dc58c79 100644
--- a/src/components/MediaCard/tests/MediaCard.test.tsx
+++ b/src/components/MediaCard/tests/MediaCard.test.tsx
@@ -5,6 +5,7 @@ import {mountWithApp} from 'test-utilities';
import {MediaCard} from '../MediaCard';
const mockProps = {
+ children:
,
title: 'test title',
description: 'test description',
primaryAction: {
diff --git a/src/components/VideoThumbnail/README.md b/src/components/VideoThumbnail/README.md
index 4183f85ce6f..c25ff2a54bd 100644
--- a/src/components/VideoThumbnail/README.md
+++ b/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”.
diff --git a/src/components/VideoThumbnail/VideoThumbnail.tsx b/src/components/VideoThumbnail/VideoThumbnail.tsx
index 3cbc442b2e0..f9d0bac92d4 100644
--- a/src/components/VideoThumbnail/VideoThumbnail.tsx
+++ b/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}
>