feat: allow setting a custom iframe title (#317)

This allows for better accessibility especially for screen readers.

See https://www.w3.org/TR/WCAG20-TECHS/H64.html.

Author: pcorpet

README.md

@@ -24,6 +24,7 @@ $ npm install react-youtube
   id={string}                       // defaults -> null
   className={string}                // defaults -> null
   containerClassName={string}       // defaults -> ''
+  title={string}                    // defaults -> null
   opts={obj}                        // defaults -> {}
   onReady={func}                    // defaults -> noop
   onPlay={func}                     // defaults -> noop

index.d.ts

@@ -37,6 +37,7 @@ export interface YouTubeProps {
   id?: string;
   className?: string;
   containerClassName?: string;
+  title?: string;
   loading?: 'lazy' | 'eager' | 'auto';
   opts?: Options;
   onReady?(event: { target: YouTubePlayer }): void;

src/YouTube.js

@@ -70,7 +70,8 @@ function shouldUpdatePlayer(prevProps, props) {
     prevProps.id !== props.id ||
     prevProps.className !== props.className ||
     prevProps.opts.width !== props.opts.width ||
-    prevProps.opts.height !== props.opts.height
+    prevProps.opts.height !== props.opts.height ||
+    prevProps.title !== props.title
   );
 }
 
@@ -226,6 +227,8 @@ class YouTube extends React.Component {
       else iframe.removeAttribute('width');
       if (this.props.opts && this.props.opts.height) iframe.setAttribute('height', this.props.opts.height);
       else iframe.removeAttribute('height');
+      if (typeof this.props.title === 'string') iframe.setAttribute('title', this.props.title);
+      else iframe.setAttribute('title', 'YouTube video player');
     });
   };
 
@@ -294,6 +297,8 @@ YouTube.propTypes = {
   className: PropTypes.string,
   // custom class name for player container element
   containerClassName: PropTypes.string,
+  // custom title for the iFrame, see https://www.w3.org/TR/WCAG20-TECHS/H64.html
+  title: PropTypes.string,
 
   // custom loading for player element
   loading: PropTypes.oneOf(['lazy', 'eager', 'auto']),
@@ -327,6 +332,7 @@ YouTube.defaultProps = {
   onStateChange: () => {},
   onPlaybackRateChange: () => {},
   onPlaybackQualityChange: () => {},
+  title: null,
 };
 
 export default YouTube;

src/Youtube.test.js

@@ -44,6 +44,22 @@ describe('YouTube', () => {
     expect(playerMock.getIframe).toHaveBeenCalled();
   });
 
+  it('should update the title when modified', () => {
+    const { rerender } = render(<YouTube title="Video about a cat" videoId="XxVg_s8xAms" />);
+
+    rerender(<YouTube title="Video about a dancing cat" videoId="XxVg_s8xAms" />);
+
+    expect(playerMock.getIframe).toHaveBeenCalled();
+  });
+
+  it('should update the title when removed', () => {
+    const { rerender } = render(<YouTube title="Video about a cat" videoId="XxVg_s8xAms" />);
+
+    rerender(<YouTube videoId="XxVg_s8xAms" />);
+
+    expect(playerMock.getIframe).toHaveBeenCalled();
+  });
+
   it('should not update id and className when no change in them', () => {
     const className = 'custom-class';
     const videoId = 'XxVg_s8xAms';