Trap Focus in Modal/Dialog/Cart

trap-focus-dialog.js

// Below targets 3 elements within Webflow:
// 1. Dialog Open Button: `.cc-cart-button`
// 2. Dialog Close Button: `.cart-close`
// 3. Dialog Wrapper (element that gets set to display: block or none): `.cart-wrapper`

$(function () {
  var findDialog = function (elem) {
    var tabbable = elem
      .find("select, input, textarea, button, a")
      .filter(":visible");

    var firstTabbable = tabbable.first();
    var lastTabbable = tabbable.last();
    /*set focus on first input*/
    firstTabbable.focus();

    /*redirect last tab to first input*/
    lastTabbable.on("keydown", function (e) {
      if (e.which === 9 && !e.shiftKey) {
        e.preventDefault();
        firstTabbable.focus();
      }
    });

    /*redirect first shift+tab to last input*/
    firstTabbable.on("keydown", function (e) {
      if (e.which === 9 && e.shiftKey) {
        e.preventDefault();
        lastTabbable.focus();
      }
    });

    /* allow escape key to close insiders div */
    elem.on("keyup", function (e) {
      if (e.keyCode === 27) {
        elem.hide();
      }
    });
  };

  $(".cc-cart-button").click(function (e) {
    e.preventDefault();

    $(".cart-wrapper").show();
    findDialog($(".cart-wrapper"));
  });

  $(".cart-close").click(function (e) {
    console.log("Cart closed");
    e.preventDefault();

    $(".cart-wrapper").hide();
  });
});