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

@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.

@brandonkelly of course! To reproduce the issue:

1. Go to an asset page and open the Image Editor
2. Click anywhere on the Image Editor modal background (i.e., not on an input)
3. 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?

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”.

@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.