WIP: Video-Element not Accessible inside Popup

Bugs
1

The Video-Element, when inside a Popup, is not keyboard accessible.
It is not being included when the Focus-Trap is created.
Adding it to the list of focusableElements inside frontend.js line 9892 (or rather bricks.min.js) fixes the problem.
‘a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=“-1”])’ →
‘a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=“-1”]), video’

I noticed this bug in the new beta, but i would guess it’s also in the current stable version.

This is a temporary fix, for anyone who wants a quick hotfix:

add_filter('bricks/element/render_attributes', function ($attributes, $key, $element) {
    if ($element->name !== 'video') return $attributes;

    if ($key !== 'video') return $attributes;

    $attributes[$key]['tabindex'] = '0';

    return $attributes;
}, 10, 3);
2

Hey @UserfreundSuat,

can you export your Popup template? Because I tested with popup like this:

CleanShot 2025-06-12 at 13.04.27@2x
CleanShot 2025-06-12 at 13.04.27@2x1920×1385 104 KB

And I was able to get to the video with a keyboard?

Thanks,
Matej

3

So I guess it is more complicated then I previously stated. There is a differnce between the YouTube Implementation since it is an iframe and when media is selected as a source. My solution only helps for the Media-approach.

I can get it to break with both though…

Not sure how i can upload a template here so, i just post it as template-code below.
There is a Button called “DELETE ME” inside my template.
Whenever there is a interactable Element after the Video-Element it works fine. After you delete said button, it will only focus on the first Button (which holds an x-Icon and closes the popup).

Put the Video below/behind the “DELETE ME”-Button and It’s broken aswell.

{
  "id": 889,
  "name": "popup-example",
  "title": "Popup Example",
  "date": "2025-06-12 14:21:05",
  "date_formatted": "12. June 2025",
  "author": {
    "name": "su@tmin",
    "avatar": "https://secure.gravatar.com/avatar/60145a0752ecd137425182f2352b01707eff338a6a3548d2c1cdbc00e688991b?s=60&d=mm&r=g",
    "url": "http://sk-koenigsbruegge.local"
  },
  "permalink": "https://sk-koenigsbruegge.local/template/popup-example/",
  "thumbnail": "https://sk-koenigsbruegge.local/wp-content/uploads/bricks/template-screenshots/template-screenshot-889-1749731354.webp",
  "bundles": [],
  "tags": [],
  "type": "popup",
  "content": [
    {
      "id": "cgaweb",
      "name": "icon",
      "parent": "uphrns",
      "children": [],
      "settings": {
        "icon": { "library": "themify", "icon": "ti-close" },
        "iconSize": "2em"
      }
    },
    {
      "id": "jxgrrm",
      "name": "heading",
      "parent": "xulsik",
      "children": [],
      "settings": { "text": "Title" }
    },
    {
      "id": "xulsik",
      "name": "block",
      "parent": 0,
      "children": ["jxgrrm", "uphrns"],
      "settings": {
        "_direction": "row",
        "_justifyContent": "space-between",
        "_alignItems": "flex-start"
      }
    },
    {
      "id": "oouzbz",
      "name": "video",
      "parent": 0,
      "children": [],
      "settings": {
        "videoType": "media",
        "youTubeId": "5DGo0AYOJ7s",
        "youtubeControls": true,
        "vimeoByline": true,
        "vimeoTitle": true,
        "vimeoPortrait": true,
        "fileControls": true,
        "media": {
          "id": 780,
          "filename": "koenigsbruegge-imagefilm.m4v",
          "mime": "video/mp4",
          "url": "https://sk-koenigsbruegge.local/wp-content/uploads/koenigsbruegge-imagefilm.m4v"
        }
      }
    },
    {
      "id": "uphrns",
      "name": "div",
      "parent": "xulsik",
      "children": ["cgaweb"],
      "settings": {
        "tag": "custom",
        "customTag": "button",
        "_interactions": [
          {
            "id": "yofjqg",
            "target": "popup",
            "trigger": "click",
            "action": "hide",
            "templateId": "889"
          }
        ]
      }
    },
    {
      "id": "gwxnib",
      "name": "button",
      "parent": 0,
      "children": [],
      "settings": {
        "text": "Ich bin ein Button",
        "style": "primary",
        "tag": "button"
      },
      "label": "DELETE ME"
    }
  ],
  "templateType": "popup"
}

Hope this Helps
Cheers Suat

4

Hi @UserfreundSuat,

thank you so much. I was able to replicate the issue locally using you template. Now I know how to replicate it - when I was testing it for the first time, I had focusable element even after the video.

I’ve created an internal task for this.

Best regards,
Matej

1 Like
5

focus works fine with an interactive element after the video indeed