Global region focus spotlight is inaccurate sometimes

To do this, we must first land 📌 Implement HTML comment annotations for Regions, replace HTML wrappers Active . That actually will most likely fix this problem entirely.

While this has mostly been addressed and I can't see any inaccuracy in my testing, I can foresee that there may be still instances where the spotlight is still not accurate based on some (unknown as of yet) CSS/HTML layout that someone may come up with in the future.

As of 📌 Investigate drag-and-drop solution that removes the need to drop items into the preview iFrame Active the spotlight and region border is based on the combined total size of all the elements that are found when walking between the <!-- xb-region-start-xyz --> and <!-- xb-region-end-xyz -->. This seems to work pretty well in most circumstances.

Additionally, the backend provides a <!-- xb-region-content-start-xyz --> and <!-- xb-region-content-end-xyz --> comment that surrounds just the {{ content }} part of the .twig file. This is not currently used by the front end but could be useful in future if we find places where the spotlight is not working correctly.

In my testing using Olivero locally, I have spotted that a few regions (Primary menu and Secondary menu) are actually rendered off screen using CSS so that they can "slide" in when the menu is accessed. This means the region is displayed outside of the preview viewport. It should be possible to detect this situation but I'm not sure how we display/explain this to a user. - Followup #3516898: Regions that are off canvas need to be handled better. →

This is no longer postponed on anything. However I think the issue at the moment is theoretical more than it is an actual observed issue. I'm going to leave this open, but drop it to minor and tag "Needs steps to reproduce".