Keyboard accessibility for Preview

[jamesball27]

Currently the Preview component only attaches an onClick handler and does not have a tabindex="0" attribute. This means that the video can only be played through a mouseclick event, and it is completely inaccessible from the keyboard when the light prop is enabled.

I've resorted to the following hacky workaround that manually calls the handleClickPreview method, but it would be nice to either include a keypress event by default or at the very least allow one to be passed into the Preview component's props.

interface Props {
  url: string;
}

interface ReactPlayerExtraProps {
  handleClickPreview: () => void;
}

const Video: React.FC<Props> = ({ url }) => {
  const playerRef = useRef<ReactPlayerExtraProps>(null);

  return (
    <div
      tabIndex={0}
      onKeyPress={e => {
        if (e.key === 'Enter' && playerRef.current) {
          playerRef.current.handleClickPreview();
        }
      }}
    >
      <ReactPlayer ref={playerRef} url={url} light />
    </div>
  );
}

Here's a codesandbox demonstrating the issue https://codesandbox.io/s/romantic-platform-hsger - you'll notice that you can't tab into the first player, but the second is accessible by keyboard.

[bweisberger]

The preview still has accessibility issues after this fix.

Pressing Enter or Space does now play the video, but the preview div is removed from the DOM after the video starts, so the user loses keyboard focus on the video element.

Because the Space Bar also causes the screen to scroll for easy navigation, this means pressing Space also causes the visible window to scroll down past the video, and in either case you'll need to tab back to the video to control it with the keyboard again after the preview disappears and the video starts.

[Toxicom]

@cookpete Looks like the issue @bweisberger described is still present - any information on this? Right now the player is not keyboard accessible.

[b-hexsoul]

I can't even tab back to video player. Big accessibility issue