Adds previewTabIndex property to light mode (#1169)

Co-authored-by: failcake <failcake.work@gmail.com>

README.md

@@ -96,6 +96,7 @@ Prop | Description | Default
 `fallback` | Element or component to use as a fallback if you are using lazy loading | `null`
 `wrapper` | Element or component to use as the container element | `div`
 `playIcon` | Element or component to use as the play icon in light mode
+`previewTabIndex` | Set the tab index to be used on light mode | 0
 `config` | Override options for the various players, see [config prop](#config-prop)
 
 #### Callback props

src/Preview.js

@@ -54,7 +54,7 @@ export default class Preview extends Component {
   }
 
   render () {
-    const { onClick, playIcon } = this.props
+    const { onClick, playIcon, previewTabIndex } = this.props
     const { image } = this.state
     const flexCenter = {
       display: 'flex',
@@ -95,7 +95,7 @@ export default class Preview extends Component {
         style={styles.preview}
         className='react-player__preview'
         onClick={onClick}
-        tabIndex={0}
+        tabIndex={previewTabIndex}
         onKeyPress={this.handleKeyPress}
       >
         {playIcon || defaultPlayIcon}

src/ReactPlayer.js

@@ -134,12 +134,13 @@ export const createReactPlayer = (players, fallback) => {
 
     renderPreview (url) {
       if (!url) return null
-      const { light, playIcon } = this.props
+      const { light, playIcon, previewTabIndex } = this.props
       return (
         <Preview
           url={url}
           light={light}
           playIcon={playIcon}
+          previewTabIndex={previewTabIndex}
           onClick={this.handleClickPreview}
         />
       )

src/props.js

@@ -19,6 +19,7 @@ export const propTypes = {
   stopOnUnmount: bool,
   light: oneOfType([bool, string]),
   playIcon: node,
+  previewTabIndex: number,
   fallback: node,
   wrapper: oneOfType([
     string,
@@ -110,6 +111,7 @@ export const defaultProps = {
   light: false,
   fallback: null,
   wrapper: 'div',
+  previewTabIndex: 0,
   config: {
     soundcloud: {
       options: {

types/base.d.ts

@@ -20,6 +20,7 @@ export interface BaseReactPlayerProps {
   progressInterval?: number
   playsinline?: boolean
   playIcon?: ReactElement
+  previewTabIndex?: number
   pip?: boolean
   stopOnUnmount?: boolean
   light?: boolean | string