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

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); }

package/dist/cjs/covet-pics-highlighted-hotspots_2.cjs.entry.js

@@ -9,9 +9,9 @@ const index = require('./index-65c0de9a.js');
 const utils = require('./utils-85481438.js');
 const getters = require('./getters-c3c47af0.js');
 const storeUtils = require('./storeUtils-6e9b9011.js');
-const lazy = require('./lazy-400cf804.js');
-const slider = require('./slider-3ccbc3e0.js');
+const a11y = require('./a11y-ec6649c6.js');
 const fragment = require('./fragment-29c21ac8.js');
+const slider = require('./slider-c7104397.js');
 
 function effectInit(params) {
   const {
@@ -552,8 +552,8 @@ const CovetPicsHighlightedPage = class {
       slideLabelMessage: "Product item {{index}}/{{slidesLength}}"
     };
     if (this.isMobile && this.layout === "zigzag") {
-      return this.productSlider = new lazy.Swiper(slider$1, {
-        modules: [lazy.Lazy, slider.A11y],
+      return this.productSlider = new a11y.Swiper(slider$1, {
+        modules: [a11y.Lazy, a11y.A11y],
         slidesPerView: 1,
         loop: false,
         on: {
@@ -572,8 +572,8 @@ const CovetPicsHighlightedPage = class {
     }
     if (this.productsLayout === "layout-1") {
       const paginationEl = this.el.querySelector(".product .pagination");
-      return this.productSlider = new lazy.Swiper(slider$1, {
-        modules: [lazy.Lazy, lazy.Navigation, lazy.Pagination, EffectFade, slider.A11y],
+      return this.productSlider = new a11y.Swiper(slider$1, {
+        modules: [a11y.Lazy, a11y.Navigation, a11y.Pagination, EffectFade, a11y.A11y],
         slidesPerView: 1,
         effect: this.isMobile ? null : "fade",
         fadeEffect: {
@@ -608,8 +608,8 @@ const CovetPicsHighlightedPage = class {
       const sliderDescription = this.el.querySelector(".product .slider-description");
       this.additionalProductSlider = this.isMobile
         ? null
-        : new lazy.Swiper(sliderDescription, {
-          modules: [lazy.Lazy, lazy.Navigation, lazy.Pagination, EffectFade, slider.A11y],
+        : new a11y.Swiper(sliderDescription, {
+          modules: [a11y.Lazy, a11y.Navigation, a11y.Pagination, EffectFade, a11y.A11y],
           on: {
             init: (e) => slider.swiperUpdateTabIndex(e),
             update: (e) => slider.swiperUpdateTabIndex(e),
@@ -637,8 +637,8 @@ const CovetPicsHighlightedPage = class {
             loadPrevNext: true,
           },
         });
-      return this.productSlider = new lazy.Swiper(slider$1, {
-        modules: [lazy.Lazy, lazy.Navigation, lazy.Pagination, EffectFade, slider.A11y],
+      return this.productSlider = new a11y.Swiper(slider$1, {
+        modules: [a11y.Lazy, a11y.Navigation, a11y.Pagination, EffectFade, a11y.A11y],
         slidesPerView: 1,
         effect: this.isMobile ? null : "fade",
         fadeEffect: {
@@ -669,8 +669,8 @@ const CovetPicsHighlightedPage = class {
       });
     }
     if (this.productsLayout === "layout-3") {
-      return this.productSlider = new lazy.Swiper(slider$1, {
-        modules: [lazy.Lazy, lazy.Navigation, slider.A11y],
+      return this.productSlider = new a11y.Swiper(slider$1, {
+        modules: [a11y.Lazy, a11y.Navigation, a11y.A11y],
         slidesPerView: this.isMobile ? 1 : 2,
         effect: null,
         loop: this.isMobile ? false : true,
@@ -698,8 +698,8 @@ const CovetPicsHighlightedPage = class {
       const slidesCount = this.isMobile
         ? 1
         : 3;
-      return this.productSlider = new lazy.Swiper(slider$1, {
-        modules: [lazy.Lazy, lazy.Navigation, slider.A11y],
+      return this.productSlider = new a11y.Swiper(slider$1, {
+        modules: [a11y.Lazy, a11y.Navigation, a11y.A11y],
         slidesPerView: slidesCount,
         effect: null,
         loop: this.isMobile ? false : true,
@@ -728,8 +728,8 @@ const CovetPicsHighlightedPage = class {
       return true;
     const slider$1 = this.el.querySelector(".thumbnail .swiper");
     const paginationEl = this.el.querySelector(".thumbnail .thumbnail-pagination");
-    return this.thumbnailCarousel = new lazy.Swiper(slider$1, {
-      modules: [lazy.Lazy, lazy.Pagination, EffectFade, slider.A11y],
+    return this.thumbnailCarousel = new a11y.Swiper(slider$1, {
+      modules: [a11y.Lazy, a11y.Pagination, EffectFade, a11y.A11y],
       slidesPerView: 1,
       effect: "fade",
       fadeEffect: {

package/dist/cjs/slider-c7104397.js

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) 2020 by Space Squirrel Ltd.
+ */
+'use strict';
+
+function swiperUpdateTabIndex(e) {
+  const activeIndex = e.activeIndex;
+  const slidesPerView = e.params.slidesPerView;
+  const slides = Array.from(e.slides);
+  slides.forEach((slide, idx) => {
+    slide.setAttribute("tabindex", `${activeIndex - 1 < idx && idx < activeIndex + slidesPerView ? 0 : -1}`);
+    slide.setAttribute("aria-hidden", `${!(activeIndex - 1 < idx && idx < activeIndex + slidesPerView)}`);
+    return slide;
+  });
+}
+
+exports.swiperUpdateTabIndex = swiperUpdateTabIndex;

package/dist/collection/components/covet-pics-gallery-slider/covet-pics-gallery-slider.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2020 by Space Squirrel Ltd.
  */
 import { h } from "@stencil/core";
-import Swiper, { Autoplay, Lazy, Navigation, Pagination } from "swiper";
+import Swiper, { Autoplay, Lazy, Navigation, Pagination, A11y } from "swiper";
 import { buildEvent, createCovetPicsPopup, createUploadPopup, getCoverImage, getDateFromTimestamp, getSizesForResponsiveImage, getStyle } from "../../utils/utils";
 import { setSliderIndex, setSliderSlidesPerView } from "../../store/slider";
 export class CovetPicsGallerySlider {
@@ -98,6 +98,7 @@ export class CovetPicsGallerySlider {
     const desktopItemPaddingPX = (this.desktopItemPadding / 100) * galleryEl.offsetWidth;
     const paginationEl = this.el.querySelector(".gallery .swiper-pagination");
     this.swiper = new Swiper(galleryEl, {
+      modules: [Autoplay, Lazy, Navigation, Pagination, A11y],
       on: {
         init: (e) => {
           this.sliderInit.emit(e);
@@ -121,8 +122,17 @@ export class CovetPicsGallerySlider {
           }
         }
       },
+      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, Navigation, Pagination],
       lazy: {
         elementClass: "bg",
         loadPrevNext: true,
@@ -244,11 +254,11 @@ export class CovetPicsGallerySlider {
   }
   render() {
     if (this.items !== undefined) {
-      return (h("section", { id: "covet-pics-slider", class: "gallery swiper", role: "region", "aria-label": "main slider" }, h("button", { class: `swiper-button-prev ${this.itemStyle}`, tabindex: "0", "aria-label": "slider contol prev", "aria-controls": "covet-pics-slider", type: "button" }, h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, 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) " }))), h("div", { class: "swiper-wrapper" }, this.itemStyle === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
+      return (h("section", { id: "covet-pics-slider", class: "gallery swiper" }, h("button", { class: `swiper-button-prev ${this.itemStyle}`, type: "button" }, h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, 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) " }))), 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))), h("div", { class: "swiper-pagination" }), h("button", { class: `swiper-button-next ${this.itemStyle}`, tabindex: "0", "aria-label": "slider contol next", "aria-controls": "covet-pics-slider", type: "button" }, h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, 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))), h("div", { class: "swiper-pagination" }), h("button", { class: `swiper-button-next ${this.itemStyle}`, type: "button" }, h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, 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) " })))));
     }
   }
   static get is() { return "covet-pics-gallery-slider"; }