[WC-2724] Add title property for video player (#1571)

Author: r0b1n

packages/pluggableWidgets/video-player-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- We improved accessibility by adding Title property for meaningful descriptions of embedded video content.
+
 ## [3.2.2] - 2023-09-27
 
 ### Fixed

packages/pluggableWidgets/video-player-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/video-player-web",
     "widgetName": "VideoPlayer",
-    "version": "3.2.2",
+    "version": "3.2.3",
     "description": "Player for YouTube, Dailymotion, Vimeo and Mp4 videos",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
@@ -43,9 +43,7 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
-        "@types/react-test-renderer": "^18.0.7",
-        "classnames": "^2.3.2",
-        "react-test-renderer": "^18.2.0"
+        "classnames": "^2.3.2"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",

packages/pluggableWidgets/video-player-web/src/VideoPlayer.tsx

@@ -13,6 +13,7 @@ export default class VideoPlayer extends Component<VideoPlayerContainerProps> {
         const url = useExpressionForLinks ? this.props.urlExpression?.value : this.props.videoUrl?.value;
         const poster = useExpressionForLinks ? this.props.posterExpression?.value : this.props.posterUrl?.value;
         const key = poster ? `${url}-${poster}` : url;
+        const title = this.props.iframeTitle?.value;
 
         return (
             <SizeContainer
@@ -35,6 +36,7 @@ export default class VideoPlayer extends Component<VideoPlayerContainerProps> {
                     muted={this.props.muted}
                     aspectRatio={this.props.heightUnit === "aspectRatio"}
                     preview={false}
+                    title={title}
                 />
             </SizeContainer>
         );

packages/pluggableWidgets/video-player-web/src/VideoPlayer.xml

@@ -40,6 +40,14 @@
                 <systemProperty key="TabIndex" />
             </propertyGroup>
         </propertyGroup>
+        <propertyGroup caption="Accessibility">
+            <propertyGroup caption="Accessibility">
+                <property key="iframeTitle" type="textTemplate" required="false">
+                    <caption>Title</caption>
+                    <description>Describe the purpose of the video (e.g., 'Video tutorial on accessibility').</description>
+                </property>
+            </propertyGroup>
+        </propertyGroup>
         <propertyGroup caption="Controls">
             <propertyGroup caption="Controls">
                 <property key="autoStart" type="boolean" defaultValue="false">

packages/pluggableWidgets/video-player-web/src/components/Dailymotion.tsx

@@ -7,6 +7,7 @@ export interface DailymotionProps {
     showControls: boolean;
     muted: boolean;
     aspectRatio?: boolean;
+    title?: string;
 }
 
 export class Dailymotion extends Component<DailymotionProps> {
@@ -20,6 +21,7 @@ export class Dailymotion extends Component<DailymotionProps> {
                 frameBorder="0"
                 allow="autoplay; fullscreen"
                 allowFullScreen
+                title={this.props.title}
             />
         );
     }

packages/pluggableWidgets/video-player-web/src/components/Html5.tsx

@@ -12,6 +12,7 @@ export interface Html5PlayerProps {
     style?: any;
     aspectRatio?: boolean;
     preview: boolean;
+    title?: string;
 }
 
 export class Html5 extends Component<Html5PlayerProps> {
@@ -57,6 +58,7 @@ export class Html5 extends Component<Html5PlayerProps> {
                     ref={this.videoElement}
                     height={!this.props.aspectRatio ? "100%" : undefined}
                     preload={this.props.poster ? "metadata" : "auto"}
+                    title={this.props.title}
                 >
                     {!this.props.preview ? (
                         <source

packages/pluggableWidgets/video-player-web/src/components/Video.tsx

@@ -16,6 +16,8 @@ export interface VideoPlayerProps {
     muted: boolean;
     aspectRatio: boolean;
 
+    title?: string;
+
     preview: boolean;
 }
 
@@ -48,6 +50,7 @@ export class Video extends Component<VideoPlayerProps> {
                 url={url}
                 aspectRatio={this.props.aspectRatio}
                 preview={this.props.preview}
+                title={this.props.title}
             />
         );
     }
@@ -61,6 +64,7 @@ export class Video extends Component<VideoPlayerProps> {
                 muted={this.props.muted}
                 loop={this.props.loop}
                 aspectRatio={this.props.aspectRatio}
+                title={this.props.title}
             />
         );
     }
@@ -73,6 +77,7 @@ export class Video extends Component<VideoPlayerProps> {
                 muted={this.props.muted}
                 loop={this.props.loop}
                 aspectRatio={this.props.aspectRatio}
+                title={this.props.title}
             />
         );
     }
@@ -85,6 +90,7 @@ export class Video extends Component<VideoPlayerProps> {
                 muted={this.props.muted}
                 showControls={this.props.showControls}
                 aspectRatio={this.props.aspectRatio}
+                title={this.props.title}
             />
         );
     }

packages/pluggableWidgets/video-player-web/src/components/Vimeo.tsx

@@ -7,6 +7,7 @@ export interface VimeoProps {
     loop: boolean;
     muted: boolean;
     aspectRatio?: boolean;
+    title?: string;
 }
 
 export class Vimeo extends Component<VimeoProps> {
@@ -20,6 +21,7 @@ export class Vimeo extends Component<VimeoProps> {
                 frameBorder="0"
                 allow="autoplay; fullscreen"
                 allowFullScreen
+                title={this.props.title}
             />
         );
     }

packages/pluggableWidgets/video-player-web/src/components/Youtube.tsx

@@ -8,6 +8,7 @@ export interface YoutubeProps {
     loop: boolean;
     muted: boolean;
     aspectRatio?: boolean;
+    title?: string;
 }
 
 export class Youtube extends Component<YoutubeProps> {
@@ -21,6 +22,7 @@ export class Youtube extends Component<YoutubeProps> {
                 frameBorder="0"
                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
+                title={this.props.title}
             />
         );
     }

packages/pluggableWidgets/video-player-web/src/components/__tests__/Dailymotion.spec.tsx

@@ -1,5 +1,5 @@
 import { createElement, ReactElement } from "react";
-import { create } from "react-test-renderer";
+import { render } from "@testing-library/react";
 
 import { Dailymotion, DailymotionProps } from "../Dailymotion";
 
@@ -14,27 +14,28 @@ describe("Dailymotion Player", () => {
 
     const defaulPlayer = (props: DailymotionProps): ReactElement => <Dailymotion {...props} />;
 
-    it("should renders correctly", () => {
-        const player = create(defaulPlayer(defaultProps)).toJSON();
-
-        expect(player).toMatchSnapshot();
+    it("should render correctly", () => {
+        const { asFragment } = render(defaulPlayer(defaultProps));
+        expect(asFragment()).toMatchSnapshot();
     });
 
-    it("should renders correctly with autoplay", () => {
-        const player = create(defaulPlayer({ ...defaultProps, autoPlay: true })).toJSON();
-
-        expect(player).toMatchSnapshot();
+    it("should render correctly with autoplay", () => {
+        const { asFragment } = render(defaulPlayer({ ...defaultProps, autoPlay: true }));
+        expect(asFragment()).toMatchSnapshot();
     });
 
-    it("should renders correctly with muted", () => {
-        const player = create(defaulPlayer({ ...defaultProps, muted: true })).toJSON();
-
-        expect(player).toMatchSnapshot();
+    it("should render correctly with muted", () => {
+        const { asFragment } = render(defaulPlayer({ ...defaultProps, muted: true }));
+        expect(asFragment()).toMatchSnapshot();
     });
 
-    it("should renders correctly with controls", () => {
-        const player = create(defaulPlayer({ ...defaultProps, showControls: true })).toJSON();
+    it("should render correctly with controls", () => {
+        const { asFragment } = render(defaulPlayer({ ...defaultProps, showControls: true }));
+        expect(asFragment()).toMatchSnapshot();
+    });
 
-        expect(player).toMatchSnapshot();
+    it("should render correctly with title", () => {
+        const { asFragment } = render(defaulPlayer({ ...defaultProps, title: "Sample Video Title" }));
+        expect(asFragment()).toMatchSnapshot();
     });
 });