tabindex being forced set to -1 for all videos, violates 508 accessibility: WCAG 2.4.3 - Focus Order

[svnah0724]

Description

need to disable the removal of tabindex from the videos, that i have painstakingly written code to set dynamically for over 450 elements on one page, after the document is loaded. this is affecting tab order of a page with several video mp4's, a table of contents with links to each mp4 (which are basically turning on/off visibility for each "slide"), a section for descriptive transcripts that is separate from closed captioning for each mp4, and the separate playbars for each video. i have tracked down the code logic break to the video being set to "tabindex: -1", which is causing the backtab to go to the top of the table of contents from the video, instead of back to the correlating location in the ToC. the break in tabbing is a violation of 508 (WCAG 2.4.3 Focus Order) protocols. everything has to have "logical to accessibility" tab functionality AND readable labels/titles by a screenreader. there can be NO EXCEPTIONS.

soooo... how do i disable the tabindex being force set to -1, that is overriding my dynamic tabindexing after the document is loaded?

Reduced test case

https://fedlinks-demo-jagglobal.tiiny.site/

Steps to reproduce

1. load page
2. tab to ToC list item, then use arrow keys to get past first element to see the issue
3. hit enter - corresponding slide turned "on" and focus goes to the big play button
4. backtab

focus lands on the 0th element of the ToC, instead of current slide element displayed

Errors

console shows curractv which is my tracking variable for which slide is "active".

(editing to show console on live website, not from preview mode on local)

What version of Video.js are you using?

https://vjs.zencdn.net/7.18.1/video.min.js

Video.js plugins used.

https://vjs.zencdn.net/7.18.1/video.min.js

What browser(s) including version(s) does this occur with?

FF and Chrome

What OS(es) and version(s) does this occur with?

windows 10

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[OwenEdwards]

The <video> element itself has tabindex set to -1, and so does the <div> that video.js insets the wraps the player in, but the controls inside the video.js video (which is only the "big play button" before the video has been played) is/are still focusable. Having the button focusable rather than the <video> element or the surrounding <div> is preferred because it is clear to a screen reader user how to activate a (play) button, whereas it isn't obvious how to interact with the <video> element the custom player in the <div>.

Having the big play button serve as the one focusable element of the player (before playback) rather than the <video> or player <div> should not affect the tab order of a correctly constructed page, and does not violate WCAG SC 2.4.3. If you're having to set the tab order manually for hundreds of videos rather than relying on the natural order in the DOM, you may need to redesign your page. You could, of course, use a jQuery selector to select each <button class="vjs-big-play-button"> element inside each player to apply the tabindex value to, if you absolutely have to do it that way.

[svnah0724]

I have tried setting tabIndex to the big play button - same thing happens. The listener never triggers, nor does the console message at said trigger:

bigplaybttn.forEach(function (vid) {

	vid.addEventListener('keyup', function (e) {
	window.console.info('video array keypress event triggered - current menu item at current video is ' + curractv + ' and video tabindex is ' + 	bigplaybttn[curractv].tabIndex);
        if (e.key === 'Tab' && e.shiftKey) {
			e.stopPropagation();
			e.preventDefault();
			
			//go back to table of contents active item
			//toggleTabs("click", 'toc_tab');
			menuTOC[curractv].focus();
        }
    });
});