sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.32k stars 2.92k forks source link

Nothing is focused when video is clicked (so keyboard don't work) #1311

Open levi0214 opened 5 years ago

levi0214 commented 5 years ago

Under the keyboard: {focused:true,global:false} setting, unless I click on the contents of the control bar, it will not focus, and the keyboard shortcut will not work.

But in most cases, users are just clicking on the video.

So I think maybe a better default setting is that when the user clicks the video, it focuses on the video.

For example, in my current situation, I have a lot of video players on one page (like Tumblr). I want to use keyboard to control "the last clicked video", but the current settings seem to be still not like this.

(Btw, I'm not sure whether it's a bug. In Safari on the Mac, no matter what I click (play button or progress bar), I can't focus on anything, and keyboard shortcuts don't work.)

levi0214 commented 5 years ago

I found this PR #1196 works well to me. So I build a version for myself.

Now I'm sure it's a bug (when I click the video, nothing is focused).

sampotts commented 5 years ago

Does the PR fix it for you? The reason the tab index was removed was due to accessibility concerns.

levi0214 commented 5 years ago

Yes, the PR fixed the problem.

sampotts commented 5 years ago

I'll add the tabindex back in on the container as that's all that's useful in the PR. A click on a focusable element will focus it by default so the event listener isn't needed.

kfeng0806 commented 5 years ago

Plyr.elements.container.tabIndex = 0; Can fix it

brennanyoung commented 4 years ago

This 'fix' seems kinda strange to me, because it entails putting tab-focusable content (i.e. the controls at the bottom) inside something which is itself tab-focusable (the video wrapper).

And there's an odd side effect: If you click (say) the CC or mute toggle, focus goes to the video, where it really ought to stay on the toggle.

Also - is this a Safari only issue? With the tabindex missing it works fine on other browsers - you can click on the video with the mouse, and then use SPACE to play/pause. I know that Safari doesn't really do keyboard focus on anything but button/input/a elements by default, unless you click a checkbox in the prefs.