Open levi0214 opened 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).
Does the PR fix it for you? The reason the tab index was removed was due to accessibility concerns.
Yes, the PR fixed the problem.
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.
Plyr.elements.container.tabIndex = 0;
Can fix it
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.
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.)