pb-sxp-ui 1.9.1 → 1.9.2

package/dist/pb-ui.js

@@ -313,6 +313,17 @@
         });
         return value !== null && value !== void 0 ? value : '';
     }
+    function getScreenReader() {
+        let userAgent = self.navigator.userAgent;
+        if (!userAgent)
+            return false;
+        return (/TalkBack/i.test(userAgent) ||
+            /Funtouch/i.test(userAgent) ||
+            /VoiceOver/i.test(userAgent) ||
+            /NVDA/i.test(userAgent) ||
+            /JAWS/i.test(userAgent) ||
+            /ChromeVox/i.test(userAgent));
+    }
 
     function unzip(b64Data) {
         const strData = atob(b64Data);
@@ -2594,6 +2605,119 @@
       return (Array.isArray(el) ? el : [el]).filter(e => !!e);
     }
 
+    /* eslint-disable consistent-return */
+    function Keyboard(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
+      const document = getDocument();
+      const window = getWindow();
+      swiper.keyboard = {
+        enabled: false
+      };
+      extendParams({
+        keyboard: {
+          enabled: false,
+          onlyInViewport: true,
+          pageUpDown: true
+        }
+      });
+      function handle(event) {
+        if (!swiper.enabled) return;
+        const {
+          rtlTranslate: rtl
+        } = swiper;
+        let e = event;
+        if (e.originalEvent) e = e.originalEvent; // jquery fix
+        const kc = e.keyCode || e.charCode;
+        const pageUpDown = swiper.params.keyboard.pageUpDown;
+        const isPageUp = pageUpDown && kc === 33;
+        const isPageDown = pageUpDown && kc === 34;
+        const isArrowLeft = kc === 37;
+        const isArrowRight = kc === 39;
+        const isArrowUp = kc === 38;
+        const isArrowDown = kc === 40;
+        // Directions locks
+        if (!swiper.allowSlideNext && (swiper.isHorizontal() && isArrowRight || swiper.isVertical() && isArrowDown || isPageDown)) {
+          return false;
+        }
+        if (!swiper.allowSlidePrev && (swiper.isHorizontal() && isArrowLeft || swiper.isVertical() && isArrowUp || isPageUp)) {
+          return false;
+        }
+        if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
+          return undefined;
+        }
+        if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {
+          return undefined;
+        }
+        if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) {
+          let inView = false;
+          // Check that swiper should be inside of visible area of window
+          if (elementParents(swiper.el, `.${swiper.params.slideClass}, swiper-slide`).length > 0 && elementParents(swiper.el, `.${swiper.params.slideActiveClass}`).length === 0) {
+            return undefined;
+          }
+          const el = swiper.el;
+          const swiperWidth = el.clientWidth;
+          const swiperHeight = el.clientHeight;
+          const windowWidth = window.innerWidth;
+          const windowHeight = window.innerHeight;
+          const swiperOffset = elementOffset(el);
+          if (rtl) swiperOffset.left -= el.scrollLeft;
+          const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];
+          for (let i = 0; i < swiperCoord.length; i += 1) {
+            const point = swiperCoord[i];
+            if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {
+              if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
+              inView = true;
+            }
+          }
+          if (!inView) return undefined;
+        }
+        if (swiper.isHorizontal()) {
+          if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {
+            if (e.preventDefault) e.preventDefault();else e.returnValue = false;
+          }
+          if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();
+          if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();
+        } else {
+          if (isPageUp || isPageDown || isArrowUp || isArrowDown) {
+            if (e.preventDefault) e.preventDefault();else e.returnValue = false;
+          }
+          if (isPageDown || isArrowDown) swiper.slideNext();
+          if (isPageUp || isArrowUp) swiper.slidePrev();
+        }
+        emit('keyPress', kc);
+        return undefined;
+      }
+      function enable() {
+        if (swiper.keyboard.enabled) return;
+        document.addEventListener('keydown', handle);
+        swiper.keyboard.enabled = true;
+      }
+      function disable() {
+        if (!swiper.keyboard.enabled) return;
+        document.removeEventListener('keydown', handle);
+        swiper.keyboard.enabled = false;
+      }
+      on('init', () => {
+        if (swiper.params.keyboard.enabled) {
+          enable();
+        }
+      });
+      on('destroy', () => {
+        if (swiper.keyboard.enabled) {
+          disable();
+        }
+      });
+      Object.assign(swiper.keyboard, {
+        enable,
+        disable
+      });
+    }
+
     /* eslint-disable consistent-return */
     function Mousewheel(_ref) {
       let {
@@ -3001,6 +3125,202 @@
       return params;
     }
 
+    function Navigation(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on,
+        emit
+      } = _ref;
+      extendParams({
+        navigation: {
+          nextEl: null,
+          prevEl: null,
+          hideOnClick: false,
+          disabledClass: 'swiper-button-disabled',
+          hiddenClass: 'swiper-button-hidden',
+          lockClass: 'swiper-button-lock',
+          navigationDisabledClass: 'swiper-navigation-disabled'
+        }
+      });
+      swiper.navigation = {
+        nextEl: null,
+        prevEl: null
+      };
+      function getEl(el) {
+        let res;
+        if (el && typeof el === 'string' && swiper.isElement) {
+          res = swiper.el.querySelector(el);
+          if (res) return res;
+        }
+        if (el) {
+          if (typeof el === 'string') res = [...document.querySelectorAll(el)];
+          if (swiper.params.uniqueNavElements && typeof el === 'string' && res && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {
+            res = swiper.el.querySelector(el);
+          } else if (res && res.length === 1) {
+            res = res[0];
+          }
+        }
+        if (el && !res) return el;
+        // if (Array.isArray(res) && res.length === 1) res = res[0];
+        return res;
+      }
+      function toggleEl(el, disabled) {
+        const params = swiper.params.navigation;
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          if (subEl) {
+            subEl.classList[disabled ? 'add' : 'remove'](...params.disabledClass.split(' '));
+            if (subEl.tagName === 'BUTTON') subEl.disabled = disabled;
+            if (swiper.params.watchOverflow && swiper.enabled) {
+              subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
+            }
+          }
+        });
+      }
+      function update() {
+        // Update Navigation Buttons
+        const {
+          nextEl,
+          prevEl
+        } = swiper.navigation;
+        if (swiper.params.loop) {
+          toggleEl(prevEl, false);
+          toggleEl(nextEl, false);
+          return;
+        }
+        toggleEl(prevEl, swiper.isBeginning && !swiper.params.rewind);
+        toggleEl(nextEl, swiper.isEnd && !swiper.params.rewind);
+      }
+      function onPrevClick(e) {
+        e.preventDefault();
+        if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
+        swiper.slidePrev();
+        emit('navigationPrev');
+      }
+      function onNextClick(e) {
+        e.preventDefault();
+        if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
+        swiper.slideNext();
+        emit('navigationNext');
+      }
+      function init() {
+        const params = swiper.params.navigation;
+        swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
+          nextEl: 'swiper-button-next',
+          prevEl: 'swiper-button-prev'
+        });
+        if (!(params.nextEl || params.prevEl)) return;
+        let nextEl = getEl(params.nextEl);
+        let prevEl = getEl(params.prevEl);
+        Object.assign(swiper.navigation, {
+          nextEl,
+          prevEl
+        });
+        nextEl = makeElementsArray(nextEl);
+        prevEl = makeElementsArray(prevEl);
+        const initButton = (el, dir) => {
+          if (el) {
+            el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
+          }
+          if (!swiper.enabled && el) {
+            el.classList.add(...params.lockClass.split(' '));
+          }
+        };
+        nextEl.forEach(el => initButton(el, 'next'));
+        prevEl.forEach(el => initButton(el, 'prev'));
+      }
+      function destroy() {
+        let {
+          nextEl,
+          prevEl
+        } = swiper.navigation;
+        nextEl = makeElementsArray(nextEl);
+        prevEl = makeElementsArray(prevEl);
+        const destroyButton = (el, dir) => {
+          el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
+          el.classList.remove(...swiper.params.navigation.disabledClass.split(' '));
+        };
+        nextEl.forEach(el => destroyButton(el, 'next'));
+        prevEl.forEach(el => destroyButton(el, 'prev'));
+      }
+      on('init', () => {
+        if (swiper.params.navigation.enabled === false) {
+          // eslint-disable-next-line
+          disable();
+        } else {
+          init();
+          update();
+        }
+      });
+      on('toEdge fromEdge lock unlock', () => {
+        update();
+      });
+      on('destroy', () => {
+        destroy();
+      });
+      on('enable disable', () => {
+        let {
+          nextEl,
+          prevEl
+        } = swiper.navigation;
+        nextEl = makeElementsArray(nextEl);
+        prevEl = makeElementsArray(prevEl);
+        if (swiper.enabled) {
+          update();
+          return;
+        }
+        [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.add(swiper.params.navigation.lockClass));
+      });
+      on('click', (_s, e) => {
+        let {
+          nextEl,
+          prevEl
+        } = swiper.navigation;
+        nextEl = makeElementsArray(nextEl);
+        prevEl = makeElementsArray(prevEl);
+        const targetEl = e.target;
+        let targetIsButton = prevEl.includes(targetEl) || nextEl.includes(targetEl);
+        if (swiper.isElement && !targetIsButton) {
+          const path = e.path || e.composedPath && e.composedPath();
+          if (path) {
+            targetIsButton = path.find(pathEl => nextEl.includes(pathEl) || prevEl.includes(pathEl));
+          }
+        }
+        if (swiper.params.navigation.hideOnClick && !targetIsButton) {
+          if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
+          let isHidden;
+          if (nextEl.length) {
+            isHidden = nextEl[0].classList.contains(swiper.params.navigation.hiddenClass);
+          } else if (prevEl.length) {
+            isHidden = prevEl[0].classList.contains(swiper.params.navigation.hiddenClass);
+          }
+          if (isHidden === true) {
+            emit('navigationShow');
+          } else {
+            emit('navigationHide');
+          }
+          [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.toggle(swiper.params.navigation.hiddenClass));
+        }
+      });
+      const enable = () => {
+        swiper.el.classList.remove(...swiper.params.navigation.navigationDisabledClass.split(' '));
+        init();
+        update();
+      };
+      const disable = () => {
+        swiper.el.classList.add(...swiper.params.navigation.navigationDisabledClass.split(' '));
+        destroy();
+      };
+      Object.assign(swiper.navigation, {
+        enable,
+        disable,
+        update,
+        init,
+        destroy
+      });
+    }
+
     function classesToSelector(classes) {
       if (classes === void 0) {
         classes = '';
@@ -3807,6 +4127,374 @@
       });
     }
 
+    function A11y(_ref) {
+      let {
+        swiper,
+        extendParams,
+        on
+      } = _ref;
+      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;
+      let preventFocusHandler;
+      let focusTargetSlideEl;
+      let visibilityChangedTimestamp = new Date().getTime();
+      function notify(message) {
+        const notification = liveRegion;
+        if (notification.length === 0) return;
+        notification.innerHTML = '';
+        notification.innerHTML = message;
+      }
+      function getRandomNumber(size) {
+        if (size === void 0) {
+          size = 16;
+        }
+        const randomChar = () => Math.round(16 * Math.random()).toString(16);
+        return 'x'.repeat(size).replace(/x/g, randomChar);
+      }
+      function makeElFocusable(el) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('tabIndex', '0');
+        });
+      }
+      function makeElNotFocusable(el) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('tabIndex', '-1');
+        });
+      }
+      function addElRole(el, role) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('role', role);
+        });
+      }
+      function addElRoleDescription(el, description) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('aria-roledescription', description);
+        });
+      }
+      function addElControls(el, controls) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('aria-controls', controls);
+        });
+      }
+      function addElLabel(el, label) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('aria-label', label);
+        });
+      }
+      function addElId(el, id) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('id', id);
+        });
+      }
+      function addElLive(el, live) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('aria-live', live);
+        });
+      }
+      function disableEl(el) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('aria-disabled', true);
+        });
+      }
+      function enableEl(el) {
+        el = makeElementsArray(el);
+        el.forEach(subEl => {
+          subEl.setAttribute('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.pagination && swiper.pagination.el && (targetEl === swiper.pagination.el || swiper.pagination.el.contains(e.target))) {
+          if (!e.target.matches(classesToSelector(swiper.params.pagination.bulletClass))) return;
+        }
+        if (swiper.navigation && swiper.navigation.prevEl && swiper.navigation.nextEl) {
+          const prevEls = makeElementsArray(swiper.navigation.prevEl);
+          const nextEls = makeElementsArray(swiper.navigation.nextEl);
+          if (nextEls.includes(targetEl)) {
+            if (!(swiper.isEnd && !swiper.params.loop)) {
+              swiper.slideNext();
+            }
+            if (swiper.isEnd) {
+              notify(params.lastSlideMessage);
+            } else {
+              notify(params.nextSlideMessage);
+            }
+          }
+          if (prevEls.includes(targetEl)) {
+            if (!(swiper.isBeginning && !swiper.params.loop)) {
+              swiper.slidePrev();
+            }
+            if (swiper.isBeginning) {
+              notify(params.firstSlideMessage);
+            } else {
+              notify(params.prevSlideMessage);
+            }
+          }
+        }
+        if (swiper.pagination && targetEl.matches(classesToSelector(swiper.params.pagination.bulletClass))) {
+          targetEl.click();
+        }
+      }
+      function updateNavigation() {
+        if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
+        const {
+          nextEl,
+          prevEl
+        } = swiper.navigation;
+        if (prevEl) {
+          if (swiper.isBeginning) {
+            disableEl(prevEl);
+            makeElNotFocusable(prevEl);
+          } else {
+            enableEl(prevEl);
+            makeElFocusable(prevEl);
+          }
+        }
+        if (nextEl) {
+          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.forEach(bulletEl => {
+          if (swiper.params.pagination.clickable) {
+            makeElFocusable(bulletEl);
+            if (!swiper.params.pagination.renderBullet) {
+              addElRole(bulletEl, 'button');
+              addElLabel(bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, elementIndex(bulletEl) + 1));
+            }
+          }
+          if (bulletEl.matches(classesToSelector(swiper.params.pagination.bulletActiveClass))) {
+            bulletEl.setAttribute('aria-current', 'true');
+          } else {
+            bulletEl.removeAttribute('aria-current');
+          }
+        });
+      }
+      const initNavEl = (el, wrapperId, message) => {
+        makeElFocusable(el);
+        if (el.tagName !== 'BUTTON') {
+          addElRole(el, 'button');
+          el.addEventListener('keydown', onEnterOrSpaceKey);
+        }
+        addElLabel(el, message);
+        addElControls(el, wrapperId);
+      };
+      const handlePointerDown = e => {
+        if (focusTargetSlideEl && focusTargetSlideEl !== e.target && !focusTargetSlideEl.contains(e.target)) {
+          preventFocusHandler = true;
+        }
+        swiper.a11y.clicked = true;
+      };
+      const handlePointerUp = () => {
+        preventFocusHandler = false;
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            if (!swiper.destroyed) {
+              swiper.a11y.clicked = false;
+            }
+          });
+        });
+      };
+      const onVisibilityChange = e => {
+        visibilityChangedTimestamp = new Date().getTime();
+      };
+      const handleFocus = e => {
+        if (swiper.a11y.clicked) return;
+        if (new Date().getTime() - visibilityChangedTimestamp < 100) return;
+        const slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
+        if (!slideEl || !swiper.slides.includes(slideEl)) return;
+        focusTargetSlideEl = slideEl;
+        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;
+        }
+        requestAnimationFrame(() => {
+          if (preventFocusHandler) return;
+          if (swiper.params.loop) {
+            swiper.slideToLoop(parseInt(slideEl.getAttribute('data-swiper-slide-index')), 0);
+          } else {
+            swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
+          }
+          preventFocusHandler = false;
+        });
+      };
+      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.slides.length;
+        if (params.slideLabelMessage) {
+          swiper.slides.forEach((slideEl, index) => {
+            const slideIndex = swiper.params.loop ? parseInt(slideEl.getAttribute('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.getAttribute('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,
+          prevEl
+        } = swiper.navigation ? swiper.navigation : {};
+        nextEl = makeElementsArray(nextEl);
+        prevEl = makeElementsArray(prevEl);
+        if (nextEl) {
+          nextEl.forEach(el => initNavEl(el, wrapperId, params.nextSlideMessage));
+        }
+        if (prevEl) {
+          prevEl.forEach(el => initNavEl(el, wrapperId, params.prevSlideMessage));
+        }
+
+        // Pagination
+        if (hasClickablePagination()) {
+          const paginationEl = makeElementsArray(swiper.pagination.el);
+          paginationEl.forEach(el => {
+            el.addEventListener('keydown', onEnterOrSpaceKey);
+          });
+        }
+
+        // Tab focus
+        const document = getDocument();
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        swiper.el.addEventListener('focus', handleFocus, true);
+        swiper.el.addEventListener('focus', handleFocus, true);
+        swiper.el.addEventListener('pointerdown', handlePointerDown, true);
+        swiper.el.addEventListener('pointerup', handlePointerUp, true);
+      };
+      function destroy() {
+        if (liveRegion) liveRegion.remove();
+        let {
+          nextEl,
+          prevEl
+        } = swiper.navigation ? swiper.navigation : {};
+        nextEl = makeElementsArray(nextEl);
+        prevEl = makeElementsArray(prevEl);
+        if (nextEl) {
+          nextEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
+        }
+        if (prevEl) {
+          prevEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
+        }
+
+        // Pagination
+        if (hasClickablePagination()) {
+          const paginationEl = makeElementsArray(swiper.pagination.el);
+          paginationEl.forEach(el => {
+            el.removeEventListener('keydown', onEnterOrSpaceKey);
+          });
+        }
+        const document = getDocument();
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+        // Tab focus
+        if (swiper.el && typeof swiper.el !== 'string') {
+          swiper.el.removeEventListener('focus', handleFocus, true);
+          swiper.el.removeEventListener('pointerdown', handlePointerDown, true);
+          swiper.el.removeEventListener('pointerup', handlePointerUp, true);
+        }
+      }
+      on('beforeInit', () => {
+        liveRegion = createElement('span', swiper.params.a11y.notificationClass);
+        liveRegion.setAttribute('aria-live', 'assertive');
+        liveRegion.setAttribute('aria-atomic', 'true');
+      });
+      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();
+      });
+    }
+
     /* eslint no-underscore-dangle: "off" */
     /* eslint no-use-before-define: "off" */
     function Autoplay(_ref) {
@@ -8990,13 +9678,13 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-11-02 18:34:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-11-19 14:28:41
+     * @LastEditTime: 2024-11-20 18:37:10
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
      *
      */
     const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
     const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
         const touchRef = React.useRef(null);
         const fTouchRef = React.useRef(null);
         const touchMoveRef = React.useRef(null);
@@ -9051,7 +9739,7 @@
         }, [_popup, openState, globalConfig]);
         React.useEffect(() => {
             const trapFocus = (element) => {
-                var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
+                var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
                 var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
                 var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
                 var KEYCODE_TAB = 9;
@@ -9174,7 +9862,7 @@
                         }
                     })), child()),
                     React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
-                        React.createElement("img", { src: (_0 = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _0 !== void 0 ? _0 : closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
+                        React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon$1, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
     };
     var Modal$1 = React.memo(Modal);
 
@@ -9441,7 +10129,8 @@
         const [showModal, setShowModal] = React.useState(false);
         const [show3DModal, setShow3DModal] = React.useState(false);
         const [checkCommodityIndex, setCheckCommodityIndex] = React.useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
-        const ref = React.useRef();
+        const swiperRef = React.useRef();
+        const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
         const data = isPost ? rec : popupDetailData;
         let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
         let cta = isPost
@@ -9532,9 +10221,9 @@
             popupCurTimeRef.current = new Date();
             setCheckCommodityIndex(index);
             checkCommodityIndexRef.current = index;
-            if (ref === null || ref === void 0 ? void 0 : ref.current) {
-                ref.current.swiper.slideTo(0);
-                ref.current.swiper.autoplay.start();
+            if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
+                swiperRef.current.swiper.slideTo(0);
+                swiperRef.current.swiper.autoplay.start();
             }
         }, []);
         const renderCommodityGroup = React.useCallback(() => {
@@ -9552,19 +10241,40 @@
             return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
         }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
         const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
+        const handleMouseEnter = React.useCallback(() => {
+            if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+                swiperRef.current.swiper.autoplay.stop();
+            }
+        }, []);
+        const handleMouseLeave = React.useCallback(() => {
+            if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+                swiperRef.current.swiper.autoplay.start();
+            }
+        }, []);
+        const handleSlideChange = React.useCallback((swiper) => {
+            setSwiperActiveIndex(swiper.activeIndex);
+        }, []);
+        const isAlly = React.useMemo(() => getScreenReader(), []);
         return (React.createElement(React.Fragment, null,
             React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
-                React.createElement("div", { style: { position: 'relative' } },
-                    product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { a11y: {
-                            enabled: true
-                        }, height: height, modules: [Pagination, Autoplay], pagination: {
+                React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+                    product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
                             clickable: true,
                             bulletActiveClass: 'swipe-item-active-bullet',
                             clickableClass: getDotsAlign,
                             bulletElement: 'button'
-                        }, loop: true, autoplay: {
+                        } }, (isAlly
+                        ? {
+                            mousewheel: true,
+                            keyboard: true,
+                            navigation: true,
+                            a11y: {
+                                enabled: true
+                            }
+                        }
+                        : {}), { loop: true, autoplay: {
                             delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                        }, ref: ref, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
+                        }, ref: swiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': { bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0, fontSize: '14px' } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
                             '.swiper-pagination-bullet': {
                                 backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
                                 opacity: 1
@@ -9574,10 +10284,10 @@
                                 backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
                                 opacity: 1
                             }
-                        }))) },
-                        React.createElement(React.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
+                        }))) }),
+                        React.createElement(React.Fragment, null, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
                             var _a;
-                            return (React.createElement(SwiperSlide, { key: src },
+                            return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
                                 React.createElement("div", { style: {
                                         overflow: 'hidden',
                                         width,
@@ -10330,7 +11040,8 @@
         const curTimeRef = React.useRef(null);
         const [show3DModal, setShow3DModal] = React.useState(false);
         const [checkCommodityIndex, setCheckCommodityIndex] = React.useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
-        const ref = React.useRef();
+        const swiperRef = React.useRef();
+        const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
         const data = isPost ? rec : popupDetailData;
         let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
         let cta = isPost
@@ -10450,9 +11161,9 @@ Made in Italy` })));
             popupCurTimeRef.current = new Date();
             setCheckCommodityIndex(index);
             checkCommodityIndexRef.current = index;
-            if (ref === null || ref === void 0 ? void 0 : ref.current) {
-                ref.current.swiper.slideTo(0);
-                ref.current.swiper.autoplay.start();
+            if (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) {
+                swiperRef.current.swiper.slideTo(0);
+                swiperRef.current.swiper.autoplay.start();
             }
         }, []);
         const renderCommodityGroup = React.useCallback(() => {
@@ -10470,17 +11181,40 @@ Made in Italy` })));
             return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
         }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
         const iframeUrl = product === null || product === void 0 ? void 0 : product.remark;
+        const handleMouseEnter = React.useCallback(() => {
+            if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+                swiperRef.current.swiper.autoplay.stop();
+            }
+        }, []);
+        const handleMouseLeave = React.useCallback(() => {
+            if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+                swiperRef.current.swiper.autoplay.start();
+            }
+        }, []);
+        const handleSlideChange = React.useCallback((swiper) => {
+            setSwiperActiveIndex(swiper.activeIndex);
+        }, []);
+        const isAlly = React.useMemo(() => getScreenReader(), []);
         return (React.createElement("div", { className: 'pb-commondityDiroNew' },
             React.createElement("div", Object.assign({ className: css.css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
-                React.createElement("div", { style: { position: 'relative' } },
-                    product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
+                React.createElement("div", { style: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+                    product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, Object.assign({ height: height, modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
                             clickable: true,
                             bulletActiveClass: 'swipe-item-active-bullet',
                             clickableClass: getDotsAlign,
                             bulletElement: 'button'
-                        }, loop: true, autoplay: {
+                        } }, (isAlly
+                        ? {
+                            mousewheel: true,
+                            keyboard: true,
+                            navigation: true,
+                            a11y: {
+                                enabled: true
+                            }
+                        }
+                        : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, autoplay: {
                             delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                        }, ref: ref, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
+                        }, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
                                 bottom: (_x = swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) !== null && _x !== void 0 ? _x : 0,
                                 fontSize: '14px'
                             } }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
@@ -10493,9 +11227,9 @@ Made in Italy` })));
                                 backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
                                 opacity: 1
                             }
-                        }))) }, (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src) => {
+                        }))) }), (_y = product === null || product === void 0 ? void 0 : product.homePage) === null || _y === void 0 ? void 0 : _y.map((src, srcKey) => {
                         var _a;
-                        return (React.createElement(SwiperSlide, { key: src },
+                        return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
                             React.createElement("div", { style: {
                                     overflow: 'hidden',
                                     width,
@@ -15401,7 +16135,7 @@ Made in Italy` })));
 
     const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
     const AniLinkPopup$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
         var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false, isActive } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink", "isActive"]);
         style === null || style === void 0 ? true : delete style.transform;
         const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
@@ -15458,12 +16192,12 @@ Made in Italy` })));
                 paddingLeft: '6px'
             } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${css.css(Object.assign(Object.assign({}, style), { '--transY': `translateY(calc(100% + ${(_r = style === null || style === void 0 ? void 0 : style.margin) !== null && _r !== void 0 ? _r : 0}px))` }))} ${styles['aniLinkPopup']} ${aniNamStyle}  ${css.css(aniTimStyle)}`, onClick: handleTo }),
             React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
-                React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
-            React.createElement(Img$1, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
+                React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
             (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                    __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                    __html: setFontForText((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
                 } })),
-            React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
+            React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_z = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _z === void 0 ? void 0 : _z.height) + 'px' }), dangerouslySetInnerHTML: {
                     __html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                 } })))));
     };
@@ -16475,15 +17209,16 @@ Made in Italy` })));
 
     const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
         var _a, _b;
-        const ref = React.useRef();
+        const swiperRef = React.useRef();
         const { isActive } = useSwiperSlide();
         const { sxpParameter, openHashtag } = useSxpDataSource();
         const [isLoad, setIsLoad] = React.useState(false);
         const [imgInfo, setImgInfo] = React.useState();
         const initTime = new Date();
+        const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
         React.useEffect(() => {
             if (isLoad && isActive) {
-                (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
+                (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
                 if (openHashtag) {
                     onViewImageEndEvent(rec);
                 }
@@ -16492,7 +17227,7 @@ Made in Italy` })));
                 }
             }
             else {
-                (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
+                (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
             }
         }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
         const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -16516,27 +17251,51 @@ Made in Italy` })));
                 SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
             };
         }, [imgInfo]);
-        return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
-                clickable: true,
-                bulletActiveClass: 'swipe-item-active-bullet',
-                bulletElement: 'button'
-            }, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
-                    bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
-                    fontSize: '14px'
-                } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
-                '.swiper-pagination-bullet': {
-                    backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
-                    opacity: 1
-                }
-            })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
-                '.swipe-item-active-bullet': {
-                    backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
-                    opacity: 1
+        const handleMouseEnter = React.useCallback(() => {
+            if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+                swiperRef.current.swiper.autoplay.stop();
+            }
+        }, []);
+        const handleMouseLeave = React.useCallback(() => {
+            if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+                swiperRef.current.swiper.autoplay.start();
+            }
+        }, []);
+        const handleSlideChange = React.useCallback((swiper) => {
+            setSwiperActiveIndex(swiper.activeIndex);
+        }, []);
+        const isAlly = React.useMemo(() => getScreenReader(), []);
+        return (React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+            React.createElement(Swiper, Object.assign({ defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay, ...(isAlly ? [Navigation, A11y, Mousewheel, Keyboard] : [])], pagination: {
+                    clickable: true,
+                    bulletActiveClass: 'swipe-item-active-bullet',
+                    bulletElement: 'button'
+                } }, (isAlly
+                ? {
+                    mousewheel: true,
+                    keyboard: true,
+                    navigation: true,
+                    a11y: {
+                        enabled: true
+                    }
                 }
-            }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
-            return (React.createElement(SwiperSlide, { key: index },
-                React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
-        })));
+                : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
+                        bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
+                        fontSize: '14px'
+                    } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
+                    '.swiper-pagination-bullet': {
+                        backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
+                        opacity: 1
+                    }
+                })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
+                    '.swipe-item-active-bullet': {
+                        backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
+                        opacity: 1
+                    }
+                }))), height: height, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }), imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, srcKey) => {
+                return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
+                    React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
+            }))));
     };
     var PictureGroup$3 = React.memo(PictureGroup$2);