@royaloperahouse/harmonic 1.0.7-b → 1.0.8-a

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [Proposed: 1.0.8]
+- 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.7]
+- CustomStrategyTabsFilter:
+  - Added an accessible group label and complete keyboard button behaviour
+  - Preserved focus across controlled selection updates
+  - Prevented strategy metadata from reaching the DOM
+  - Restricted hover-only styling to devices that support hover
+
 ## [1.0.6]
 - Harmonic :
   - Added new CustomStrategy  filter

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { TCustomStrategyTabsFilterProps } from '../../../types';
+import type { TCustomStrategyTabsFilterProps } from '../../../types';
 /**
+ * A controlled filter button group that supports single- and multi-select strategies.
+ * The consumer owns the selection state and receives the complete clicked item.
  * A horizontally scrollable tabs filter component used to display
  * selectable strategy tabs with configurable styling and selection behavior.
  *
@@ -66,5 +68,5 @@ import { TCustomStrategyTabsFilterProps } from '../../../types';
  *  *
  *  * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
  */
-declare const CustomStrategyTabsFilter: ({ items, className, onClick, customViewConfig, }: TCustomStrategyTabsFilterProps) => React.JSX.Element;
+declare const CustomStrategyTabsFilter: ({ items, className, ariaLabel, onClick, customViewConfig, }: TCustomStrategyTabsFilterProps) => React.JSX.Element;
 export default CustomStrategyTabsFilter;

package/dist/harmonic.cjs.development.js

@@ -7406,10 +7406,12 @@ var HotFilters = function HotFilters(_ref) {
 var _templateObject$P, _templateObject2$C, _templateObject3$p;
 var ScrollContainer = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: scroll;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media ", " {\n    overflow-x: visible;\n  }\n"])), devices.mobile);
 var TabsContainerWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  min-width: 400px;\n  justify-content: space-between;\n  gap: 16px;\n  font-family: var(--font-family-sans);\n\n  @media ", " {\n    width: 100%;\n    min-width: 0;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    gap: 10px;\n  }\n"])), devices.mobile);
-var StyledTab = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  :hover {\n    color: var(--color-base-white);\n  }\n\n  @media ", " {\n    width: auto !important;\n    min-width: fit-content;\n    flex: 0 0 auto;\n  }\n"])), devices.mobile);
+var StyledTab = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  &:focus-visible {\n    outline: 2px solid var(--color-base-black);\n    outline-offset: 2px;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    &:hover {\n      color: var(--color-base-white);\n    }\n  }\n\n  @media ", " {\n    width: auto !important;\n    min-width: fit-content;\n    flex: 0 0 auto;\n  }\n"])), devices.mobile);
 
-var _excluded$j = ["text", "id", "isSelected"];
+var _excluded$j = ["text", "id", "isSelected", "allowedSelectedWith"];
 /**
+ * A controlled filter button group that supports single- and multi-select strategies.
+ * The consumer owns the selection state and receives the complete clicked item.
  * A horizontally scrollable tabs filter component used to display
  * selectable strategy tabs with configurable styling and selection behavior.
  *
@@ -7479,11 +7481,17 @@ var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
   var _customViewConfig$bac, _customViewConfig$bac2, _customViewConfig$tex, _customViewConfig$tex2;
   var items = _ref.items,
     className = _ref.className,
+    ariaLabel = _ref.ariaLabel,
     onClick = _ref.onClick,
     customViewConfig = _ref.customViewConfig;
   var handleClick = React__default.useCallback(function (item) {
     onClick(item);
   }, [onClick]);
+  var handleKeyDown = React__default.useCallback(function (event, item) {
+    if (event.key !== ' ' && event.key !== 'Spacebar') return;
+    event.preventDefault();
+    if (!event.repeat) handleClick(item);
+  }, [handleClick]);
   // in case of any partially passed configuration, config defaults non defined
   var config = {
     selectIcon: (customViewConfig == null ? void 0 : customViewConfig.selectIcon) || 'Confirm',
@@ -7499,7 +7507,9 @@ var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
     pressedColor: (customViewConfig == null ? void 0 : customViewConfig.pressedColor) || 'black-pressed'
   };
   return /*#__PURE__*/React__default.createElement(ScrollContainer, {
-    className: className
+    "aria-label": ariaLabel,
+    className: className,
+    role: "group"
   }, /*#__PURE__*/React__default.createElement(TabsContainerWrapper, null, items.map(function (item) {
     var text = item.text,
       id = item.id,
@@ -7510,6 +7520,9 @@ var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
       onClick: function onClick() {
         return handleClick(item);
       },
+      onKeyDown: function onKeyDown(event) {
+        return handleKeyDown(event, item);
+      },
       iconName: isSelected ? config.selectIcon : undefined,
       backgroundColor: isSelected ? config.backgroundColor.select : config.backgroundColor.unselect,
       textColor: isSelected ? config.textColor.select : config.textColor.unselect,