Allow audio as last element

Is there any trick to allow audios as last elements via focus trap? I have a hard time to make it working and I still don’t know what I’m doing wrong.

Here is an example Sandbox https://codesandbox.io/s/affectionate-blackwell-o700p?file=/index.html

Scenario: Click on “enable trap” Try to tab something inside the audio control (volume bar or something) and modify it via keyboard.

Expected Behavior: you can change the volume

Actual Behavior: There is no way to tab to the volume bar.

Is there some tricky hacky way (even forking your lib) to make this working? I already use a custom version because you don’t support iFrames and I had to add it as a custom tabbable selector.

Thank you very much for your work. Beside that your Library is awesome

Edit: or at least an easy way in the plugin to change the focus to the first item, when you focus a “placeholder” item.

[idoros]

I added iFrame to the list

Doing that will stop on every iframe element regardless of its content because it is focusable, but not tabbable by default.

Is there any good known solution yet?

You can achieve the same result by adding tabindex=0 to the last/first iframe element (can be easily automated when running trap.activate()). Unfortunately that will add a step, focusing the iframe, in the tabbing process (same as result as adding the iframe to the list).

You should also know that none of these solutions is perfect, tabbing backwards (shift+tab) when the last element is an iframe will skip the iframe content and focus on the iframe itself, and the then another backwards tab will take you to the element before that iframe.

I had a project once in which I built special edge components that would be placed on the start and end of a popup and would inform the user that they are at the edge of a popup and would move the focus between them, or give the user the ability to normal tab into the browser interface. I don’t remember the product details, but that solution worked well for that product, and might not be suitable everywhere.

[Anubarak]

Thank you very much for your fast answers 😃

@Anubarak you say you needed to add a custom tabbable selector to the builtin list, may I ask which one?

I added iFrame to the list. It is the same issue mentioned above, but when I add iFrame I can navigate here https://codesandbox.io/s/blissful-proskuriakova-ivgp4?file=/index.html unfortunately I wasn’t able to just include the modified script in that demo, so this is with your original package.

After I added iFrame I can navigate in the youtube window with an active trap.

But we do support iframe elements, tabbing in and out of them: https://focus-trap.github.io/focus-trap/#demo-iframe

You are totally correct. Sorry about this one… This is again my fault v.v. It’s really only an issue when the iFrame is the last element (it is mentioned in the docs and instead of reading and understanding them properly I modified the source code and noticed it worked by adding iFrame). Sorry again for the trouble.

Is there any good known solution yet? I can think of adding a <div> at the end of each trap and add tabindex=0 to it in order to skip to the first element or the item before that div (depending if you go backward or forward) via onFocus event.

Again thank you for your incredible fast replies and sorry for not reading properly before creating this issue. I really love your library and it helped me a lot.