Video with Lightbox enabled is not accessible

Hi there,

Thanks for contacting us and hope you are doing well and having a great day.

To rule out the possibility of a plugin or theme conflict, please deactivate all your plugins (besides Elementor and Elementor Pro). If it solves the issue reactivate them one by one to find the culprit. If it didn’t help, switch your theme (temporarily) to a default WP theme such as Twenty Nineteen and see if it makes any difference.

Also, this could happen due to our Elementor performance experiments you can try to deactivate them. To deactivate them you can go to Elementor > settings > features

Performance features currently in the experimental stage are:

• Element Caching – Elements caching reduces loading times by serving up a copy of an element instead of rendering it fresh every time the page is loaded. When active, Elementor will determine which elements can benefit from static loading – but you can override this.
• Inline Font Icons?– This experiment renders icons as SVGs without loading the Font-Awesome and eicons libraries. Since SVGs are vector-based images which are rendered using the browser’s engine, they do not increase server requests which improves performance

I am looking forward to hearing back from you soon.

Kind regards,

Due to inactivity, this ticket has been closed.

Hi (:

I first have a small correction to my initial ticket:
When I wrote: “I have an issue in which a Video widget has Lightbox enabled, and when I TAB to it (so the Play button gets focus) and then press Enter/Space key, it doesn’t start playing.“, instead of “it doesn’t start playing” it should have been “the lightbox is not being open“.

Well, I did a conflict test and deactivated all plugins, but the issue still occurred, so it was not a plugin conflict. I then reviewed my custom jQuery code in child theme’s functions.php and saw I’ve previously added some code to make all buttons accessible, like this:

// Add keyboard support for all buttons, so they react to both Enter & Space keys:
$('*[role=button]').keydown(function (e) {
    if ((e.key == 'Enter') || (e.key == ' ')) {
	e.preventDefault();
  	setTimeout(function () {
	    $(this).click();
	}, 300);
    }
});

// Some more code here to fix focus handling on Click event...

When I changed it like so (i.e. added the if statement below) the issue was fixed:

// Add keyboard support for all buttons, so they react to both Enter & Space keys:
$('*[role=button]').keydown(function (e) {
    if ((e.key == 'Enter') || (e.key == ' ')) {
        e.preventDefault();

	if ($(this).hasClass('elementor-custom-embed-play') &&
            $(this).closest('.elementor-wrapper').hasClass('elementor-open-lightbox')) {
                let current_button = $(this);
                setTimeout(function () {
                   current_button.click();
                }, 300);
	}
	else {
	    setTimeout(function () {
	        $(this).click();
	    }, 300);
	}
    }
});

// Some more code here to fix focus handling on Click event...

I hope it helps someone.

• This reply was modified 43 minutes ago by thwp.