Stiletto theme trap focus on purchase confirmation popup

Shopify Discussion
1

Hello, in the stiletto theme, there is a purchase confirmation popup which shows the latest product added to the cart as a popup. However, while tabbing through the website with keyboard, it doesn’t trap focus on the popup. Tabbing can still access the background elements. I am trying to disable that so that when the popup is open, keyboard focus is trapped inside the popup. This is what I have so far:

function PurchaseConfirmationPopup(node) {
  if (!node) return;
  var quickCartEnabled = Boolean(n$2(selectors$A.quickCart, document));
  var containerInner = n$2(selectors$A.containerInner, node);
  var purchaseConfirmationAnimation = null;
  var focusTrap = createFocusTrap(node, {
    allowOutsideClick: true
  });

  if (shouldAnimate(node)) {
    purchaseConfirmationAnimation = animatePurchaseConfirmation(node);
  }

  var delegate = new Delegate(node);
  delegate.on("click", selectors$A.viewCartButton, function (event) {
    if (!quickCartEnabled) return;
    event.preventDefault();
    r$1("quick-cart:open");
    close();
  });
  delegate.on("click", selectors$A.closeButton, function (event) {
    event.preventDefault();
    close();
  });
  c("confirmation-popup:open", function (_, _ref) {
    var product = _ref.product;
    return getItem(product);
  });

  function getItem(product) {
    var requestUrl = "".concat(theme.routes.cart.base, "/?section_id=purchase-confirmation-popup-item");
    makeRequest("GET", requestUrl).then(function (response) {
      var container = document.createElement("div");
      container.innerHTML = response;
      containerInner.innerHTML = "";
      containerInner.appendChild(container);
      var freeShippingBar$1 = n$2(selectors$A.freeShippingBar, containerInner);

      if (freeShippingBar$1) {
        freeShippingBar(freeShippingBar$1);
      } // Show product within cart that was newly added

      var addedProduct = n$2("[data-product-key=\"".concat(product.key, "\"]"), node);
      i$1(addedProduct, classes$c.hidden);
      open();
    });
  }

  function open() {
    focusTrap.activate();
    u$1(node, classes$c.active);

    if (shouldAnimate(node)) {
      purchaseConfirmationAnimation.animate();
    }

    // var timeout = setTimeout(function () {
    //   close();
    // }, 5000); // Clear timeout if mouse enters, then close if it leaves

    containerInner.addEventListener("mouseover", function () {
      //clearTimeout(timeout);
      containerInner.addEventListener("mouseleave", close, {
        once: true
      });
    }, {
      once: true
    });
  }

  function close() {
    focusTrap.deactivate();
    i$1(node, classes$c.active);

    if (shouldAnimate(node)) {
      setTimeout(function () {
        purchaseConfirmationAnimation.reset();
      }, 500);
    }
  }
}