@royaloperahouse/harmonic 0.4.0 → 0.4.1

package/dist/components/molecules/Swipe/Swipe.d.ts

@@ -7,6 +7,7 @@ declare const Swipe: React.ForwardRefExoticComponent<{
     children: React.ReactNode[];
     infinite?: boolean | undefined;
     slidesOffsetBefore?: number | undefined;
+    slidesAriaHidden?: boolean | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
     onActiveChange?: ((value: boolean) => void) | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SwipeRef>>;

package/dist/components/molecules/Swipe/helper.d.ts

@@ -1,2 +1,4 @@
+export declare const disableTabbingInside: (element: HTMLElement | null, shouldDisable: boolean) => void;
+export declare const isCloneSlide: (index: number, clonesCount: number, childrenLength: number, infinite: boolean) => boolean;
 export declare const getVisibleIndexes: (currentIndex: number, slideWidths: number[], containerWidth: number, slidesLength: number) => number[];
 export declare const getMovedSlides: (delta: number, slideWidths: number[]) => number;

package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
     setCurrentSlide: React.Dispatch<React.SetStateAction<number>>;
     carouselRef: React.RefObject<SwipeRef>;
     hasMultipleSlides: boolean;
+    carouselTitle?: string;
 };
 declare const SwipeCarousel: FunctionComponent<Props>;
 export default SwipeCarousel;

package/dist/harmonic.cjs.development.css

@@ -848,6 +848,7 @@
   --base-color-primary: #1a1a1a;
   --color-primary: #1a1a1a;
   --color-primary-button: #ffffff;
+  --color-primary-background: #1a1a1a;
   --color-primary-button-reverse-bg: #ffffff;
   --color-primary-button-reverse: #1a1a1a;
   --color-secondary-button: #ffffff;

package/dist/harmonic.cjs.development.js

@@ -2686,7 +2686,7 @@ var Icon = /*#__PURE__*/React.memo(function (props) {
 });
 Icon.displayName = 'Icon';
 
-var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className"];
+var _excluded$2 = ["children", "iconName", "iconDirection", "iconClassName", "color", "className", "href", "onClick"];
 var Button = function Button(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
@@ -2694,9 +2694,18 @@ var Button = function Button(_ref) {
     iconClassName = _ref.iconClassName,
     color = _ref.color,
     className = _ref.className,
+    href = _ref.href,
+    onClick = _ref.onClick,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var truncatedString = children.substring(0, 30);
+  var handleClick = function handleClick(e) {
+    if (href) return;
+    e.preventDefault();
+    onClick == null || onClick(e);
+  };
   return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
+    href: href != null ? href : '#',
+    onClick: handleClick,
     color: color,
     iconName: iconName,
     className: className
@@ -4647,15 +4656,12 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
 var Tickbox2 = /*#__PURE__*/React.forwardRef(Tickbox2Component);
 
 var _templateObject$s, _templateObject2$k, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7$1, _templateObject8;
-var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-", ");\n\n  .color-primary {\n    color: var(--color-base-", ");\n  }\n"])), function (_ref) {
+var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-", ");\n"])), function (_ref) {
   var color = _ref.color;
   return color;
-}, function (_ref2) {
-  var color = _ref2.color;
-  return color;
 });
-var Line = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: var(--base-color-", ");\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 20px;\n  }\n"])), function (_ref3) {
-  var color = _ref3.color;
+var Line = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: var(--color-", ");\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 20px;\n  }\n"])), function (_ref2) {
+  var color = _ref2.color;
   return color;
 }, devices.mobileAndTablet);
 var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 16px;\n\n  @media ", " {\n    margin-bottom: 8px;\n  }\n"])), devices.mobileAndTablet);
@@ -4672,7 +4678,7 @@ var Timer = function Timer(_ref) {
     _ref$bottomLine = _ref.bottomLine,
     bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? exports.Colors.Black : _ref$color;
+    color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
   var _React$useState = React__default.useState('00'),
     seconds = _React$useState[0],
     setSeconds = _React$useState[1];
@@ -4695,13 +4701,16 @@ var Timer = function Timer(_ref) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
       className: "harmonic-timer-value"
     }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+      color: "inherit",
       hierarchy: "h3",
       size: "medium"
     }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
       className: "harmonic-timer-label"
     }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+      color: "inherit",
       size: "large"
     }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+      color: "inherit",
       hierarchy: "h3",
       size: "medium"
     }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
@@ -4745,6 +4754,7 @@ var Timer = function Timer(_ref) {
   }, title && (/*#__PURE__*/React__default.createElement(TitleWrapper, {
     className: "harmonic-timer-title-wrapper"
   }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
+    color: "inherit",
     size: "large"
   }, title))), /*#__PURE__*/React__default.createElement(ValuesWrapper, {
     className: "harmonic-timer-values-wrapper"
@@ -5223,14 +5233,15 @@ var useMobile = function useMobile() {
 };
 var useViewport = function useViewport() {
   var _useState3 = React.useState({
-      width: window.innerWidth,
-      isMobile: window.innerWidth < breakpoints.sm,
-      isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
-      isDesktop: window.innerWidth >= breakpoints.md
+      width: typeof window !== 'undefined' ? window.innerWidth : 0,
+      isMobile: typeof window !== 'undefined' ? window.innerWidth < breakpoints.sm : false,
+      isTablet: typeof window !== 'undefined' ? window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md : false,
+      isDesktop: typeof window !== 'undefined' ? window.innerWidth >= breakpoints.md : false
     }),
     viewport = _useState3[0],
     setViewport = _useState3[1];
   React.useEffect(function () {
+    if (typeof window === 'undefined') return undefined;
     var handleResize = function handleResize() {
       setViewport({
         width: window.innerWidth,
@@ -7519,6 +7530,17 @@ var generateDomElementId = function generateDomElementId() {
   return randomPart + "-" + datePart;
 };
 
+var DISABLED_TABBING_TAGS = 'a, button';
+var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
+  if (!element) return;
+  var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
+  focusables.forEach(function (el) {
+    if (shouldDisable) el.setAttribute('tabindex', '-1');
+  });
+};
+var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
+  return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
+};
 var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
   var widthSoFar = 0;
   var visible = [];
@@ -7548,7 +7570,7 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
   return movedSlides;
 };
 
-var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "onActiveChange"];
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange"];
 var MAX_CLONES_NUMBER = 6;
 var CLICK_DRAG_THRESHOLD = 10;
 var getClonesCount = function getClonesCount(infinite, childrenLength) {
@@ -7570,6 +7592,8 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onIndexChange = _ref.onIndexChange,
     _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
     slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
+    _ref$slidesAriaHidden = _ref.slidesAriaHidden,
+    slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
     onActiveChange = _ref.onActiveChange,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var containerRef = React.useRef(null);
@@ -7782,11 +7806,13 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
   return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
     ref: containerRef,
+    className: "swipe",
     onTouchStart: handleTouchStart,
     onTouchMove: handleTouchMove,
     onTouchEnd: handleTouchEnd,
     onMouseDown: handleMouseDown,
-    className: "swipe"
+    "aria-roledescription": "carousel",
+    role: "list"
   }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
     className: "swipe-track-wrapper",
     translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
@@ -7794,17 +7820,21 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onTransitionEnd: handleTransitionEnd
   }, slides.map(function (child, index) {
     var isVisible = visibleIndexes.includes(index);
-    return /*#__PURE__*/React__default.cloneElement(child, {
+    var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
+    return /*#__PURE__*/React__default.createElement("div", {
       key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
-      ariaHidden: !isVisible,
       className: SWIPE_SLIDE_CLASS_NAME,
+      "aria-hidden": slidesAriaHidden || isClone,
+      "aria-roledescription": "slide",
+      role: "listitem",
       ref: function ref(el) {
         childRefs.current[index] = el;
+        disableTabbingInside(el, isClone);
       },
       onFocus: function onFocus() {
         return onSlideFocus(isVisible, index);
       }
-    });
+    }, child);
   })));
 });
 Swipe.displayName = 'Swipe';
@@ -7919,15 +7949,8 @@ var Carousel = function Carousel(_ref) {
     "data-testid": "carousel-swipe",
     ref: swipeRef,
     infinite: infinite,
-    slidesOffsetBefore: slidesOffsetBefore,
-    role: "list",
-    "aria-roledescription": "carousel"
-  }, React__default.Children.toArray(children).map(function (child, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "carousel-slide-" + index,
-      "aria-roledescription": "slide"
-    }, child);
-  })))));
+    slidesOffsetBefore: slidesOffsetBefore
+  }, children))));
 };
 
 var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
@@ -8083,7 +8106,7 @@ var InfoSection = function InfoSection(_ref) {
     className: "highlight-carousel-text",
     size: "large"
   }, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
-    color: exports.Colors.White,
+    color: ThemeColor['base-white'],
     endDateHandler: handleEndDate,
     endDate: timerParams.endDate,
     title: timerParams.title
@@ -8343,65 +8366,68 @@ var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$U || (_temp
   var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
   return !onlyShowButtonsOnHover ? "height: 100%;\n       display: flex;\n       flex-direction: column;\n       justify-content: space-between;  \n    " : '';
 });
-var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 4px;\n  background-color: var(--button-bg-color);\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), zIndexes.contentOverlay);
+var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 4px;\n  background-color: var(--button-bg-color);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref3) {
+  var lineColor = _ref3.lineColor;
+  return lineColor ? "var(--color-" + lineColor + ")" : 'var(--color-primary-background)';
+}, zIndexes.contentOverlay);
 var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -6px;\n"])));
-var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 24px;\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref3) {
-  var fullWidth = _ref3.fullWidth;
-  return fullWidth ? '0' : '20px';
-}, function (_ref4) {
+var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 24px;\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref4) {
   var fullWidth = _ref4.fullWidth;
   return fullWidth ? '0' : '20px';
+}, function (_ref5) {
+  var fullWidth = _ref5.fullWidth;
+  return fullWidth ? '0' : '20px';
 });
 var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 12px 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 12px 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n"])));
 var HighlightTextContainer = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n"])));
 var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 4px;\n  overflow-wrap: break-word;\n"])));
-var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 26px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref5) {
-  var isVisible = _ref5.isVisible;
+var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 25px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
+  var isVisible = _ref6.isVisible;
   return isVisible ? "visible" : 'hidden';
-}, devices.mobile, function (_ref6) {
-  var isGridCard = _ref6.isGridCard;
+}, devices.mobile, function (_ref7) {
+  var isGridCard = _ref7.isGridCard;
   return isGridCard ? '20px' : '0';
 });
-var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 26px;\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref7) {
-  var fullWidth = _ref7.fullWidth;
-  return fullWidth ? '0' : '20px';
-}, function (_ref8) {
+var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 26px;\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref8) {
   var fullWidth = _ref8.fullWidth;
   return fullWidth ? '0' : '20px';
+}, function (_ref9) {
+  var fullWidth = _ref9.fullWidth;
+  return fullWidth ? '0' : '20px';
 });
-var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 26px;\n  padding: 0 8px;\n  background-color: ", ";\n"])), function (_ref9) {
-  var bgColor = _ref9.bgColor;
+var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 26px;\n  padding: 0 8px;\n  background-color: ", ";\n"])), function (_ref10) {
+  var bgColor = _ref10.bgColor;
   return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
 });
 var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
-var getButtonsOpacity = function getButtonsOpacity(_ref10) {
-  var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
+var getButtonsOpacity = function getButtonsOpacity(_ref11) {
+  var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
 };
-var getButtonsMinHeight = function getButtonsMinHeight(_ref11) {
-  var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
+var getButtonsMinHeight = function getButtonsMinHeight(_ref12) {
+  var onlyShowButtonsOnHover = _ref12.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
 };
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 24px;\n  margin-top: 24px;\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref12) {
-  var size = _ref12.size,
-    primaryButtonTextLength = _ref12.primaryButtonTextLength,
-    tertiaryButtonTextLength = _ref12.tertiaryButtonTextLength;
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 24px;\n  margin-top: 24px;\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref13) {
+  var size = _ref13.size,
+    primaryButtonTextLength = _ref13.primaryButtonTextLength,
+    tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
   if (isLinksLayoutColumn) {
     return "\n        flex-direction: column;\n      ";
   }
   return '';
-}, devices.mobile, getButtonsMinHeight, function (_ref13) {
-  var fullWidth = _ref13.fullWidth;
-  return fullWidth ? '0' : '20px';
-}, function (_ref14) {
+}, devices.mobile, getButtonsMinHeight, function (_ref14) {
   var fullWidth = _ref14.fullWidth;
   return fullWidth ? '0' : '20px';
-}, devices.tablet, getButtonsMinHeight, function (_ref15) {
-  var primaryButtonTextLength = _ref15.primaryButtonTextLength,
-    tertiaryButtonTextLength = _ref15.tertiaryButtonTextLength;
+}, function (_ref15) {
+  var fullWidth = _ref15.fullWidth;
+  return fullWidth ? '0' : '20px';
+}, devices.tablet, getButtonsMinHeight, function (_ref16) {
+  var primaryButtonTextLength = _ref16.primaryButtonTextLength,
+    tertiaryButtonTextLength = _ref16.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
   if (isLinksLayoutColumnTablet) {
     return "\n          flex-direction: column;\n        ";
@@ -9344,8 +9370,8 @@ var Button$1 = function Button(_ref2) {
 var Image = function Image(_ref) {
   var desktop = _ref.desktop,
     mobile = _ref.mobile,
-    alt = _ref.alt;
-  var isMobile = useMobile();
+    alt = _ref.alt,
+    isMobile = _ref.isMobile;
   return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: isMobile ? exports.AspectRatio['75:32'] : exports.AspectRatio['90:17']
   }, /*#__PURE__*/React__default.createElement("picture", {
@@ -9387,7 +9413,8 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
   }, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
     mobile: image.mobile,
     desktop: image.desktop,
-    alt: image.alt
+    alt: image.alt,
+    isMobile: isMobile
   }), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
     "data-testid": "promo-heading-image-button"
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
@@ -12393,21 +12420,19 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
     currentSlide = _ref2.currentSlide,
     carouselRef = _ref2.carouselRef,
     hasMultipleSlides = _ref2.hasMultipleSlides,
-    setCurrentSlide = _ref2.setCurrentSlide;
+    setCurrentSlide = _ref2.setCurrentSlide,
+    carouselTitle = _ref2.carouselTitle;
   var hasOnlyImageSlides = slidesMedia.every(function (slide) {
     return !isVideoSlide(slide);
   });
   return /*#__PURE__*/React__default.createElement(Swipe, {
     ref: carouselRef,
+    slidesAriaHidden: true,
     infinite: hasMultipleSlides && hasOnlyImageSlides,
-    onIndexChange: setCurrentSlide,
-    "aria-roledescription": "carousel"
+    onIndexChange: setCurrentSlide
   }, slidesMedia.map(function (mediaContent, index) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "swiper-slide",
-      key: mediaContent.key,
-      "aria-hidden": index !== currentSlide,
-      "aria-roledescription": "slide"
+      key: mediaContent.key + "-" + carouselTitle
     }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
       aspectRatio: exports.AspectRatio['4:3']
     }, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
@@ -12493,6 +12518,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     availablePrev: hasOnlyImageSlides || currentSlide !== 0,
     availableNext: hasOnlyImageSlides || currentSlide !== slidesMedia.length - 1
   }))), /*#__PURE__*/React__default.createElement(SwipeCarousel, {
+    carouselTitle: carouselTitle,
     slidesMedia: slidesMedia,
     hasMultipleSlides: hasMultipleSlides,
     carouselRef: carouselRef,