pb-sxp-ui 1.9.0 → 1.9.2

package/es/core/components/SxpPageRender/ExpandableText.js

@@ -50,7 +50,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                 wordBreak: 'break-word'
             }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
         React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
-        text && isPost && isShow && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
+        text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
                 __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
             } }))));
 };

package/es/core/components/SxpPageRender/Hashtag/index.js

@@ -40,7 +40,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle, hashTagRigh
             marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px`,
             width: hashTagRightMargin
         } },
-        React.createElement(Scroll, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'button', "aria-label": item },
-            React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
+        React.createElement(Scroll, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'li', role: 'listitem' },
+            React.createElement("button", { className: 'clc-sxp-bottom-hashtag-item-button', "aria-label": item, "aria-describedby": item, dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
 };
 export default memo(Hashtag);

package/es/core/components/SxpPageRender/Modal/index.js

@@ -4,11 +4,12 @@ import * as ReactDOM from 'react-dom';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 const closeIcon = '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 = useRef(null);
     const fTouchRef = useRef(null);
     const touchMoveRef = useRef(null);
     const ref = useRef(null);
+    const modalRef = useRef(null);
     const MODAL_DEF_TRANS = fullHeight * 0.2;
     const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
     const [modalTrans, setModalTrans] = useState(MODAL_DEF_TRANS);
@@ -56,6 +57,43 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
     const child = useCallback(() => {
         return children;
     }, [_popup, openState, globalConfig]);
+    useEffect(() => {
+        const trapFocus = (element) => {
+            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;
+            element.addEventListener('keydown', function (e) {
+                if (e.key === 'Escape' || e.key === 'Esc') {
+                    handleClose();
+                    e.preventDefault();
+                }
+                var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
+                if (!isTabPressed) {
+                    return;
+                }
+                if (e.shiftKey) {
+                    if ((document === null || document === void 0 ? void 0 : document.activeElement) === firstFocusableEl) {
+                        lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
+                        e.preventDefault();
+                    }
+                }
+                else {
+                    if ((document === null || document === void 0 ? void 0 : document.activeElement) === lastFocusableEl) {
+                        firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+                        e.preventDefault();
+                    }
+                }
+            });
+            firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+        };
+        if (modalRef === null || modalRef === void 0 ? void 0 : modalRef.current)
+            trapFocus(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current);
+        return () => {
+            var _a;
+            (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', trapFocus);
+        };
+    }, [modalRef, isShow, _popup]);
     if (!modalEleRef.current)
         return null;
     const handleClose = debounce(() => {
@@ -117,7 +155,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                 width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
                 height: '100%'
             } },
-            React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, role: 'dialog', "aria-label": (_s = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _s === void 0 ? void 0 : _s.displayName, "aria-modal": true, style: Object.assign(Object.assign({ padding, animationDuration: ((_t = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _t !== void 0 ? _t : 0) / 1000 + 's' }, (isScrollFullScreen && {
+            React.createElement("div", Object.assign({ ref: modalRef, className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, role: 'dialog', "aria-label": (_s = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _s === void 0 ? void 0 : _s.displayName, "aria-modal": true, "aria-labelledby": 'modal-content', style: Object.assign(Object.assign({ padding, animationDuration: ((_t = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _t !== void 0 ? _t : 0) / 1000 + 's' }, (isScrollFullScreen && {
                     transform: `translateY(${modalTrans}px)`
                 })), { overflow: 'hidden', borderRadius: `${(_x = (_w = (_v = (_u = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _u === void 0 ? void 0 : _u.props) === null || _v === void 0 ? void 0 : _v.popupBg) === null || _w === void 0 ? void 0 : _w.borderRadius) !== null && _x !== void 0 ? _x : 0}px`, zIndex: 9 }), onClick: (e) => {
                     e.stopPropagation();
@@ -127,17 +165,17 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                 onTouchStart: handleTouchStart,
                 onTouchEnd: handleTouchEnd
             })),
-                React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
-                    React.createElement("img", { src: (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _y !== void 0 ? _y : closeIcon, alt: 'close button', className: 'modal-icon' })),
-                React.createElement("div", Object.assign({ ref: ref, style: {
+                React.createElement("div", Object.assign({ id: 'modal-content', ref: ref, style: {
                         height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
                         overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
                         zIndex: 1
-                    } }, (((_0 = (_z = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _z === void 0 ? void 0 : _z.props) === null || _0 === void 0 ? void 0 : _0.enableFixedCloseButton) && {
+                    } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
                     onScroll: (e) => {
                         var _a;
                         setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
                     }
-                })), child())))))), modalEleRef.current);
+                })), child()),
+                React.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
+                    React.createElement("img", { src: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) || closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
 };
 export default memo(Modal);

package/es/core/components/SxpPageRender/PictureGroup/index.js

@@ -1,22 +1,24 @@
 import { __awaiter } from "tslib";
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { Autoplay, Pagination } from 'swiper/modules';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
 import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
 import Picture from './Picture';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { css } from '@emotion/css';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
+import { getScreenReader } from '../../../../core/utils/tool';
 const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
     var _a, _b;
-    const ref = useRef();
+    const swiperRef = useRef();
     const { isActive } = useSwiperSlide();
     const { sxpParameter, openHashtag } = useSxpDataSource();
     const [isLoad, setIsLoad] = useState(false);
     const [imgInfo, setImgInfo] = useState();
     const initTime = new Date();
+    const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
     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);
             }
@@ -25,7 +27,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
             }
         }
         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 = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -46,26 +48,50 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
             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(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 = useCallback(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.stop();
+        }
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.start();
+        }
+    }, []);
+    const handleSlideChange = useCallback((swiper) => {
+        setSwiperActiveIndex(swiper.activeIndex);
+    }, []);
+    const isAlly = 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(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 })));
+        }))));
 };
 export default memo(PictureGroup);

package/es/core/components/SxpPageRender/index.js

@@ -493,9 +493,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     alignItems: 'center'
                 } },
                 React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
+                renderBottom(rec, index),
                 renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
                 renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
-                renderBottom(rec, index),
                 renderContent(rec, index)))))));
         });
     }, [
@@ -561,9 +561,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     }
                 }
             }, direction: 'vertical', height: height },
+            renderView,
             renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
-            renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
-            renderView),
+            renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
         React.createElement(WaterFall, Object.assign({}, (_w = (_v = (_u = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.item) === null || _w === void 0 ? void 0 : _w.props)),
         React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig })));
 };

package/es/core/hooks/useFocusTrap.d.ts

@@ -0,0 +1,2 @@
+declare const useFocusTrap: (elementRef: any) => void;
+export default useFocusTrap;

package/es/core/hooks/useFocusTrap.js

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+const useFocusTrap = (elementRef) => {
+    useEffect(() => {
+        const trapFocus = (element) => {
+            var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('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;
+            element.addEventListener('keydown', function (e) {
+                var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
+                if (!isTabPressed) {
+                    return;
+                }
+                if (e.shiftKey) {
+                    if ((document === null || document === void 0 ? void 0 : document.activeElement) === firstFocusableEl) {
+                        lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
+                        e.preventDefault();
+                    }
+                }
+                else {
+                    if ((document === null || document === void 0 ? void 0 : document.activeElement) === lastFocusableEl) {
+                        firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+                        e.preventDefault();
+                    }
+                }
+            });
+            firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
+        };
+        if (elementRef === null || elementRef === void 0 ? void 0 : elementRef.current)
+            trapFocus(elementRef === null || elementRef === void 0 ? void 0 : elementRef.current);
+        return () => {
+            var _a;
+            (_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', trapFocus);
+        };
+    }, [elementRef]);
+};
+export default useFocusTrap;

package/es/core/utils/tool.d.ts

@@ -11,4 +11,5 @@ declare function getBrowserInfo(): string | null;
 declare function getSystem(): string | null;
 declare function getDevice(): string | null;
 declare function getCookie(val: string): string;
-export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
+declare function getScreenReader(): boolean;
+export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };

package/es/core/utils/tool.js

@@ -156,4 +156,15 @@ function getCookie(val) {
     });
     return value !== null && value !== void 0 ? value : '';
 }
-export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
+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));
+}
+export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getScreenReader };

package/es/index.d.ts

@@ -1,4 +1,5 @@
 import { Pagebuilder } from './core/Pagebuilder';
+import './index.css';
 export * as core from './core';
 export * as materials from './materials';
 export { default as SxpPageRender } from './core/components/SxpPageRender';

package/es/index.js

@@ -1,4 +1,5 @@
 import { Pagebuilder } from './core/Pagebuilder';
+import './index.css';
 import * as core_1 from './core';
 export { core_1 as core };
 import * as materials_1 from './materials';

package/es/materials/sxp/cta/AniLinkPopup/index.js

@@ -8,7 +8,7 @@ import { setFontForText } from '../../../../core/utils/tool';
 import styles from './index.module.less';
 const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
 const AniLinkPopup = (_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();
@@ -65,12 +65,12 @@ const AniLinkPopup = (_a) => {
             paddingLeft: '6px'
         } }, "Cta Title")) : (React.createElement("div", Object.assign({}, props, { className: `${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(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, { 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, { 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)
             } })))));
 };

package/es/materials/sxp/popup/CommodityDetail/index.js

@@ -3,13 +3,13 @@ import { css } from '@emotion/css';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSxpDataSource } from '../../../../core/hooks';
 import './index.less';
-import { Autoplay, Pagination } from 'swiper/modules';
+import { A11y, Autoplay, Keyboard, Mousewheel, Navigation, Pagination } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import Modal from '../../../../core/components/SxpPageRender/Modal';
 import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
 import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
-import { setFontForText } from '../../../../core/utils/tool';
+import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
 import CommodityGroup from '../../template/components/CommodityGroup';
 import { getPriceText } from '../../../../core/utils/materials';
 const CommodityDetail = (_a) => {
@@ -21,7 +21,8 @@ const CommodityDetail = (_a) => {
     const [showModal, setShowModal] = useState(false);
     const [show3DModal, setShow3DModal] = useState(false);
     const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
-    const ref = useRef();
+    const swiperRef = useRef();
+    const [swiperActiveIndex, setSwiperActiveIndex] = 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
@@ -97,7 +98,7 @@ const CommodityDetail = (_a) => {
     };
     const renderBtn = () => {
         var _a, _b;
-        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
+        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("a", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
             React.createElement("span", { dangerouslySetInnerHTML: {
                     __html: setFontForText((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
                 } })))));
@@ -112,9 +113,9 @@ const CommodityDetail = (_a) => {
         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 = useCallback(() => {
@@ -132,17 +133,40 @@ const CommodityDetail = (_a) => {
         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 = useCallback(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.stop();
+        }
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.start();
+        }
+    }, []);
+    const handleSlideChange = useCallback((swiper) => {
+        setSwiperActiveIndex(swiper.activeIndex);
+    }, []);
+    const isAlly = useMemo(() => getScreenReader(), []);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({ className: 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, { 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(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(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
@@ -152,10 +176,10 @@ const CommodityDetail = (_a) => {
                             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,

package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -3,13 +3,13 @@ import { css } from '@emotion/css';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSxpDataSource } from '../../../../core/hooks';
 import './index.less';
-import { Autoplay, Pagination } from 'swiper/modules';
+import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import Modal from '../../../../core/components/SxpPageRender/Modal';
 import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
-import { setFontForText } from '../../../../core/utils/tool';
+import { getScreenReader, setFontForText } from '../../../../core/utils/tool';
 import CommodityGroup from '../../template/components/CommodityGroup';
 import { getPriceText } from '../../../../core/utils/materials';
 const CommodityDetailDiroNew = (_a) => {
@@ -25,7 +25,8 @@ const CommodityDetailDiroNew = (_a) => {
     const curTimeRef = useRef(null);
     const [show3DModal, setShow3DModal] = useState(false);
     const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
-    const ref = useRef();
+    const swiperRef = useRef();
+    const [swiperActiveIndex, setSwiperActiveIndex] = 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
@@ -98,9 +99,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 = useCallback(() => {
@@ -118,17 +119,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 = useCallback(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.stop();
+        }
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        if (swiperRef.current && swiperRef.current.swiper && isAlly) {
+            swiperRef.current.swiper.autoplay.start();
+        }
+    }, []);
+    const handleSlideChange = useCallback((swiper) => {
+        setSwiperActiveIndex(swiper.activeIndex);
+    }, []);
+    const isAlly = useMemo(() => getScreenReader(), []);
     return (React.createElement("div", { className: 'pb-commondityDiroNew' },
         React.createElement("div", Object.assign({ className: 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(Object.assign(Object.assign({ '.swiper-pagination': {
+                    }, className: 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) && {
@@ -141,9 +165,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,
@@ -194,7 +218,7 @@ Made in Italy` })));
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
                                 __html: setFontForText((_2 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _2 !== void 0 ? _2 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                             } }))),
-                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("a", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
                     React.createElement("span", { dangerouslySetInnerHTML: {
                             __html: setFontForText((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
                         } }))),