What problem does this address?

When the classic theme site preview is displayed, all elements inside an iframe are expected to be non-interactive via the following code:

However, I found that this code isn't enough to make all interactive elements non-clickable or non-focusable. The scenarios I was able to find are:

⚒️ Summary element

• DOM: Add summary element to focusable elements #70051

For example, you can expand or collapse the Details block content by clicking the summary element. The reason is that the summary element is not defined here as a focusable element.

Elements that are not visible on initial load

For example, Twenty Twenty-One has a mobile menu toggle button. This element isn't initially displayed, but if you narrow down the iframe width, the button is displayed, which is interactive.

I think we'll probably need to use a MutationObserver to monitor changes to the DOM tree and make newly added elements non-interactive.

Elements with event handler

Consumers may add event handlers to non-interactive elements. In this case, focus.focusable.find() can't detect the element.

<div class="wp-block" onclick="window.alert('clicked!')">Click Me</div>

Elements with the Interactivity API

Some elements may have the directives in their markup to add specific behavior the the DOM elements of the block. For example, the image lightbox.

What is your proposed solution?

We need to find an ideal approach to correctly disable all interactive elements. Additionally, there may be other cases to deal with besides the ones I have mentioned.

Not that the approach to add the inert attribute to the iframe body may cause an accessibility issue. See #69522 (comment).