@dynatrace/strato-components 3.11.3 → 3.12.1

package/charts/core/components/legend/categorical/ChartLegend.js

@@ -28,9 +28,11 @@ var import_ChartVirtualizedLegendGrid = require("./components/ChartVirtualizedLe
 var import_LegendGridSettingsContext = require("./context/LegendGridSettingsContext.js");
 var import_useLegendInteractions = require("./hooks/useLegendInteractions.js");
 var import_legend_grid_utils = require("./utils/legend-grid.utils.js");
+var import_VisuallyHidden = require("../../../../../core/components/visually-hidden/VisuallyHidden.js");
 var import_constants = require("../../../constants.js");
 var import_Legend_context = require("../shared/context/Legend.context.js");
 var import_LegendSizeContext = require("../shared/context/LegendSizeContext.js");
+const ANNOUNCE_CLEANUP_MS = 1e3;
 const ChartLegend = (props) => {
   const {
     items,
@@ -45,8 +47,29 @@ const ChartLegend = (props) => {
   const ref = (0, import_react.useRef)(null);
   const { width, height } = (0, import_LegendSizeContext.useLegendSize)();
   const { onItemHover, onLegendIconClick, onLegendNameClick, hiddenItems } = (0, import_useLegendInteractions.useLegendInteractions)(items, { onClick, onHover });
+  const [announcements, setAnnouncements] = (0, import_react.useState)([]);
+  const nextAnnouncementId = (0, import_react.useRef)(0);
+  const cleanupTimeouts = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  const announce = (0, import_react.useCallback)((message) => {
+    const id = nextAnnouncementId.current++;
+    setAnnouncements((current) => [...current, { id, message }]);
+    const timeout = setTimeout(() => {
+      setAnnouncements(
+        (current) => current.filter((announcement) => announcement.id !== id)
+      );
+      cleanupTimeouts.current.delete(timeout);
+    }, ANNOUNCE_CLEANUP_MS);
+    cleanupTimeouts.current.add(timeout);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const timeouts = cleanupTimeouts.current;
+    return () => {
+      timeouts.forEach(clearTimeout);
+      timeouts.clear();
+    };
+  }, []);
   const gridSettings = (0, import_legend_grid_utils.buildGridSettings)(items, width, height);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ref,
@@ -58,27 +81,31 @@ const ChartLegend = (props) => {
         flexDirection: orientation === import_constants.ORIENTATION.Vertical ? "row" : "column",
         ...style
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Legend_context.LegendContext.Provider,
-        {
-          value: {
-            hiddenItems,
-            truncationMode,
-            onSeriesAction,
-            onLegendIconClick,
-            onItemHover,
-            onLegendNameClick,
-            interactionsDisabled
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendGridSettingsContext.LegendGridSettingsContext.Provider, { value: gridSettings, children: gridSettings.hasVirtual ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ChartVirtualizedLegendGrid.ChartVirtualizedLegendGrid,
-            {
-              items,
-              orientation
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLegendGrid.ChartLegendGrid, { items, orientation }) })
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "status", "aria-atomic": "false", children: announcements.map((announcement) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: announcement.message }, announcement.id)) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Legend_context.LegendContext.Provider,
+          {
+            value: {
+              hiddenItems,
+              truncationMode,
+              onSeriesAction,
+              onLegendIconClick,
+              onItemHover,
+              onLegendNameClick,
+              interactionsDisabled,
+              onAnnounce: announce
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendGridSettingsContext.LegendGridSettingsContext.Provider, { value: gridSettings, children: gridSettings.hasVirtual ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ChartVirtualizedLegendGrid.ChartVirtualizedLegendGrid,
+              {
+                items,
+                orientation
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLegendGrid.ChartLegendGrid, { items, orientation }) })
+          }
+        )
+      ]
     }
   );
 };

package/charts/core/components/legend/categorical/ChartLegend.sty.js

@@ -21,4 +21,4 @@ __export(ChartLegend_css_exports, {
 });
 module.exports = __toCommonJS(ChartLegend_css_exports);
 var import_ChartLegend_css_ts_vanilla = require("./ChartLegend.css");
-var legendContainer = "_9x5f9b0-3-11-3";
+var legendContainer = "_9x5f9b0-3-12-1";

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.css

@@ -1,12 +1,12 @@
-._1wmibjy0-3-11-3 {
+._1wmibjy0-3-12-1 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy1-3-11-3 {
+._1wmibjy1-3-12-1 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy2-3-11-3 {
+._1wmibjy2-3-12-1 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: 100%;

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.d.ts

@@ -4,6 +4,7 @@ interface LegendIconProps {
     hover: boolean;
     disabled: boolean;
     color: string;
+    ariaLabel: string;
     icon?: ReactElement;
     buttonRef: RefObject<HTMLButtonElement | null>;
     onMouseEnter: () => void;

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.js

@@ -45,6 +45,7 @@ const ChartLegendIcon = (props) => {
     hover,
     disabled,
     color,
+    ariaLabel,
     icon,
     buttonRef,
     onMouseEnter,
@@ -73,7 +74,7 @@ const ChartLegendIcon = (props) => {
     "button",
     {
       ref: buttonRef,
-      "aria-label": "Hide",
+      "aria-label": ariaLabel,
       "data-testid": "chart-legend-item-icon",
       "data-dt-children-name": "LegendHideItem",
       "data-dt-properties": visible ? "state:hide" : "state:show",

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.sty.js

@@ -23,6 +23,6 @@ __export(ChartLegendIcon_css_exports, {
 });
 module.exports = __toCommonJS(ChartLegendIcon_css_exports);
 var import_ChartLegendIcon_css_ts_vanilla = require("./ChartLegendIcon.css");
-var coloredEyeOffIcon = "_1wmibjy1-3-11-3";
-var eyeIcon = "_1wmibjy0-3-11-3";
-var singleDimensionIcon = "_1wmibjy2-3-11-3";
+var coloredEyeOffIcon = "_1wmibjy1-3-12-1";
+var eyeIcon = "_1wmibjy0-3-12-1";
+var singleDimensionIcon = "_1wmibjy2-3-12-1";

package/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.css

@@ -1,4 +1,4 @@
-._mt8v6g0-3-11-3 {
+._mt8v6g0-3-12-1 {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -19,23 +19,23 @@
   padding: var(--dt-spacings-size-2, 2px);
   width: fit-content;
 }
-._mt8v6g1-3-11-3 {
+._mt8v6g1-3-12-1 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._mt8v6g1-3-11-3:disabled {
+._mt8v6g1-3-12-1:disabled {
   cursor: auto;
 }
-._mt8v6g2-3-11-3 {
+._mt8v6g2-3-12-1 {
   cursor: pointer;
 }
-._mt8v6g2-3-11-3:hover {
+._mt8v6g2-3-12-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._mt8v6g3-3-11-3 {
+._mt8v6g3-3-12-1 {
   cursor: auto;
 }
-._mt8v6g4-3-11-3 {
+._mt8v6g4-3-12-1 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-0, 0);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -45,27 +45,27 @@
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   line-height: var(--dt-typography-text-small-emphasized-line-height, 1.333333333);
 }
-._mt8v6g4-3-11-3:hover {
+._mt8v6g4-3-12-1:hover {
   cursor: auto;
 }
-._mt8v6g5-3-11-3:hover {
+._mt8v6g5-3-12-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   cursor: pointer;
 }
-._mt8v6g6-3-11-3:hover {
+._mt8v6g6-3-12-1:hover {
   background-color: unset;
   cursor: auto;
 }
-._mt8v6g7-3-11-3 {
+._mt8v6g7-3-12-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._mt8v6g8-3-11-3 {
+._mt8v6g8-3-12-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mt8v6g4-3-11-3 > .button-children {
+._mt8v6g4-3-12-1 > .button-children {
   flex-grow: 1;
 }
-._mt8v6g9-3-11-3 {
+._mt8v6g9-3-12-1 {
   line-height: 2;
   white-space: nowrap;
   display: flex;
@@ -74,10 +74,10 @@
   flex-shrink: 1;
   height: var(--dt-spacings-size-20, 20px);
 }
-._mt8v6g9-3-11-3 > ._mt8v6g1-3-11-3 {
+._mt8v6g9-3-12-1 > ._mt8v6g1-3-12-1 {
   flex: 0 0 auto;
 }
-._mt8v6ga-3-11-3 {
+._mt8v6ga-3-12-1 {
   flex: 1 1 auto;
   white-space: nowrap;
   display: flex;
@@ -85,7 +85,7 @@
   overflow: hidden;
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._mt8v6gb-3-11-3 {
+._mt8v6gb-3-12-1 {
   flex-shrink: 1;
   text-align: left;
   overflow: hidden;

package/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.js

@@ -40,7 +40,8 @@ const ChartLegendItem = (props) => {
     onItemHover,
     onLegendNameClick,
     interactionsDisabled,
-    onSeriesAction: actions
+    onSeriesAction: actions,
+    onAnnounce
   } = (0, import_useLegend.useLegend)();
   const {
     refIconButton,
@@ -84,9 +85,33 @@ const ChartLegendItem = (props) => {
   };
   const { intl, defaultActions } = (0, import_useLegendItemActions.useLegendItemActions)(
     item,
-    onLegendItemAction
+    onLegendItemAction,
+    onAnnounce
   );
-  const iconButtonClickHandler = !isLastItem ? onIconButtonClick : void 0;
+  const hideAriaLabel = intl.formatMessage(
+    import_messages.LEGEND_MESSAGES.legendHideSeriesAria,
+    { seriesName: item.name }
+  );
+  const showAriaLabel = intl.formatMessage(
+    import_messages.LEGEND_MESSAGES.legendShowSeriesAria,
+    { seriesName: item.name }
+  );
+  const actionsAriaLabel = intl.formatMessage(
+    import_messages.LEGEND_MESSAGES.legendSeriesActionsAria,
+    { seriesName: item.name }
+  );
+  const hiddenAnnouncement = intl.formatMessage(
+    import_messages.LEGEND_MESSAGES.legendSeriesHiddenAnnouncement,
+    { seriesName: item.name }
+  );
+  const shownAnnouncement = intl.formatMessage(
+    import_messages.LEGEND_MESSAGES.legendSeriesShownAnnouncement,
+    { seriesName: item.name }
+  );
+  const iconButtonClickHandler = !isLastItem ? () => {
+    onIconButtonClick();
+    onAnnounce(visible ? hiddenAnnouncement : shownAnnouncement);
+  } : void 0;
   const disabled = interactionsDisabled || isLastItem;
   const memoizedActions = (0, import_react.useMemo)(() => {
     if (open && actions) {
@@ -114,6 +139,7 @@ const ChartLegendItem = (props) => {
                 hover: isIconHovered,
                 disabled: isLastItem,
                 color: item.color.Default,
+                ariaLabel: visible ? hideAriaLabel : showAriaLabel,
                 icon: item.icon,
                 buttonRef: refIconButton,
                 onMouseEnter: handleIconMouseEnter,
@@ -146,6 +172,7 @@ const ChartLegendItem = (props) => {
                 {
                   disabled: interactionsDisabled,
                   visible: shouldShowActionsButton,
+                  ariaLabel: actionsAriaLabel,
                   onOpenChange: updateOpenState,
                   isOpen: open,
                   onFocus: handleLabelMouseEnter,

package/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.sty.js

@@ -30,9 +30,9 @@ var import_focusRingStatic_css_ts_vanilla = require("../../../../../../../core/s
 var import_ChartLegendItem_css_ts_vanilla = require("./ChartLegendItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var ItemFontStyles = { fontWeight: "var(--dt-typography-text-small-emphasized-weight, 500)", fontSize: "var(--dt-typography-text-small-emphasized-size, 12px)", fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", lineHeight: "var(--dt-typography-text-small-emphasized-line-height, 1.333333333)" };
-var baseLegendButton = "_mt8v6g0-3-11-3 _z0fq9b4-3-11-3 _z0fq9bd-3-11-3 _z0fq9b6-3-11-3 _z0fq9b9-3-11-3";
-var legendItem = "_mt8v6g9-3-11-3";
-var legendItemButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g1-3-11-3", variantClassNames: { isInteractive: { true: "_mt8v6g2-3-11-3", false: "_mt8v6g3-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendNameButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g4-3-11-3", variantClassNames: { isInteractive: { true: "_mt8v6g5-3-11-3", false: "_mt8v6g6-3-11-3" }, isSubdued: { true: "_mt8v6g7-3-11-3", false: "_mt8v6g8-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendNameButtonOverride = "_mt8v6gb-3-11-3";
-var legendNameWrapper = "_mt8v6ga-3-11-3";
+var baseLegendButton = "_mt8v6g0-3-12-1 _z0fq9b4-3-12-1 _z0fq9bd-3-12-1 _z0fq9b6-3-12-1 _z0fq9b9-3-12-1";
+var legendItem = "_mt8v6g9-3-12-1";
+var legendItemButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g1-3-12-1", variantClassNames: { isInteractive: { true: "_mt8v6g2-3-12-1", false: "_mt8v6g3-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendNameButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g4-3-12-1", variantClassNames: { isInteractive: { true: "_mt8v6g5-3-12-1", false: "_mt8v6g6-3-12-1" }, isSubdued: { true: "_mt8v6g7-3-12-1", false: "_mt8v6g8-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendNameButtonOverride = "_mt8v6gb-3-12-1";
+var legendNameWrapper = "_mt8v6ga-3-12-1";

package/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.css

@@ -1,10 +1,10 @@
-._yo3l7h0-3-11-3 {
+._yo3l7h0-3-12-1 {
   padding: var(--dt-spacings-size-2, 2px);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._yo3l7h1-3-11-3 {
+._yo3l7h1-3-12-1 {
   visibility: visible;
 }
-._yo3l7h2-3-11-3 {
+._yo3l7h2-3-12-1 {
   visibility: hidden;
 }

package/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.d.ts

@@ -8,6 +8,8 @@ export interface LegendSeriesActionsProps {
     disabled?: boolean;
     /** Makes the actions button visible or hidden **/
     visible?: boolean;
+    /** Accessible label for the actions menu trigger button. */
+    ariaLabel: string;
     onOpenChange?: (open: boolean) => void;
     isOpen: boolean;
     onBlur: () => void;

package/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.js

@@ -33,6 +33,7 @@ const ChartLegendSeriesActions = (props) => {
     onOpenChange,
     isOpen,
     visible = false,
+    ariaLabel,
     onFocus,
     onBlur,
     onMouseEnter,
@@ -50,6 +51,7 @@ const ChartLegendSeriesActions = (props) => {
       import_Button.Button,
       {
         "data-testid": "legend-more-actions-button",
+        "aria-label": ariaLabel,
         variant: "default",
         disabled,
         onFocus: handleFocus,

package/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.sty.js

@@ -22,4 +22,4 @@ __export(ChartLegendSeriesActions_css_exports, {
 module.exports = __toCommonJS(ChartLegendSeriesActions_css_exports);
 var import_ChartLegendSeriesActions_css_ts_vanilla = require("./ChartLegendSeriesActions.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var seriesButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_yo3l7h0-3-11-3", variantClassNames: { visible: { true: "_yo3l7h1-3-11-3", false: "_yo3l7h2-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var seriesButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_yo3l7h0-3-12-1", variantClassNames: { visible: { true: "_yo3l7h1-3-12-1", false: "_yo3l7h2-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/categorical/components/ChartVirtualizedLegendGrid.css

@@ -1,30 +1,30 @@
-._igjrsj0-3-11-3 {
+._igjrsj0-3-12-1 {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }
-._igjrsj1-3-11-3 {
+._igjrsj1-3-12-1 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._igjrsj2-3-11-3 {
+._igjrsj2-3-12-1 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._igjrsj3-3-11-3 {
+._igjrsj3-3-12-1 {
   position: relative;
 }
-._igjrsj4-3-11-3 {
+._igjrsj4-3-12-1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
 }
-._igjrsj5-3-11-3 {
+._igjrsj5-3-12-1 {
   display: grid;
 }
-._igjrsj6-3-11-3 {
+._igjrsj6-3-12-1 {
   margin-top: var(--dt-spacings-size-8, 8px);
 }
-._igjrsj7-3-11-3 {
+._igjrsj7-3-12-1 {
   margin-top: var(--dt-spacings-size-0, 0);
 }

package/charts/core/components/legend/categorical/components/ChartVirtualizedLegendGrid.sty.js

@@ -25,7 +25,7 @@ __export(ChartVirtualizedLegendGrid_css_exports, {
 module.exports = __toCommonJS(ChartVirtualizedLegendGrid_css_exports);
 var import_ChartVirtualizedLegendGrid_css_ts_vanilla = require("./ChartVirtualizedLegendGrid.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj0-3-11-3", variantClassNames: { layout: { horizontal: "_igjrsj1-3-11-3", vertical: "_igjrsj2-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendGrid = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj5-3-11-3", variantClassNames: { layout: { horizontal: "_igjrsj6-3-11-3", vertical: "_igjrsj7-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var virtualizedGrid = "_igjrsj3-3-11-3";
-var virtualizedRow = "_igjrsj4-3-11-3";
+var legendContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj0-3-12-1", variantClassNames: { layout: { horizontal: "_igjrsj1-3-12-1", vertical: "_igjrsj2-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendGrid = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj5-3-12-1", variantClassNames: { layout: { horizontal: "_igjrsj6-3-12-1", vertical: "_igjrsj7-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var virtualizedGrid = "_igjrsj3-3-12-1";
+var virtualizedRow = "_igjrsj4-3-12-1";

package/charts/core/components/legend/categorical/hooks/useLegendItemActions.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement } from 'react';
 import { LegendItem } from '../types/legend.js';
-export declare const useLegendItemActions: (item: LegendItem, onLegendItemAction: () => void) => {
+export declare const useLegendItemActions: (item: LegendItem, onLegendItemAction: () => void, onAnnounce: (message: string) => void) => {
     intl: import("react-intl").IntlShape;
     defaultActions: ReactElement<{
         children?: import("react").ReactNode | undefined;

package/charts/core/components/legend/categorical/hooks/useLegendItemActions.js

@@ -27,9 +27,17 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var import_useCopyToClipboard = require("../../../../../../core/utils/useCopyToClipboard.js");
 var import_copy_to_clipboard_messages = require("../../../copy-to-clipboard/copy-to-clipboard-messages.js");
 var import_ChartSeriesAction = require("../../../series-action/ChartSeriesAction.js");
-const useLegendItemActions = (item, onLegendItemAction) => {
+const useLegendItemActions = (item, onLegendItemAction, onAnnounce) => {
   const intl = (0, import_react_intl.useIntl)();
-  const [handleCopyToClipboard] = (0, import_useCopyToClipboard.useCopyToClipboard)(item.name);
+  const [handleCopyToClipboard, copied, setCopied] = (0, import_useCopyToClipboard.useCopyToClipboard)(
+    item.name
+  );
+  (0, import_react.useEffect)(() => {
+    if (copied) {
+      onAnnounce(intl.formatMessage(import_copy_to_clipboard_messages.COPY_TO_CLIPBOARD_MESSAGES.actionCopied));
+      setCopied(false);
+    }
+  }, [copied, onAnnounce, intl, setCopied]);
   const defaultActions = (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_ChartSeriesAction.ChartSeriesAction.Item,

package/charts/core/components/legend/categorical/messages.d.ts

@@ -9,5 +9,30 @@ export declare const LEGEND_MESSAGES: {
         defaultMessage: string;
         description: string;
     };
+    legendHideSeriesAria: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    legendShowSeriesAria: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    legendSeriesActionsAria: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    legendSeriesHiddenAnnouncement: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    legendSeriesShownAnnouncement: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 //# sourceMappingURL=messages.d.ts.map

package/charts/core/components/legend/categorical/messages.js

@@ -31,5 +31,30 @@ const LEGEND_MESSAGES = (0, import_react_intl.defineMessages)({
     id: "1e3uPo8SoI4NA2dZ",
     defaultMessage: "Show",
     description: "Text in a tooltip shown when hovering a legend series to show it"
+  },
+  legendHideSeriesAria: {
+    id: "Vt7aUQHkFaDCuIqZ",
+    defaultMessage: "Hide {seriesName}",
+    description: "Accessible label for the hide-series toggle button in a legend item"
+  },
+  legendShowSeriesAria: {
+    id: "k+a+zH/n3HXJex9e",
+    defaultMessage: "Show {seriesName}",
+    description: "Accessible label for the show-series toggle button in a legend item"
+  },
+  legendSeriesActionsAria: {
+    id: "3QeEQ2KrbnVJzUEp",
+    defaultMessage: "Open actions for {seriesName}",
+    description: "Accessible label for the series actions menu button in a legend item"
+  },
+  legendSeriesHiddenAnnouncement: {
+    id: "tWdgBWwThCCe7Tum",
+    defaultMessage: "{seriesName} hidden",
+    description: "Screen reader announcement when a chart legend series is hidden"
+  },
+  legendSeriesShownAnnouncement: {
+    id: "8gqUdz9VpeEbBtre",
+    defaultMessage: "{seriesName} shown",
+    description: "Screen reader announcement when a chart legend series is shown"
   }
 });

package/charts/core/components/legend/categorical/types/legend-internal.d.ts

@@ -9,6 +9,7 @@ export type LegendState = {
     onLegendNameClick(item: LegendItem, event: MouseEvent): void;
     interactionsDisabled: boolean;
     onSeriesAction?: SeriesActions<LegendItem>;
+    onAnnounce(message: string): void;
 };
 /**
  * Settings for the grid legend layout

package/charts/core/components/legend/range/RangeLegend.css

@@ -1,13 +1,13 @@
-._lvrd9i0-3-11-3 {
+._lvrd9i0-3-12-1 {
   display: flex;
   align-items: center;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
   margin: 0 auto;
 }
-._lvrd9i1-3-11-3 {
+._lvrd9i1-3-12-1 {
   flex-direction: row;
 }
-._lvrd9i2-3-11-3 {
+._lvrd9i2-3-12-1 {
   flex-direction: column;
 }

package/charts/core/components/legend/range/RangeLegend.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegend_css_exports, {
 module.exports = __toCommonJS(RangeLegend_css_exports);
 var import_RangeLegend_css_ts_vanilla = require("./RangeLegend.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvrd9i0-3-11-3", variantClassNames: { isVertical: { true: "_lvrd9i1-3-11-3", false: "_lvrd9i2-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvrd9i0-3-12-1", variantClassNames: { isVertical: { true: "_lvrd9i1-3-12-1", false: "_lvrd9i2-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendBoundaryLabel/RangeLegendBoundaryLabel.css

@@ -1,6 +1,6 @@
-._klb1cs1-3-11-3 {
+._klb1cs1-3-12-1 {
   visibility: hidden;
 }
-._klb1cs2-3-11-3 {
+._klb1cs2-3-12-1 {
   visibility: visible;
 }

package/charts/core/components/legend/range/components/RangeLegendBoundaryLabel/RangeLegendBoundaryLabel.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendBoundaryLabel_css_exports, {
 module.exports = __toCommonJS(RangeLegendBoundaryLabel_css_exports);
 var import_RangeLegendBoundaryLabel_css_ts_vanilla = require("./RangeLegendBoundaryLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var boundaryLabel = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_klb1cs0-3-11-3", variantClassNames: { isMarkerShown: { true: "_klb1cs1-3-11-3", false: "_klb1cs2-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var boundaryLabel = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_klb1cs0-3-12-1", variantClassNames: { isMarkerShown: { true: "_klb1cs1-3-12-1", false: "_klb1cs2-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendItemLabel/RangeLegendItemLabel.css

@@ -1,3 +1,3 @@
-._1itb2bi0-3-11-3 {
+._1itb2bi0-3-12-1 {
   overflow: visible;
 }

package/charts/core/components/legend/range/components/RangeLegendItemLabel/RangeLegendItemLabel.sty.js

@@ -21,4 +21,4 @@ __export(RangeLegendItemLabel_css_exports, {
 });
 module.exports = __toCommonJS(RangeLegendItemLabel_css_exports);
 var import_RangeLegendItemLabel_css_ts_vanilla = require("./RangeLegendItemLabel.css");
-var legendLabel = "_1itb2bi0-3-11-3";
+var legendLabel = "_1itb2bi0-3-12-1";

package/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.css

@@ -1,9 +1,9 @@
-._1kzx6wv0-3-11-3 {
+._1kzx6wv0-3-12-1 {
   overflow: visible;
 }
-._1kzx6wv1-3-11-3 {
+._1kzx6wv1-3-12-1 {
   visibility: visible;
 }
-._1kzx6wv2-3-11-3 {
+._1kzx6wv2-3-12-1 {
   visibility: hidden;
 }

package/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendItemMarker_css_exports, {
 module.exports = __toCommonJS(RangeLegendItemMarker_css_exports);
 var import_RangeLegendItemMarker_css_ts_vanilla = require("./RangeLegendItemMarker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendMarker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1kzx6wv0-3-11-3", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-11-3", false: "_1kzx6wv2-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1kzx6wv0-3-12-1", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-12-1", false: "_1kzx6wv2-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.css

@@ -1,12 +1,12 @@
-._u32l830-3-11-3 {
+._u32l830-3-12-1 {
   overflow: visible;
   position: absolute;
 }
-._u32l831-3-11-3 {
+._u32l831-3-12-1 {
   width: 100%;
   height: 10px;
 }
-._u32l832-3-11-3 {
+._u32l832-3-12-1 {
   height: 100%;
   width: 10px;
 }

package/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendMarkers_css_exports, {
 module.exports = __toCommonJS(RangeLegendMarkers_css_exports);
 var import_RangeLegendMarkers_css_ts_vanilla = require("./RangeLegendMarkers.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendMarkersSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_u32l830-3-11-3", variantClassNames: { isHorizontal: { true: "_u32l831-3-11-3", false: "_u32l832-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarkersSvg = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_u32l830-3-12-1", variantClassNames: { isHorizontal: { true: "_u32l831-3-12-1", false: "_u32l832-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });