@covet-pics/covet-pics-widget 0.115.2 → 0.115.4

package/dist/cjs/{lazy-400cf804.js → a11y-ec6649c6.js}

@@ -5763,11 +5763,360 @@ function Lazy({
   });
 }
 
-exports.$ = $;
+function A11y({
+  swiper,
+  extendParams,
+  on
+}) {
+  extendParams({
+    a11y: {
+      enabled: true,
+      notificationClass: 'swiper-notification',
+      prevSlideMessage: 'Previous slide',
+      nextSlideMessage: 'Next slide',
+      firstSlideMessage: 'This is the first slide',
+      lastSlideMessage: 'This is the last slide',
+      paginationBulletMessage: 'Go to slide {{index}}',
+      slideLabelMessage: '{{index}} / {{slidesLength}}',
+      containerMessage: null,
+      containerRoleDescriptionMessage: null,
+      itemRoleDescriptionMessage: null,
+      slideRole: 'group',
+      id: null
+    }
+  });
+  swiper.a11y = {
+    clicked: false
+  };
+  let liveRegion = null;
+
+  function notify(message) {
+    const notification = liveRegion;
+    if (notification.length === 0) return;
+    notification.html('');
+    notification.html(message);
+  }
+
+  function getRandomNumber(size = 16) {
+    const randomChar = () => Math.round(16 * Math.random()).toString(16);
+
+    return 'x'.repeat(size).replace(/x/g, randomChar);
+  }
+
+  function makeElFocusable($el) {
+    $el.attr('tabIndex', '0');
+  }
+
+  function makeElNotFocusable($el) {
+    $el.attr('tabIndex', '-1');
+  }
+
+  function addElRole($el, role) {
+    $el.attr('role', role);
+  }
+
+  function addElRoleDescription($el, description) {
+    $el.attr('aria-roledescription', description);
+  }
+
+  function addElControls($el, controls) {
+    $el.attr('aria-controls', controls);
+  }
+
+  function addElLabel($el, label) {
+    $el.attr('aria-label', label);
+  }
+
+  function addElId($el, id) {
+    $el.attr('id', id);
+  }
+
+  function addElLive($el, live) {
+    $el.attr('aria-live', live);
+  }
+
+  function disableEl($el) {
+    $el.attr('aria-disabled', true);
+  }
+
+  function enableEl($el) {
+    $el.attr('aria-disabled', false);
+  }
+
+  function onEnterOrSpaceKey(e) {
+    if (e.keyCode !== 13 && e.keyCode !== 32) return;
+    const params = swiper.params.a11y;
+    const $targetEl = $(e.target);
+
+    if (swiper.navigation && swiper.navigation.$nextEl && $targetEl.is(swiper.navigation.$nextEl)) {
+      if (!(swiper.isEnd && !swiper.params.loop)) {
+        swiper.slideNext();
+      }
+
+      if (swiper.isEnd) {
+        notify(params.lastSlideMessage);
+      } else {
+        notify(params.nextSlideMessage);
+      }
+    }
+
+    if (swiper.navigation && swiper.navigation.$prevEl && $targetEl.is(swiper.navigation.$prevEl)) {
+      if (!(swiper.isBeginning && !swiper.params.loop)) {
+        swiper.slidePrev();
+      }
+
+      if (swiper.isBeginning) {
+        notify(params.firstSlideMessage);
+      } else {
+        notify(params.prevSlideMessage);
+      }
+    }
+
+    if (swiper.pagination && $targetEl.is(classesToSelector(swiper.params.pagination.bulletClass))) {
+      $targetEl[0].click();
+    }
+  }
+
+  function updateNavigation() {
+    if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
+    const {
+      $nextEl,
+      $prevEl
+    } = swiper.navigation;
+
+    if ($prevEl && $prevEl.length > 0) {
+      if (swiper.isBeginning) {
+        disableEl($prevEl);
+        makeElNotFocusable($prevEl);
+      } else {
+        enableEl($prevEl);
+        makeElFocusable($prevEl);
+      }
+    }
+
+    if ($nextEl && $nextEl.length > 0) {
+      if (swiper.isEnd) {
+        disableEl($nextEl);
+        makeElNotFocusable($nextEl);
+      } else {
+        enableEl($nextEl);
+        makeElFocusable($nextEl);
+      }
+    }
+  }
+
+  function hasPagination() {
+    return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;
+  }
+
+  function hasClickablePagination() {
+    return hasPagination() && swiper.params.pagination.clickable;
+  }
+
+  function updatePagination() {
+    const params = swiper.params.a11y;
+    if (!hasPagination()) return;
+    swiper.pagination.bullets.each(bulletEl => {
+      const $bulletEl = $(bulletEl);
+
+      if (swiper.params.pagination.clickable) {
+        makeElFocusable($bulletEl);
+
+        if (!swiper.params.pagination.renderBullet) {
+          addElRole($bulletEl, 'button');
+          addElLabel($bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, $bulletEl.index() + 1));
+        }
+      }
+
+      if ($bulletEl.is(`.${swiper.params.pagination.bulletActiveClass}`)) {
+        $bulletEl.attr('aria-current', 'true');
+      } else {
+        $bulletEl.removeAttr('aria-current');
+      }
+    });
+  }
+
+  const initNavEl = ($el, wrapperId, message) => {
+    makeElFocusable($el);
+
+    if ($el[0].tagName !== 'BUTTON') {
+      addElRole($el, 'button');
+      $el.on('keydown', onEnterOrSpaceKey);
+    }
+
+    addElLabel($el, message);
+    addElControls($el, wrapperId);
+  };
+
+  const handlePointerDown = () => {
+    swiper.a11y.clicked = true;
+  };
+
+  const handlePointerUp = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!swiper.destroyed) {
+          swiper.a11y.clicked = false;
+        }
+      });
+    });
+  };
+
+  const handleFocus = e => {
+    if (swiper.a11y.clicked) return;
+    const slideEl = e.target.closest(`.${swiper.params.slideClass}`);
+    if (!slideEl || !swiper.slides.includes(slideEl)) return;
+    const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;
+    const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);
+    if (isActive || isVisible) return;
+    if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) return;
+
+    if (swiper.isHorizontal()) {
+      swiper.el.scrollLeft = 0;
+    } else {
+      swiper.el.scrollTop = 0;
+    }
+
+    swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
+  };
+
+  const initSlides = () => {
+    const params = swiper.params.a11y;
+
+    if (params.itemRoleDescriptionMessage) {
+      addElRoleDescription($(swiper.slides), params.itemRoleDescriptionMessage);
+    }
+
+    if (params.slideRole) {
+      addElRole($(swiper.slides), params.slideRole);
+    }
+
+    const slidesLength = swiper.params.loop ? swiper.slides.filter(el => !el.classList.contains(swiper.params.slideDuplicateClass)).length : swiper.slides.length;
+
+    if (params.slideLabelMessage) {
+      swiper.slides.each((slideEl, index) => {
+        const $slideEl = $(slideEl);
+        const slideIndex = swiper.params.loop ? parseInt($slideEl.attr('data-swiper-slide-index'), 10) : index;
+        const ariaLabelMessage = params.slideLabelMessage.replace(/\{\{index\}\}/, slideIndex + 1).replace(/\{\{slidesLength\}\}/, slidesLength);
+        addElLabel($slideEl, ariaLabelMessage);
+      });
+    }
+  };
+
+  const init = () => {
+    const params = swiper.params.a11y;
+    swiper.$el.append(liveRegion); // Container
+
+    const $containerEl = swiper.$el;
+
+    if (params.containerRoleDescriptionMessage) {
+      addElRoleDescription($containerEl, params.containerRoleDescriptionMessage);
+    }
+
+    if (params.containerMessage) {
+      addElLabel($containerEl, params.containerMessage);
+    } // Wrapper
+
+
+    const $wrapperEl = swiper.$wrapperEl;
+    const wrapperId = params.id || $wrapperEl.attr('id') || `swiper-wrapper-${getRandomNumber(16)}`;
+    const live = swiper.params.autoplay && swiper.params.autoplay.enabled ? 'off' : 'polite';
+    addElId($wrapperEl, wrapperId);
+    addElLive($wrapperEl, live); // Slide
+
+    initSlides(); // Navigation
+
+    let $nextEl;
+    let $prevEl;
+
+    if (swiper.navigation && swiper.navigation.$nextEl) {
+      $nextEl = swiper.navigation.$nextEl;
+    }
+
+    if (swiper.navigation && swiper.navigation.$prevEl) {
+      $prevEl = swiper.navigation.$prevEl;
+    }
+
+    if ($nextEl && $nextEl.length) {
+      initNavEl($nextEl, wrapperId, params.nextSlideMessage);
+    }
+
+    if ($prevEl && $prevEl.length) {
+      initNavEl($prevEl, wrapperId, params.prevSlideMessage);
+    } // Pagination
+
+
+    if (hasClickablePagination()) {
+      swiper.pagination.$el.on('keydown', classesToSelector(swiper.params.pagination.bulletClass), onEnterOrSpaceKey);
+    } // Tab focus
+
+
+    swiper.$el.on('focus', handleFocus, true);
+    swiper.$el.on('pointerdown', handlePointerDown, true);
+    swiper.$el.on('pointerup', handlePointerUp, true);
+  };
+
+  function destroy() {
+    if (liveRegion && liveRegion.length > 0) liveRegion.remove();
+    let $nextEl;
+    let $prevEl;
+
+    if (swiper.navigation && swiper.navigation.$nextEl) {
+      $nextEl = swiper.navigation.$nextEl;
+    }
+
+    if (swiper.navigation && swiper.navigation.$prevEl) {
+      $prevEl = swiper.navigation.$prevEl;
+    }
+
+    if ($nextEl) {
+      $nextEl.off('keydown', onEnterOrSpaceKey);
+    }
+
+    if ($prevEl) {
+      $prevEl.off('keydown', onEnterOrSpaceKey);
+    } // Pagination
+
+
+    if (hasClickablePagination()) {
+      swiper.pagination.$el.off('keydown', classesToSelector(swiper.params.pagination.bulletClass), onEnterOrSpaceKey);
+    } // Tab focus
+
+
+    swiper.$el.off('focus', handleFocus, true);
+    swiper.$el.off('pointerdown', handlePointerDown, true);
+    swiper.$el.off('pointerup', handlePointerUp, true);
+  }
+
+  on('beforeInit', () => {
+    liveRegion = $(`<span class="${swiper.params.a11y.notificationClass}" aria-live="assertive" aria-atomic="true"></span>`);
+  });
+  on('afterInit', () => {
+    if (!swiper.params.a11y.enabled) return;
+    init();
+  });
+  on('slidesLengthChange snapGridLengthChange slidesGridLengthChange', () => {
+    if (!swiper.params.a11y.enabled) return;
+    initSlides();
+  });
+  on('fromEdge toEdge afterInit lock unlock', () => {
+    if (!swiper.params.a11y.enabled) return;
+    updateNavigation();
+  });
+  on('paginationUpdate', () => {
+    if (!swiper.params.a11y.enabled) return;
+    updatePagination();
+  });
+  on('destroy', () => {
+    if (!swiper.params.a11y.enabled) return;
+    destroy();
+  });
+}
+
+exports.A11y = A11y;
 exports.Lazy = Lazy;
 exports.Navigation = Navigation;
 exports.Pagination = Pagination;
 exports.Swiper = Swiper;
-exports.classesToSelector = classesToSelector;
 exports.getDocument = getDocument;
 exports.nextTick = nextTick;

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

@@ -7,8 +7,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-65c0de9a.js');
 const utils = require('./utils-85481438.js');
-const lazy = require('./lazy-400cf804.js');
-const slider = require('./slider-3ccbc3e0.js');
+const a11y = require('./a11y-ec6649c6.js');
+const slider = require('./slider-c7104397.js');
 const fragment = require('./fragment-29c21ac8.js');
 const storeUtils = require('./storeUtils-6e9b9011.js');
 const getters = require('./getters-c3c47af0.js');
@@ -145,8 +145,8 @@ const CovetPicsDirectBuy = class {
     // TODO add exception for slides length == 1
     const galleryMainEl = this.el.shadowRoot.querySelector(".main-gallery");
     const paginationEl = this.el.shadowRoot.querySelector(".swiper-pagination");
-    return this.mainGallery = new lazy.Swiper(galleryMainEl, {
-      modules: [lazy.Pagination, slider.A11y],
+    return this.mainGallery = new a11y.Swiper(galleryMainEl, {
+      modules: [a11y.Pagination, a11y.A11y],
       on: {
         init: (e) => slider.swiperUpdateTabIndex(e),
         update: (e) => slider.swiperUpdateTabIndex(e),
@@ -4029,10 +4029,10 @@ const CovetPicsPopup = class {
     // if swiper exists then first destroy it
     if (typeof this.swiper !== "undefined")
       this.clearSwiper();
-    this.swiper = new lazy.Swiper(carouselMediaEl, {
+    this.swiper = new a11y.Swiper(carouselMediaEl, {
       slidesPerView: 1,
       loop: true,
-      modules: [lazy.Navigation, lazy.Pagination, lazy.Lazy, slider.A11y],
+      modules: [a11y.Navigation, a11y.Pagination, a11y.Lazy, a11y.A11y],
       on: {
         init: (e) => slider.swiperUpdateTabIndex(e),
         update: (e) => slider.swiperUpdateTabIndex(e),

package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-65c0de9a.js');
 const utils$1 = require('./utils-85481438.js');
 const _commonjsHelpers = require('./_commonjsHelpers-b66a770d.js');
-const lazy = require('./lazy-400cf804.js');
+const a11y = require('./a11y-ec6649c6.js');
 const slider = require('./slider-dbefa25c.js');
 require('./redux-toolkit.esm-ed0a74c1.js');
 
@@ -3713,7 +3713,7 @@ function Autoplay({
     }
 
     clearTimeout(timeout);
-    timeout = lazy.nextTick(() => {
+    timeout = a11y.nextTick(() => {
       let autoplayResult;
 
       if (swiper.params.autoplay.reverseDirection) {
@@ -3790,7 +3790,7 @@ function Autoplay({
   }
 
   function onVisibilityChange() {
-    const document = lazy.getDocument();
+    const document = a11y.getDocument();
 
     if (document.visibilityState === 'hidden' && swiper.autoplay.running) {
       pause();
@@ -3855,7 +3855,7 @@ function Autoplay({
   on('init', () => {
     if (swiper.params.autoplay.enabled) {
       start();
-      const document = lazy.getDocument();
+      const document = a11y.getDocument();
       document.addEventListener('visibilitychange', onVisibilityChange);
       attachMouseEvents();
     }
@@ -3890,7 +3890,7 @@ function Autoplay({
       stop();
     }
 
-    const document = lazy.getDocument();
+    const document = a11y.getDocument();
     document.removeEventListener('visibilitychange', onVisibilityChange);
   });
   Object.assign(swiper.autoplay, {
@@ -4000,7 +4000,8 @@ const CovetPicsGallerySlider = class {
     const mobileItemPaddingPX = (this.mobileItemPadding / 100) * galleryEl.offsetWidth;
     const desktopItemPaddingPX = (this.desktopItemPadding / 100) * galleryEl.offsetWidth;
     const paginationEl = this.el.querySelector(".gallery .swiper-pagination");
-    this.swiper = new lazy.Swiper(galleryEl, {
+    this.swiper = new a11y.Swiper(galleryEl, {
+      modules: [Autoplay, a11y.Lazy, a11y.Navigation, a11y.Pagination, a11y.A11y],
       on: {
         init: (e) => {
           this.sliderInit.emit(e);
@@ -4024,8 +4025,17 @@ const CovetPicsGallerySlider = class {
           }
         }
       },
+      a11y: {
+        enabled: true,
+        prevSlideMessage: "Previous item",
+        nextSlideMessage: "Next item",
+        containerMessage: "Gallery slider",
+        containerRoleDescriptionMessage: `Gallery slider ${this.items.length} items`,
+        paginationBulletMessage: "Goto item #{{index}}",
+        slideRole: "group",
+        slideLabelMessage: "" // used custom aria-label
+      },
       preloadImages: false,
-      modules: [Autoplay, lazy.Lazy, lazy.Navigation, lazy.Pagination],
       lazy: {
         elementClass: "bg",
         loadPrevNext: true,
@@ -4147,11 +4157,11 @@ const CovetPicsGallerySlider = class {
   }
   render() {
     if (this.items !== undefined) {
-      return (index.h("section", { id: "covet-pics-slider", class: "gallery swiper", role: "region", "aria-label": "main slider" }, index.h("button", { class: `swiper-button-prev ${this.itemStyle}`, tabindex: "0", "aria-label": "slider contol prev", "aria-controls": "covet-pics-slider", type: "button" }, index.h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " }))), index.h("div", { class: "swiper-wrapper" }, this.itemStyle === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
+      return (index.h("section", { id: "covet-pics-slider", class: "gallery swiper" }, index.h("button", { class: `swiper-button-prev ${this.itemStyle}`, type: "button" }, index.h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " }))), index.h("div", { class: "swiper-wrapper" }, this.itemStyle === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
         ? this.renderStandardUploadItem(item, idx, this.items.length)
         : this.renderStandardItem(item, idx, this.items.length)), this.itemStyle !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
         ? this.renderDetailUploadItem(item, idx, this.items.length)
-        : this.renderDetailItem(item, idx, this.items.length))), index.h("div", { class: "swiper-pagination" }), index.h("button", { class: `swiper-button-next ${this.itemStyle}`, tabindex: "0", "aria-label": "slider contol next", "aria-controls": "covet-pics-slider", type: "button" }, index.h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " })))));
+        : this.renderDetailItem(item, idx, this.items.length))), index.h("div", { class: "swiper-pagination" }), index.h("button", { class: `swiper-button-next ${this.itemStyle}`, type: "button" }, index.h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " })))));
     }
   }
   get el() { return index.getElement(this); }
@@ -4403,17 +4413,10 @@ const CovetPicsHighlighted = class {
     });
     return Promise.all([hide, show]);
   }
-  highlightedAriaLabel() {
-    if (this.layout === "zigzag")
-      return "pages vertical zigzag layout";
-    if (this.layout === "row")
-      return "pages vertical grid layout";
-    return null;
-  }
   render() {
     const showPagination = ((this.layout === "slider" && !this.isDesktopScreen) || this.layout === "spotlight")
       && this.items && this.items.length > 1;
-    return (index.h(index.Host, { class: this.layout, style: this.setCSSVariables(), onClick: (e) => !this.isDesktopScreen && this.layout === "row" ? this.isClickOutsideHotspot(e) : null, role: this.layout === "zigzag" || this.layout === "row" ? "grid" : "region", "aria-label": this.highlightedAriaLabel() }, this.renderMainLayout(), showPagination &&
+    return (index.h(index.Host, { class: this.layout, style: this.setCSSVariables(), onClick: (e) => !this.isDesktopScreen && this.layout === "row" ? this.isClickOutsideHotspot(e) : null, role: "region", "aria-label": "Page gallery", "aria-roledescription": `Gallery ${this.items.length} posts` }, this.renderMainLayout(), showPagination &&
       index.h("span", { class: "page-pagination" }, `${this.mainSliderIndex + 1}/${this.items.length}`)));
   }
   get el() { return index.getElement(this); }