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} >