@royaloperahouse/harmonic 1.0.5-a → 1.0.5-b

package/CHANGELOG.md

@@ -1,17 +1,26 @@
-## [1.0.4]
+## [Proposed: 1.0.5]
+- CastFilter: prevent duplicate screen reader announcements for actor images and ensure tapping an actor image ring toggles selection.
+
+## [Proposed: 1.0.3]
 - Castfilter: fix NDVA issues
 
-## [1.0.3]
+## [Proposed: 1.0.2]
+- CastFilter: fix VoiceOver selection semantics and option activation (desktop/iOS).
+- CastFilter: add stable id-based selection support (`selectedIds`, `onSelectId`, `onApplyIds`) with backward compatibility for legacy index-based API.
+- ModalWindow: add `closeButtonAriaLabel` and set close icon `aria-hidden="true"`
+
+## [Proposed: 1.0.1]
+- Accessibility fixes to CastFilter component
+
+## [0.19.3]
 - Carousel title realignment following font change
 
-## [1.0.2]
-- AnchorTabBar: fix focused element
 
 ## [1.0.1]
 - Carousel: fix first click
 
 ## [1.0.0]
-Addressed some tech debt: 
+Addressed some tech debt:
 - all components are now exported for consumption from top-level public API export.
 - Removed Radio, RadioGroup and Select components.
 - cleaned up import/export structure of components

package/dist/components/atoms/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IDropdownProps } from '../../../types/types';
-declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, trimTabText, }: IDropdownProps) => React.JSX.Element;
+declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, className, role, ariaLabel, tabLinkId, trimTabText, }: IDropdownProps) => React.JSX.Element;
 export default Dropdown;

package/dist/components/atoms/Tab/Tab.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ITabProps } from '../../../types/types';
-declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
+declare const Tab: ({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: ITabProps) => React.JSX.Element;
 export default Tab;

package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts

@@ -1,6 +1,6 @@
 interface FocusableTabProps {
     hide?: boolean;
 }
-export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
+export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
 export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/harmonic.cjs.development.css

@@ -350,6 +350,325 @@
   font-display: swap;
 }
 
+/* ~~~~~ General Styling Classes ~~~~~ */
+.typography_color-primary__LOfDi {
+  color: var(--color-primary);
+}
+
+.typography_color-black__6MHRL {
+  color: var(--color-base-black);
+}
+
+.typography_color-white__PfW5s {
+  color: var(--color-base-white);
+}
+
+.typography_color-red__iPlbG {
+  color: var(--color-primary-red);
+}
+
+.typography_color-grey__GA1c2 {
+  color: var(--color-base-dark-grey);
+}
+
+.typography_color-inherit__RDd0Y {
+  color: inherit;
+}
+
+.typography_em__E6tX- {
+  font-style: italic;
+}
+/* ~~~ */
+
+/* Display Headers */
+.typography_display__-F3p4 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  line-height: 100%;
+
+  &.typography_large__uq0zC {
+    font-size: 96px;
+    font-weight: 700;
+    letter-spacing: -5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 68px;
+    font-weight: 500;
+    letter-spacing: -3px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+    font-weight: 500;
+  }
+
+  /* Serif and Italic adjustments */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -3px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 38px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 32px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Headers */
+.typography_header__BexiD {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 44px;
+    line-height: 48px;
+    letter-spacing: -1.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 26px;
+    line-height: 32px;
+    letter-spacing: -0.5px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+  }
+
+  /* Serif and Italic letter-spacing overrides */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD.typography_serif__VSO38,
+  &.typography_medium__K0uZD.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 28px;
+      line-height: 34px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: -1px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 20px;
+      line-height: 26px;
+      letter-spacing: -0.75px;
+    }
+
+    /* Mobile overrides for serif/italic letter-spacing */
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_medium__K0uZD.typography_serif__VSO38,
+    &.typography_medium__K0uZD.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Subtitle */
+.typography_subtitle__aoFTV {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Body Copy */
+.typography_bodycopy__vYtQ8 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 11px;
+      line-height: 16px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Overline */
+.typography_overline__EnUK3 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  text-transform: uppercase;
+
+  &.typography_large__uq0zC {
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0.3px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      line-height: 17px;
+      letter-spacing: 0.3px; /* Added to ensure it stays */
+    }
+
+    &.typography_small__wfQ0K {
+      line-height: 14px;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+/* Button Text */
+.typography_buttontext__vcxNi {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 17px;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+
+  @media (max-width: 699px) {
+    font-weight: 500;
+    line-height: 17px;
+  }
+}
+
+/* Caption Text */
+.typography_captiontext__91UFb {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+
+  @media (max-width: 699px) {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.2px;
+  }
+}
+
+/* Navigation Text */
+.typography_navigationtext__YfGf7 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 19px;
+  line-height: 19px;
+  letter-spacing: 0.4px;
+  font-weight: 500;
+
+  @media (max-width: 699px) {
+    font-size: 17px;
+    line-height: 17px;
+  }
+}
+
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */

package/dist/harmonic.cjs.development.js

@@ -208,26 +208,6 @@ var typographyStyles = {"display":"typography-module_display__ZHsz9","header":"t
 var _excluded = ["children", "size", "em", "color", "serif", "hierarchy", "tag", "className"],
   _excluded2 = ["children", "size", "color", "className", "bold", "tag"],
   _excluded3 = ["children", "size", "color", "className"];
-/* ~~~ Display - (use case) ~~~ */
-var DisplayHeader = function DisplayHeader(_ref) {
-  var children = _ref.children,
-    size = _ref.size,
-    em = _ref.em,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'inherit' : _ref$color,
-    serif = _ref.serif,
-    className = _ref.className;
-  var classNames = createClassNames('display', {
-    size: size,
-    color: color,
-    serif: serif,
-    em: em,
-    className: className
-  }, typographyStyles);
-  return /*#__PURE__*/React__default.createElement("h1", {
-    className: classNames
-  }, children);
-};
 /* ~~~ Headers - size and hierarchy set separately ~~~ */
 var HarmonicHeader = function HarmonicHeader(_ref2) {
   var _ref3;
@@ -2712,6 +2692,7 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
     color = _ref.color,
     dataTestId = _ref.dataTestId,
     isOpen = _ref.isOpen;
@@ -2746,8 +2727,9 @@ var Tab = function Tab(_ref) {
     className: className,
     "data-testid": dataTestId
   }, /*#__PURE__*/React__default.createElement(TabText, {
-    color: color,
+    id: tabLinkId,
     trimText: trimText,
+    color: color,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -2777,6 +2759,7 @@ var Dropdown = function Dropdown(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
     trimTabText = _ref.trimTabText;
   var node = React.useRef();
   var _useState = React.useState(false),
@@ -2873,6 +2856,7 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
+      tabLinkId: tabLinkId,
       trimText: trimTabText,
       title: title,
       titleLink: titleLink,
@@ -2952,7 +2936,8 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className
+    className: className,
+    tabLinkId: "account-link"
   });
 };
 
@@ -5682,6 +5667,7 @@ var Accordion = function Accordion(_ref) {
   var toggleAccordion = function toggleAccordion() {
     if (React__default.Children.count(children) === 0) return;
     if (openAccordion) {
+      setIcon(collapsedStateIconData);
       setOpenAccordion(false);
       setTextHeight('0px');
       setIcon(collapsedStateIconData);
@@ -6034,14 +6020,9 @@ var BodyContent = function BodyContent(_ref2) {
     _ref2$renderGridItem = _ref2.renderGridItem,
     renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
   var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
-  var content = /*#__PURE__*/React__default.createElement(TextContainer, {
-    tag: "div",
-    size: "large",
-    "data-testid": "text-container",
+  var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
     className: textContainerClassName,
-    dangerouslySetInnerHTML: {
-      __html: addTypographyClasses(text)
-    }
+    html: text
   });
   var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
@@ -6850,12 +6831,15 @@ var CastFilters = function CastFilters(_ref) {
     listRoleDescription = _ref.listRoleDescription,
     className = _ref.className,
     onSelect = _ref.onSelect,
+    onSelectId = _ref.onSelectId,
     onApply = _ref.onApply,
+    onApplyIds = _ref.onApplyIds,
     onClear = _ref.onClear,
     _ref$greyscale = _ref.greyscale,
     greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
     _ref$selectedIndices = _ref.selectedIndices,
-    selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
+    selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices,
+    selectedIds = _ref.selectedIds;
   var _useViewport = useViewport(),
     isMobile = _useViewport.isMobile;
   var castWrapperRef = React.useRef(null);
@@ -6957,14 +6941,51 @@ var CastFilters = function CastFilters(_ref) {
     isDraggingRef.current = false;
     hasDraggedRef.current = false;
   }, [isMobile]);
-  var handleClick = React__default.useCallback(function (index, onClick) {
+  var getCastItemSelectionId = React.useCallback(function (person) {
+    if (person.id !== undefined && person.id !== null) return String(person.id);
+    if (person.slug !== undefined && person.slug !== null) return String(person.slug);
+    return person.name;
+  }, []);
+  var isIdSelectionMode = selectedIds !== undefined;
+  var selectedIdsSet = React.useMemo(function () {
+    var ids = selectedIds != null ? selectedIds : [];
+    return new Set(ids.map(function (id) {
+      return String(id);
+    }));
+  }, [selectedIds]);
+  var selectedStateIndices = React.useMemo(function () {
+    if (!isIdSelectionMode) return selectedIndices;
+    return cast.flatMap(function (person, index) {
+      var itemId = getCastItemSelectionId(person);
+      return selectedIdsSet.has(itemId) ? [index] : [];
+    });
+  }, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
+  var selectedStateIds = React.useMemo(function () {
+    if (isIdSelectionMode) {
+      return cast.filter(function (person) {
+        return selectedIdsSet.has(getCastItemSelectionId(person));
+      }).map(function (person) {
+        return getCastItemSelectionId(person);
+      });
+    }
+    return selectedIndices.map(function (index) {
+      return cast[index];
+    }).filter(function (person) {
+      return person !== undefined;
+    }).map(function (person) {
+      return getCastItemSelectionId(person);
+    });
+  }, [cast, getCastItemSelectionId, isIdSelectionMode, selectedIdsSet, selectedIndices]);
+  var handleClick = React__default.useCallback(function (index, itemId, onClick) {
     if (hasDraggedRef.current) return;
+    if (onSelectId) onSelectId(itemId);
     if (onSelect) onSelect(index);
     if (onClick) onClick();
-  }, [onSelect]);
-  var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
-    if (e.key === 'Enter') {
-      handleClick(index, onClick);
+  }, [onSelect, onSelectId]);
+  var handlePersonKeydown = React__default.useCallback(function (e, index, itemId, onClick) {
+    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+      e.preventDefault();
+      handleClick(index, itemId, onClick);
     }
   }, [handleClick]);
   var handleClearKeydown = React__default.useCallback(function (e) {
@@ -6979,27 +7000,27 @@ var CastFilters = function CastFilters(_ref) {
         image = person.image,
         _onClick = person.onClick,
         ariaLabel = person['aria-label'];
-      var isSelected = selectedIndices.includes(index);
+      var personSelectionId = getCastItemSelectionId(person);
+      var isSelected = isIdSelectionMode ? selectedIdsSet.has(personSelectionId) : selectedIndices.includes(index);
       var personImage = image || placeholderImage || defaultPlaceholderImage;
       return /*#__PURE__*/React__default.createElement(PersonWrapper, {
-        key: index,
+        key: personSelectionId,
         "aria-selected": isSelected,
-        "aria-label": ariaLabel || (isSelected ? 'Deselect' : 'Select') + " " + name,
-        "aria-posinset": index + 1,
-        "aria-setsize": cast.length,
+        "aria-label": ariaLabel != null ? ariaLabel : name,
         role: "option",
         tabIndex: 0,
+        onClick: function onClick() {
+          return handleClick(index, personSelectionId, _onClick);
+        },
         onKeyDown: function onKeyDown(e) {
-          return handlePersonKeydown(e, index, _onClick);
+          return handlePersonKeydown(e, index, personSelectionId, _onClick);
         }
       }, /*#__PURE__*/React__default.createElement(PersonToggle, {
         isSelected: isSelected,
-        onClick: function onClick() {
-          return handleClick(index, _onClick);
-        }
+        "aria-hidden": "true"
       }, /*#__PURE__*/React__default.createElement(PersonImage, {
         src: personImage,
-        alt: image ? name : "Placeholder image for " + name,
+        alt: "",
         draggable: false,
         isDefaultPlaceholder: !(!!image || !!placeholderImage),
         greyscale: greyscale
@@ -7035,7 +7056,8 @@ var CastFilters = function CastFilters(_ref) {
     ref: castWrapperRef,
     role: "listbox",
     "aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
-    "aria-multiselectable": true,
+    "aria-label": "filter list",
+    "aria-multiselectable": "true",
     onMouseDown: handleMouseDown,
     onMouseMove: handleMouseMove,
     onMouseUp: handleMouseUp,
@@ -7046,14 +7068,15 @@ var CastFilters = function CastFilters(_ref) {
     ref: swipeRef,
     onOverflowChange: handleOverflowChange,
     limitDragToNavigableRange: true
-  }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+  }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedStateIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "medium",
     className: "mobile-only"
-  }, emptySelectionText)), selectedIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, onApply && /*#__PURE__*/React__default.createElement(PrimaryButton, {
+  }, emptySelectionText)), selectedStateIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedStateIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, (onApply || onApplyIds) && (/*#__PURE__*/React__default.createElement(PrimaryButton, {
     onClick: function onClick() {
-      return onApply(selectedIndices);
+      if (onApply) onApply(selectedStateIndices);
+      if (onApplyIds) onApplyIds(selectedStateIds);
     }
-  }, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
+  }, ctaText != null ? ctaText : 'Apply')), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
     tabIndex: 0,
     role: "button",
     onClick: onClear,
@@ -9053,7 +9076,7 @@ var _excluded$l = ["text"],
   _excluded3$1 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_TEXT$1 = 28;
-var LENGTH_TEXT_PARAGRAPH = 130;
+var LENGTH_TEXT_PARAGRAPH = 185;
 var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -12232,7 +12255,7 @@ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$19 || (_t
 var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
 
-var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
+var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId", "closeButtonAriaLabel"];
 var MAX_Z_INDEX = 9999999999;
 if (Modal.defaultStyles.content) {
   Modal.defaultStyles.content.position = 'static';
@@ -12306,6 +12329,8 @@ var ModalWindow = function ModalWindow(_ref) {
     setIsOpen = _ref.setIsOpen,
     children = _ref.children,
     appElementId = _ref.appElementId,
+    _ref$closeButtonAriaL = _ref.closeButtonAriaLabel,
+    closeButtonAriaLabel = _ref$closeButtonAriaL === void 0 ? 'Close modal window' : _ref$closeButtonAriaL,
     modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var isMobile = useMobile();
   var customStyles = {
@@ -12338,10 +12363,11 @@ var ModalWindow = function ModalWindow(_ref) {
     columnSpanSmallDevice: 14
   }, /*#__PURE__*/React__default.createElement(InnerModal, null, /*#__PURE__*/React__default.createElement(CloseButton, {
     onClick: closeModalHandler,
-    "aria-label": "Close modal window",
+    "aria-label": closeButtonAriaLabel,
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "Close"
+    iconName: "Close",
+    "aria-hidden": "true"
   })), /*#__PURE__*/React__default.createElement(ContentWrapper$3, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
 };
 
@@ -14601,7 +14627,6 @@ exports.ContactNewsletter = ContactNewsletter;
 exports.ContentSummary = ContentSummary;
 exports.ControlledDropdown = ControlledDropdown;
 exports.CreditListing = CreditListing;
-exports.DisplayHeader = DisplayHeader;
 exports.Dropdown = Dropdown;
 exports.Editorial = Editorial;
 exports.Footer = Footer;