force everything outside of open offcanvas to be none-focusable (add to page settings > custom code > footer scripts)

footer-scripts.html

<script>
  
document.addEventListener('DOMContentLoaded', () => {
    
    function addInertToOutsideElements(offcanvasElement) {
        const offcanvasAncestors = new Set();
        let currentElement = offcanvasElement.parentElement;
        
        while (currentElement && currentElement !== document.documentElement) {
            offcanvasAncestors.add(currentElement);
            currentElement = currentElement.parentElement;
        }
        
        const allElements = document.querySelectorAll('*');
        
        allElements.forEach(element => {
            const isAncestor = offcanvasAncestors.has(element);
            const isOffcanvas = element === offcanvasElement;
            const isDescendant = offcanvasElement.contains(element);
            const isHtmlOrBody = element === document.documentElement || element === document.body;
            
            if (!isAncestor && !isOffcanvas && !isDescendant && !isHtmlOrBody && !element.hasAttribute('inert')) {
                element.setAttribute('inert', '');
                element.setAttribute('data-x-inert', '');
            }
        });
    }
    
    function removeInertFromOutsideElements() {
        document.querySelectorAll('[data-x-inert]').forEach(element => {
            element.removeAttribute('inert');
            element.removeAttribute('data-x-inert');
        });
    }
    
    document.querySelectorAll('.x-offcanvas').forEach(offcanvas => {
        offcanvas.addEventListener('x_offcanvas:open', function(event) {
            addInertToOutsideElements(event.target);
        });
        
        offcanvas.addEventListener('x_offcanvas:close', function(event) {
            removeInertFromOutsideElements();
        });
    });
    
});
  
</script>