Hi @hage,
I’m having issues reproducing the problem.
What do you mean by “when the page is reloaded”? Do you mean that you always enable YouTube and then reload the page? By itself, Embed Privacy does never reload the page.
I tried the following:
- Confirmed that the “skip to content” link on your mentioned page works.
- Navigated to the YouTube video and pressed the space bar when the checkbox input was active to always enable YouTube embeds.
- Went back via keyboard to the “skip to content” link without a problem.
Also after reloading, there was no issue at all.
In fact, I don’t believe that this issue even comes from Embed Privacy. In my code, I do nothing with any tabindex attribute.
Best regards,
Matthias
Hi @kittmedia
thanks a lot for answer.
May be the following video will clarify the issue: Video with issue
I also checked this behaviour when activating the Real Cookie Banner plugin. It works there.
But I would rather use Embed Privacy for this project. 😉
Best Regards,
Hans-Gerd
For further information: After activating the ‘Always display YouTube content’ checkbox, refreshing the website and pressing the Tab key, the video opens immediately.
The same thing happens when I click on another page in the menu, then return to the main page and press the Tab key there.
What I assume from the video (since I cannot see the keyboard presses or mouse clicks), is that after always enabling YouTube, you click on the header and try to navigate inside the header with the keyboard, but instead you end up within the first link in the content being focussed.
This is due to an issue with focus handling of iframes. It survives the focus even if you click on a different element once. It needs a second click to remove the focus from the iframe.
You can test it yourself:
- Always enable YouTube.
- Reload the page.
- Open the browser console and execute the following:
document.querySelector( 'iframe' ).focus();
This focuses the first YouTube iframe on the page.
- Verify with this command on the browser console:
console.log( document.activeElement );
You will see the YouTube iframe element in the console.
- Now, click somewhere else on the page (not on a link, just a plain area).
- Use the command
console.log( document.activeElement ); in the browser console again.
You will see the YouTube iframe again, which is the issue here.
- Click again somewhere else.
- Use the command
console.log( document.activeElement ); in the browser console again.
You will see a different element here, probably the body.
Since this can be reproduced with any type of iframe, I guess there is nothing I can do, here.
The thing is, that there are two contexts here: one of your web page, which has the focus on the iframe, and one of the iframe itself, which has the focus on its first focusable element. Clicking outside of the iframe first only removes the focus inside the iframe, but keeps the current focus if the web page intact, which is still the iframe. Thus, it requires a second click to actually change the focus to a different element.
You can also verify that there is no tabindex issue by using SHIFT + Tab until you reach the “skip to content” link, which itself still works as intended.
Hi @kittmedia
Thank you very much for the detailed explanation. I was able to reproduce the issue using the commands you mentioned.
What I assume from the video (since I cannot see the keyboard presses or mouse clicks), is that after always enabling YouTube, you click on the header and try to navigate inside the header with the keyboard, but instead you end up within the first link in the content being focussed.
It is indeed so that after confirming the “Always display YouTube content” checkbox, I performed the following steps:
- Click on a menu item, e.g. “Category Classic”
- Click on the main page
- Click on the tab key: And instead of the expected “Skip to content”, the jump to the YouTube video occurs immediately.
I just thought that there might be a solution after all, because the behaviour is as desired when I use the Real Cookie Banner plugin.
Thanks again.
Best Regards,
Hans-Gerd
Ah, I see the other issue. That comes from initializing all always active embeds on page load. This is fixable. 🙂
Oh, that would be fantastic. 🎉
I released version 1.12.2 containing the fix. 🙂
wow – great. 💪🏻
I will check the new version tomorrow.
I couldn’t wait, so I just tested it briefly. 😉
And it works fine. Congratulation 🎉
