@royaloperahouse/harmonic 1.0.1-f → 1.0.1-g

package/CHANGELOG.md

@@ -1,11 +1,7 @@
 ## [Proposed: 1.0.2]
-- Castfilter: fix NDVA issues
-
-## [Proposed: 1.0.1]
-- Accessibility fixes to CastFilter component
-
-## [0.19.3]
-- Carousel title realignment following font change
+- 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"`.
 
 ## [1.0.1]
 - Carousel: fix first click

package/dist/harmonic.cjs.development.js

@@ -6831,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);
@@ -6938,15 +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) {
+  }, [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, onClick);
+      handleClick(index, itemId, onClick);
     }
   }, [handleClick]);
   var handleClearKeydown = React__default.useCallback(function (e) {
@@ -6961,21 +7000,20 @@ 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, _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
@@ -7017,7 +7055,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,
@@ -7028,14 +7067,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,
@@ -12214,7 +12254,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';
@@ -12288,6 +12328,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 = {
@@ -12320,10 +12362,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)));
 };