cms Fixes an issue that caused focus trap to not work when clicking inside the Image Editor on element pages

Description

Setting the activate listener on the <body> element caused tabindex="0" to be set on the body element. After opening the Image Editor modal, clicking anywhere inside would set focus on the body — not inside the current layer — since the body itself was focusable.

This PR checks to make sure it doesn't set tabindex="0" on the body element to prevent focus from being dropped into the wrong layer.

Related issues

Jun 16 '25 16:06 gcamacho079

PT-2770 Identify why "Skip to content" is first in the focus order when clicking inside of the Image Editor

Jun 16 '25 16:06 linear[bot]

@gcamacho079 What are the steps to reproduce the bug, which demonstrate this PR’s fix? The behavior seems the same to me on 5.x and this branch – either way, if I click somewhere within the image editor, I’m unable to tab back to any of the Image Editor inputs.

Jun 19 '25 23:06 brandonkelly

@brandonkelly of course! To reproduce the issue:

Go to an asset page and open the Image Editor
Click anywhere on the Image Editor modal background (i.e., not on an input)
Hit the Tab key

Outcome (5.x): Keyboard focus is reset to the body tag, so the next item to receive focus is the "Skip to main section" link Expected behavior: Focus should move to a button or field inside the Image Editor modal. The item that receives focus will vary based on where the user clicks.

I'm getting the expected behavior on this branch, but it sounds like you're still seeing focus move to the skip link?

Jun 20 '25 16:06 gcamacho079

Yeah, seeing the same behavior on both 5.x and this branch. On Chrome, both branches behave as expected; on Firefox, both branches take 10 Tab presses before focus makes it to the “Rotate” button. Strangely, any follow-up clicks on the background only take four Tab presses to get to “Rotate”.

Jun 22 '25 15:06 brandonkelly

@brandonkelly Interesting! I wonder if there's something in another layer that's stealing the focus. 🤔 I haven't been able to replicate. Could you run the following code in the console so we can see what's getting that focus after you click?

document.body.addEventListener('focusin', (event) => {
  console.log(document.activeElement);
});

In the meantime, I may work on adding some fallback code in the Modal JS to make sure keyboard focus is in the correct layer after the first mousedown or tab.

Jun 23 '25 16:06 gcamacho079