@covet-pics/covet-pics-widget 0.133.1 → 0.133.3

package/dist/cjs/covet-pics-direct-buy_8.cjs.entry.js

@@ -3768,9 +3768,6 @@ const CovetPicsPopup = class {
     this.isDefaultCurrency = true;
     // unique ID
     this.contentCarouselId = null;
-    /**
-     *  Click handlers
-     */
     this.playPauseVideoClickHandler = (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -3842,7 +3839,9 @@ const CovetPicsPopup = class {
     this.bindKeyboardArrowKeys();
     // ADA issue 
     this.popupTabIndex = 1;
-    popup$1.focus();
+    const focusableElements = this.getFocusableElements(popup$1);
+    const closeBtn = focusableElements.find(el => el.getAttribute("aria-label") === "Close");
+    closeBtn.focus();
   }
   /** Close popup */
   async closePopup() {
@@ -3904,6 +3903,7 @@ const CovetPicsPopup = class {
   }
   componentDidLoad() {
     this.bindSwipeGestures();
+    this.focusTrap();
   }
   componentDidRender() {
     if (this.isActive && !this.isModalOpenEventSent) {
@@ -3943,6 +3943,40 @@ const CovetPicsPopup = class {
   get isActive() {
     return this.el.classList.contains("covet-pics-popup-open");
   }
+  /**
+   *  Click handlers
+   */
+  getFocusableElements(element) {
+    const allFocusableElements = Array.from(element.querySelectorAll("a[href], button, input, textarea, select, details,[tabindex]:not([tabindex=\"-1\"])"));
+    const isElFocusable = (el) => !el.hasAttribute("disabled") && el.getAttribute("aria-hidden") !== "true" && el.offsetHeight !== 0; // JS, CSS tricks (offsetHeight) to detect if element not inside parent (display: none) 
+    const focusableElements = allFocusableElements.filter(el => isElFocusable(el));
+    return focusableElements;
+  }
+  focusTrap() {
+    this.el.addEventListener("keydown", (e) => {
+      let isTabPressed = e.key === "Tab" || e.keyCode === 9;
+      if (!isTabPressed)
+        return;
+      const shadow = document.activeElement.shadowRoot;
+      const popup = this.el.shadowRoot.querySelector(".popup");
+      const focusableElements = this.getFocusableElements(popup);
+      const firstFocusableElement = focusableElements[0];
+      const lastFocusableElement = focusableElements[focusableElements.length - 1];
+      const activeElement = shadow.activeElement;
+      if (e.shiftKey) {
+        if (activeElement === firstFocusableElement) {
+          lastFocusableElement.focus();
+          e.preventDefault();
+        }
+      }
+      else {
+        if (activeElement === lastFocusableElement) {
+          firstFocusableElement.focus();
+          e.preventDefault();
+        }
+      }
+    });
+  }
   closeDirectBuy() {
     return this.appStore.dispatch(popup.setPopupProductId(-1));
   }
@@ -4091,6 +4125,7 @@ const CovetPicsPopup = class {
     const checkoutButtons = Array.from(this.el.shadowRoot.querySelectorAll(".btn-checkout"));
     checkoutButtons.forEach(checkoutButton => {
       checkoutButton.classList.add("show");
+      checkoutButton.setAttribute("aria-hidden", "false");
     });
     fetch("/cart.js")
       .then(response => response.json())
@@ -4187,7 +4222,7 @@ const CovetPicsPopup = class {
       this.renderMobileArrows(), index.h("div", { class: "popup-dialog" }, this.item && this.item.id !== -1 &&
       index.h("div", { id: this.contentCarouselId, class: "popup-content" }, this.renderImage(), this.renderSidebar()), ["arrows-type-1", "arrows-type-2", "arrows-type-3"].includes(this.settings._arrowsDesktopType) &&
       index.h("div", { class: `desktop-arrows arrows-size-${this.settings._arrowsDesktopSizeType} arrows-color-theme-${this.settings.arrow_color_theme}` }, this.renderArrows(this.settings._arrowsDesktopType)), this.settings.close_button_position === "side" &&
-      this.renderCloseButton(), index.h("a", { href: "/cart", target: "_top", class: `btn-checkout desktop ${this.settings.close_button_position} ${this.settings.close_button_size} ${this.settings._closeButtonСolorTheme}`, "aria-label": "View cart" }, index.h("span", { class: "counter" }), index.h(Icon, { iconName: "checkout" }))), index.h("div", { class: "backdrop", "data-dismiss": "popup", onClick: this.hidePopupClickHandler }))));
+      this.renderCloseButton(), index.h("a", { href: "/cart", target: "_top", class: `btn-checkout desktop ${this.settings.close_button_position} ${this.settings.close_button_size} ${this.settings._closeButtonСolorTheme}`, "aria-hidden": "true", "aria-label": "View cart" }, index.h("span", { class: "counter" }), index.h(Icon, { iconName: "checkout" }))), index.h("div", { class: "backdrop", "data-dismiss": "popup", onClick: this.hidePopupClickHandler }))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {