npm - @dynatrace/strato-components - Versions diffs - 3.11.3 → 3.12.0 - Mend

@dynatrace/strato-components 3.11.3 → 3.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2354) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,13 +1,175 @@
 # components
-## 3.11.3
+## 3.12.0
+### Dependency updates
+- Removed `react-is` as a peer dependency. (APPDEV-19603)
+- `@dynatrace/strato-icons` was updated to version `2.5.0`.
+### Deprecations
+#### Hint
+- Hint component is deprecated in favor of `FormFieldMessages`. (APPDEV-18361)
 ### Updates
+#### Charts
+- `Charts` now accept `aria-label`, `aria-labelledby`, `aria-describedby`, and `aria-details` props, allowing you to provide meaningful accessible names for screen readers. (APPDEV-18646)
+- Fixed the negative plot size that charts with a legend were given when the container was too small to fit the legend and its resizer. (APPDEV-19481)
+- The chart legend now announces series visibility changes and copy actions to screen readers using an ARIA live region, so users relying on assistive technologies are informed when a series is hidden or shown, and when a series name is copied. (APPDEV-18621)
+- The legend resizer in `TimeseriesChart` and `TreeMap` no longer snaps back to its original position after the user drags it and the chart container resizes. (APPDEV-19403)
+- The legend hide/show button and series actions button now have descriptive accessible names that include the series name, fixing an accessibility violation where screen readers announced only "Hide" or an unlabeled button. (APPDEV-19188)
+#### Editors
+- Fixed the issue that left the active line indication on the wrong line, or missing from the gutter, after folding or unfolding code. (APPDEV-19016)
+- The validation error state now keeps the regular text and syntax highlighting colors instead of turning plain text critical.
+- In the validation error state, the line number and fold marker are now marked for only those lines that carry an error.
+- The active line indication now continues across the gutter. (APPDEV-19016)
 #### Layouts
 - Fixed the horizontal scrollbar that appeared when `PageLayout.Details` was collapsed, or rendered as an overlay or drawer. The panel now takes up no space in those layouts. (APPDEV-19351)
+#### Overlays
+- Fixed focus being lost to `<body>` when users Tab past the last (or Shift+Tab past the first) focusable element inside an overlay — focus now returns to the trigger. (APPDEV-19359)
+- The `Drawer` now uses proper dialog semantics (`role="dialog"` and `aria-modal`) so screen readers correctly identify it as a dialog. You can now provide an accessible name via `aria-label` or `aria-labelledby`. (APPDEV-18623)
+#### Accordion
+- `Accordion.SectionLabel` now accepts an `aria-label` prop to override the accessible name derived from its content. (APPDEV-19171)
+#### AnnotationsChart
+- Annotation tooltips no longer stay pinned when clicking elsewhere in the chart. Clicking a different annotation marker while one is already pinned now switches the pin to the new annotation. (APPDEV-18988)
+#### Checkbox
+- No longer sets the `aria-checked` attribute on the underlying `input[type=checkbox]`.
+#### CodeSnippet
+- Fixed a crash when copying code in environments that block clipboard access, such as embedded pages. (APPDEV-19495)
+- Fixed function names with trailing digits being incorrectly highlighted as number literals when rendering DQL syntax. (APPDEV-19541)
+#### DataTable
+- The column settings toolbar button no longer shows a wrong hidden column count when `defaultColumnVisibility` contains an invalid column ID. (APPDEV-19392)
+- Interactive row triggers now expose their activated state and role description to assistive technologies via `aria-selected` and `aria-roledescription`. Column and cell action menu triggers now correctly report `aria-expanded="false"` when the menu is closed. (APPDEV-19180)
+- Header column-action triggers are now keyboard-accessible: they display a visible focus ring and can be reached by tabbing. (APPDEV-18611)
+- Improved the clarity and tone of column settings messages and tooltips. (APPDEV-18738)
+- Selected row count is now announced to screen readers after the selection changes. (APPDEV-19167)
+#### Divider
+- You can now hide a decorative `Divider` from screen readers by setting `aria-hidden`. (APPDEV-18629)
+#### DQLEditor
+- Added `showLintGutter` prop to show per-line severity markers in a gutter column. (APPDEV-17073)
+- Fixed the autocomplete section header incorrectly appearing at the second position instead of the top when navigating to a paginated suggestions page. (APPDEV-19531)
+- Improved the autocomplete suggestion tooltip layout and content. (APPDEV-17385)
+- Fixed function names with trailing digits being incorrectly highlighted as number literals in the autocomplete info popup synopsis. (APPDEV-19541)
+- Fixed the autocomplete popup leaving extra space below informational text when no suggestions are available. (APPDEV-19536)
+#### ExternalLink
+- You can now set the `role` prop on `ExternalLink`.
+#### FilterField
+- The link to the documentation in the suggestions footer is now reachable and selectable via arrow key navigation. Screen readers now also announce that pressing `Enter` applies the filter when no suggestion is focused. (APPDEV-19131, APPDEV-19125)
+- Selecting a comparison operator suggestion via keyboard no longer duplicates the operator when the user has already typed the same operator character. (APPDEV-19229)
+- Fixed the filter field value not being announced by screen readers when it changes dynamically. (APPDEV-19164)
+#### FocusScope
+- Focus is now correctly returned to the modal scope when a closing Radix menu asynchronously restores focus to an element in the inert background. (APPDEV-19146)
+- `Tab` and `Shift+Tab` now cycle within a contained focus scope instead of escaping to content behind the modal (for example, elements in a parent iframe). (APPDEV-18652)
+#### FormField
+- Fixed the `aria-describedby` attribute on form controls from incorrectly referencing IDs of error message elements that are not yet rendered in the DOM. (APPDEV-19407)
+#### HistogramChart
+- Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. (APPDEV-18988)
+#### HoneycombChart
+- Fixed the missing `aria-describedby` attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971)
+#### IntentButton
+- Fixed `aria-label`, `aria-labelledby`, `aria-describedby`, and `aria-details` not reaching the interactive element. (APPDEV-19384)
+#### Menu
+- Disabled `Menu.Item` elements are no longer reachable via keyboard navigation. (APPDEV-18649)
+- The `Menu.Trigger` now sets `aria-controls` referencing the open menu content, allowing screen readers to announce the expanded state correctly. (APPDEV-19170)
+#### MessageContainer
+- Status and error messages are now announced by screen readers without requiring focus. (APPDEV-18622)
+#### Modal
+- Fixed an issue where it sometimes took the modal several seconds to become visible in Chrome when running inside an iframe. (APPDEV-19352)
+#### SegmentSelector
+- Fixed inline error not being associated with both select triggers via `aria-describedby` when a segment is missing required variables. (APPDEV-19001)
+- You can now listen for `onFocus` and `onBlur` events at the whole-component boundary. `onBlur` is not emitted when focus moves between the trigger and the overlay. (APPDEV-17914)
+- Pin, unpin, and remove buttons for segment presets now have a unique accessible name that includes the preset's name, so screen reader users can tell them apart. (APPDEV-19193)
+#### Select
+- Screen readers now announce the number of matching options when using `Select.Filter` to search the content. (APPDEV-18616)
+- Fixed the inline clear-search (X) button inside the `Select` filter so it is now reachable and operable with the keyboard alone. (APPDEV-18640)
+- The "Select all" control now exposes its selected state to assistive technologies, correctly announcing when all, some, or none of the options are selected. (APPDEV-18619)
+#### TimeframeSelector
+- Fixed the input resetting when typing a date on React 18 apps. (APPDEV-19509)
+- Fixed the `TimeframeSelector` trigger button missing a descriptive accessible name, causing screen readers to announce only the currently selected value. (APPDEV-19189)
+- You can now listen for `onFocus` and `onBlur` events at the whole-component boundary. `onBlur` is not emitted when focus moves between the trigger and the overlay. (APPDEV-17914)
+#### TimeseriesChart
+- Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. (APPDEV-18988)
+#### TitleBar
+- The decorative divider is no longer announced by screen readers. (APPDEV-19139)
+#### TopList
+- Fixed the drag-to-select gesture being available in the chart. (APPDEV-19065)
+- The downloaded CSV now contains Label and Value columns. (APPDEV-19235)
+- `TopList` no longer shows crosshair nor magnifier. (APPDEV-19228)
+#### TreeMap
+- Fixed the missing `aria-describedby` attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971)
+#### XYChart
+- `XYChart.Select` now accepts a `disabled` prop that suppresses drag-to-select entirely. (APPDEV-19065)
+- Fixed the shared tooltip highlighting the wrong bar in grouped bar charts when hovering near a cluster. (APPDEV-19103)
+- Annotation tooltips no longer stay pinned when clicking elsewhere in the chart, and only one tooltip — annotation or chart — can be pinned at a time. Clicking a different annotation marker while one is already pinned now switches the pin to the new annotation. Legend filtering and toolbar interactions now also dismiss any pinned annotation tooltip. (APPDEV-18988)
+- Fixed stacked `AreaSeries` incorrectly snapping zero-value datapoints to the chart baseline instead of resting on top of the accumulated stack. (APPDEV-19590)
+- Fixed bar labels in reversed `XYChart.BarSeries` charts rendering at the wrong position after zooming. (APPDEV-19073)
+- Fixed the missing `aria-describedby` attribute on canvas elements inside the chart when a tooltip is visible. (APPDEV-18971)
+- Fixed stacked `AreaSeries` zero-value datapoints becoming invisible and undetectable by hover or selection when all series share a zero value at a given timestamp in a chart with relative value representation. (APPDEV-19590)
+- Fixed the shared tooltip not adapting its width to the series value text, causing values to be clipped when they were wider than the series names. (APPDEV-19590)
+- The crosshair line and magnifiers can now be suppressed per axis orientation using the new `hideCrosshair` prop on `XYChart.XAxis` and `XYChart.YAxis`. (APPDEV-19228)
+- Fixed `BarSeries` labels rendering bolder and washed-out on Windows. (APPDEV-19526)
+- Fixed the single tooltip grouping stacked `AreaSeries` datapoints that share the same raw value but are at different visual positions due to stacking accumulation. (APPDEV-19590)
 ## 3.11.2
 ### Dependency updates
@@ -195,6 +357,14 @@
 - Fixed the `colorRule` `colorPalette` on `BarSeries` from resolving to the palette's first color for every matching bar instead of the color matching the series' own index. (APPDEV-19198)
 - Simplified the `toolbar` so it only shows one button when interactions are disabled. (APPDEV-18812)
+## 3.10.5
+### Updates
+#### General
+- Overlays such as `Tooltip`, `Menu` item tooltips, `Select` and `FilterField` suggestion lists, `FeatureHighlight`, and chart tooltips no longer flash briefly in the top-left corner of the screen before moving to their final position. (APPDEV-19359)
 ## 3.10.4
 ### Updates

package/buttons/button/Button.css CHANGED Viewed

@@ -1,13 +1,13 @@
-._10kgnsa0-3-11-3 {
+._10kgnsa0-3-12-0 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-11-3);
-  box-shadow: var(--_bx32h4-3-11-3);
-  color: var(--_bx32h0-3-11-3);
+  background: var(--_bx32h3-3-12-0);
+  box-shadow: var(--_bx32h4-3-12-0);
+  color: var(--_bx32h0-3-12-0);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-11-3 {
+._10kgnsa1-3-12-0 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-11-3 {
+._10kgnsa2-3-12-0 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-11-3 {
+._10kgnsa3-3-12-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-11-3 {
+._10kgnsa4-3-12-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-11-3 {
+._10kgnsa5-3-12-0 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-11-3 {
+._10kgnsa6-3-12-0 {
   width: 100%;
 }
-._10kgnsa7-3-11-3 {
+._10kgnsa7-3-12-0 {
   width: fit-content;
 }
-._10kgnsa8-3-11-3 {
+._10kgnsa8-3-12-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-11-3 ._10kgnsa9-3-11-3:not(:has(svg:only-child)) {
+._10kgnsa3-3-12-0 ._10kgnsa9-3-12-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-11-3 ._10kgnsa9-3-11-3:not(:has(svg:only-child)) {
+._10kgnsa4-3-12-0 ._10kgnsa9-3-12-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-11-3 {
+._10kgnsab-3-12-0 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/buttons/button/Button.sty.js CHANGED Viewed

@@ -28,7 +28,7 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Button_css_ts_vanilla = require("./Button.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-11-3", variantClassNames: { textAlign: { start: "_10kgnsa1-3-11-3", center: "_10kgnsa2-3-11-3" }, size: { condensed: "_10kgnsa3-3-11-3", "default": "_10kgnsa4-3-11-3" }, disabled: { true: "_10kgnsa5-3-11-3" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-11-3", variantClassNames: { textual: { true: "_oqqp1n0-3-11-3", false: "_10kgnsab-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-11-3";
-var widths = { full: "_10kgnsa6-3-11-3", content: "_10kgnsa7-3-11-3" };
+var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-12-0", variantClassNames: { textAlign: { start: "_10kgnsa1-3-12-0", center: "_10kgnsa2-3-12-0" }, size: { condensed: "_10kgnsa3-3-12-0", "default": "_10kgnsa4-3-12-0" }, disabled: { true: "_10kgnsa5-3-12-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-12-0", variantClassNames: { textual: { true: "_oqqp1n0-3-12-0", false: "_10kgnsab-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-12-0";
+var widths = { full: "_10kgnsa6-3-12-0", content: "_10kgnsa7-3-12-0" };

package/buttons/intent-button/IntentButton.css CHANGED Viewed

@@ -1,3 +1,3 @@
-._1xe9ern0-3-11-3 {
+._1xe9ern0-3-12-0 {
   opacity: 0.5;
 }

package/buttons/intent-button/IntentButton.js CHANGED Viewed

@@ -28,6 +28,7 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var import_IntentButtonWithoutResponse = require("./IntentButtonWithoutResponse.js");
 var import_IntentButtonWithResponse = require("./IntentButtonWithResponse.js");
 var import_OpenWith = require("./OpenWith.js");
+var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useSlots = require("../../core/hooks/useSlots.js");
 var import_Intent = require("../../core/slots/Intent/Intent.js");
@@ -60,6 +61,14 @@ const _IntentButton = /* @__PURE__ */ (0, import_react2.forwardRef)((props, forw
     ...remainingProps
   } = props;
   const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
+  const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(restProps);
+  const {
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-describedby": _ariaDescribedBy,
+    "aria-details": _ariaDetails,
+    ...outerRestProps
+  } = restProps;
   const [slots, freeform] = (0, import_useSlots.useSlots)(children, {
     icon: import_Prefix.Prefix,
     items: { match: import_Intent.Intent, multiple: true },
@@ -80,6 +89,7 @@ const _IntentButton = /* @__PURE__ */ (0, import_react2.forwardRef)((props, forw
     textAlign,
     onClick,
     disabled,
+    ...ariaLabelingProps,
     "aria-disabled": ariaDisabledProp
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -91,7 +101,7 @@ const _IntentButton = /* @__PURE__ */ (0, import_react2.forwardRef)((props, forw
       "data-dtrum-allow": dataDtrumAllow,
       className: consumerClassName,
       style: consumerStyle,
-      ...(0, import_merge_props.mergeProps)(restProps, behavioralTrackingProps),
+      ...(0, import_merge_props.mergeProps)(outerRestProps, behavioralTrackingProps),
       "data-dt-component": COMPONENT_NAME,
       children: [
         "responseProperties" in options ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/buttons/intent-button/IntentButton.sty.js CHANGED Viewed

@@ -21,4 +21,4 @@ __export(IntentButton_css_exports, {
 });
 module.exports = __toCommonJS(IntentButton_css_exports);
 var import_IntentButton_css_ts_vanilla = require("./IntentButton.css");
-var disabledAppIconOpacity = "_1xe9ern0-3-11-3";
+var disabledAppIconOpacity = "_1xe9ern0-3-12-0";

package/buttons/notify-button/NotifyButton.css CHANGED Viewed

@@ -1,10 +1,10 @@
-._1j9pkom0-3-11-3 {
+._1j9pkom0-3-12-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-16, 16px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._1j9pkom1-3-11-3 {
+._1j9pkom1-3-12-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

package/buttons/notify-button/NotifyButton.sty.js CHANGED Viewed

@@ -22,5 +22,5 @@ __export(NotifyButton_css_exports, {
 });
 module.exports = __toCommonJS(NotifyButton_css_exports);
 var import_NotifyButton_css_ts_vanilla = require("./NotifyButton.css");
-var overlay = "_1j9pkom0-3-11-3";
-var toast = "_1j9pkom1-3-11-3";
+var overlay = "_1j9pkom0-3-12-0";
+var toast = "_1j9pkom1-3-12-0";

package/charts/annotations-chart/AnnotationsChart.js CHANGED Viewed

@@ -54,6 +54,7 @@ var import_constants2 = require("../core/components/annotations/constants.js");
 var import_is_numerical_marker = require("../core/components/annotations/utils/is-numerical-marker.js");
 var import_ChartStateHandler = require("../core/components/chart-states/ChartStateHandler.js");
 var import_get_chart_states_template = require("../core/components/chart-states/utils/get-chart-states-template.js");
+var import_PinCoordinationContext = require("../core/components/overlay-tooltip/contexts/PinCoordinationContext.js");
 var import_DataDtrumContext = require("../core/context/DataDtrumContext.js");
 var import_useObserveContainerSize = require("../core/hooks/useObserveContainerSize.js");
 var import_EmptyStateSlot = require("../core/slots/chart-states/EmptyStateSlot.js");
@@ -74,7 +75,11 @@ const _AnnotationsChart = (0, import_react.forwardRef)((props, forwardedRef) =>
     "data-testid": dataTestId,
     style: consumerStyle,
     className: consumerClassName,
-    width: propsWidth
+    width: propsWidth,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
   } = props;
   const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const [containerDimension, sizeObserverRef] = (0, import_useObserveContainerSize.useObserveContainerSize)();
@@ -150,32 +155,41 @@ const _AnnotationsChart = (0, import_react.forwardRef)((props, forwardedRef) =>
         {
           style: { height, width },
           ref: rootRef,
-          "aria-label": import_constants.ANNOTATIONS_CHART_ARIA_LABEL,
+          "aria-label": ariaLabel ?? import_constants.ANNOTATIONS_CHART_ARIA_LABEL,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-details": ariaDetails,
           role: "img",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_annotations_chart_config_provider.AnnotationsChartConfigProvider, { config, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DataDtrumContext.DataDtrumContext.Provider, { value: { dataDtrumAllow, dataDtrumMask }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PinCoordinationContext.PinCoordinationProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_annotations_chart_config_provider.AnnotationsChartConfigProvider, { config, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_DataDtrumContext.DataDtrumContext.Provider,
               {
-                height: scrollWrapperHeight,
-                width: containerDimension.width,
+                value: { dataDtrumAllow, dataDtrumMask },
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_AnnotationsDisplay.AnnotationsDisplay,
+                  import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
                   {
-                    tracks,
-                    scale,
-                    annotationsActions,
-                    showLabels: shouldShowLabels,
-                    labelsOffset,
+                    height: scrollWrapperHeight,
                     width: containerDimension.width,
-                    tooltipConfig,
-                    textOverflow,
-                    truncateMode,
-                    maxLines,
-                    ...behaviorTrackingProps
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_AnnotationsDisplay.AnnotationsDisplay,
+                      {
+                        tracks,
+                        scale,
+                        annotationsActions,
+                        showLabels: shouldShowLabels,
+                        labelsOffset,
+                        width: containerDimension.width,
+                        tooltipConfig,
+                        textOverflow,
+                        truncateMode,
+                        maxLines,
+                        ...behaviorTrackingProps
+                      }
+                    )
                   }
                 )
               }
-            ) }),
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_AnnotationsAxis.AnnotationsAxis,
               {
@@ -185,7 +199,7 @@ const _AnnotationsChart = (0, import_react.forwardRef)((props, forwardedRef) =>
                 labelsOffset
               }
             )
-          ] })
+          ] }) })
         }
       )
     }

package/charts/annotations-chart/types/annotations-chart-props.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { AriaLabelingProps } from '../../../core/types/a11y-props.js';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
 import type { BaseAnnotationsChartProps } from '../../core/components/annotations/types/annotations.js';
 import type { TextOverflowOptions } from '../../core/components/annotations/types/marker.js';
@@ -5,7 +6,7 @@ import type { TextOverflowOptions } from '../../core/components/annotations/type
  * The AnnotationsChart component props
  * @public
  */
-export interface AnnotationsChartProps extends BaseAnnotationsChartProps {
+export interface AnnotationsChartProps extends BaseAnnotationsChartProps, AriaLabelingProps {
     /**
      * Custom width of the tracks labels.
      * @defaultValue 60

package/charts/categorical-bar/CategoricalBarChartInternal.js CHANGED Viewed

@@ -44,6 +44,7 @@ var import_useChartLayoutLoading = require("../core/components/chart-layout/hook
 var import_useChartLayoutOrientation = require("../core/components/chart-layout/hooks/useChartLayoutOrientation.js");
 var import_useGraphSize = require("../core/components/chart-layout/hooks/useGraphSize.js");
 var import_constants2 = require("../core/components/data-point/constants.js");
+var import_AriaLabelingContext = require("../core/context/AriaLabelingContext.js");
 const categoricalGridTemplateAreas = `
   "${import_categorical_bar_area_rules.AREAS.leftAxis} ${import_categorical_bar_area_rules.AREAS.leftThreshold} plot"
   ". . ${import_categorical_bar_area_rules.AREAS.bottomThreshold}"
@@ -58,6 +59,12 @@ const categoricalGridTemplateRows = (bottomAxisMaxHeight = "auto") => {
   return `minmax(60%, 1fr) auto minmax(0, ${max})`;
 };
 const CategoricalBarChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
+  } = (0, import_AriaLabelingContext.useAriaLabelingContext)();
   const loading = (0, import_useChartLayoutLoading.useChartLayoutLoading)();
   const chartRef = (0, import_react.useRef)(null);
   const chartAndForwardedRef = (0, import_useMergeRefs.useMergeRefs)([forwardedRef, chartRef]);
@@ -78,7 +85,10 @@ const CategoricalBarChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)
     {
       style: { paddingTop: import_constants2.OVERLAY_PADDING },
       className: import_defaultChartValues_css.defaultChartSize,
-      "aria-label": import_constants.CATEGORICAL_BAR_CHART_ARIA_LABEL,
+      "aria-label": ariaLabel ?? import_constants.CATEGORICAL_BAR_CHART_ARIA_LABEL,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails,
       role: "img",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ChartGridRoot.ChartGrid,

package/charts/categorical-bar/CategoricalBarChartRoot.js CHANGED Viewed

@@ -43,6 +43,7 @@ var import_get_chart_states_template = require("../core/components/chart-states/
 var import_OverlayContext = require("../core/components/overlay-tooltip/contexts/OverlayContext.js");
 var import_TooltipContext = require("../core/components/overlay-tooltip/contexts/TooltipContext.js");
 var import_ChartSeriesActionContext = require("../core/components/series-action/ChartSeriesActionContext.js");
+var import_AriaLabelingContext = require("../core/context/AriaLabelingContext.js");
 var import_ColorRuleContext = require("../core/context/ColorRuleContext.js");
 var import_chart_types = require("../core/types/chart-types.js");
 var import_coerceSizeValue = require("../core/utils/coerceSizeValue.js");
@@ -57,7 +58,11 @@ const CategoricalBarChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pr
     className,
     style,
     "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow
+    "data-dtrum-allow": dataDtrumAllow,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
   } = props;
   const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const chartHeight = (0, import_coerceSizeValue.coerceSizeValue)(heightProp ?? import_defaults.DEFAULT_CHART_HEIGHT);
@@ -92,7 +97,16 @@ const CategoricalBarChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pr
     setState(() => import_state.initialState);
   }, [chartConfig]);
   const chartLayoutRef = (0, import_useAutoLegendRefresh.useAutoLegendRefresh)(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CategoricalBarChartBaseConfig_context.CategoricalBarChartBaseConfigContext.Provider, { value: baseConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: chartConfig.colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CategoricalBarChartRawData_context.CategoricalBarChartRawDataContext.Provider, { value: data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CategoricalBarDataProvider.CategoricalBarDataProvider, { data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StoreProvider.StoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const ariaLabelingValue = (0, import_react.useMemo)(
+    () => ({
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails
+    }),
+    [ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaDetails]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AriaLabelingContext.AriaLabelingContext.Provider, { value: ariaLabelingValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CategoricalBarChartBaseConfig_context.CategoricalBarChartBaseConfigContext.Provider, { value: baseConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: chartConfig.colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CategoricalBarChartRawData_context.CategoricalBarChartRawDataContext.Provider, { value: data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CategoricalBarDataProvider.CategoricalBarDataProvider, { data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StoreProvider.StoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartSeriesActionContext.ChartSeriesActionContext.Provider,
     {
       value: {
@@ -121,6 +135,6 @@ const CategoricalBarChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pr
         }
       ) }) }) }) })
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 });
 CategoricalBarChartRoot.displayName = import_constants.DISPLAY_NAME;

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css CHANGED Viewed

@@ -1,9 +1,9 @@
-._1wi8enr0-3-11-3 {
+._1wi8enr0-3-12-0 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-11-3 {
+._1wi8enr1-3-12-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js CHANGED Viewed

@@ -23,5 +23,5 @@ __export(CategoricalBarChartInspectOverlay_css_exports, {
 module.exports = __toCommonJS(CategoricalBarChartInspectOverlay_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_CategoricalBarChartInspectOverlay_css_ts_vanilla = require("./CategoricalBarChartInspectOverlay.css");
-var crosshairLayout = "_1wi8enr0-3-11-3 _13lzg4k0-3-11-3";
-var dataPointLayout = "_1wi8enr1-3-11-3 _13lzg4k0-3-11-3";
+var crosshairLayout = "_1wi8enr0-3-12-0 _13lzg4k0-3-12-0";
+var dataPointLayout = "_1wi8enr1-3-12-0 _13lzg4k0-3-12-0";

package/charts/categorical-bar/types/categorical-bar-chart.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { ScaleLinear, ScaleSymLog } from 'd3-scale';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 import type { IntentProps } from '../../../core/slots/Intent/Intent.js';
+import type { AriaLabelingProps } from '../../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import { MaskingProps } from '../../../core/types/masking-props.js';
 import { StylingProps } from '../../../core/types/styling-props.js';
@@ -267,7 +268,7 @@ export interface CategoricalBarChartRef {
 /**
  * @public
  */
-export interface CategoricalBarChartProps extends StylingProps, MaskingProps, BehaviorTrackingProps {
+export interface CategoricalBarChartProps extends StylingProps, MaskingProps, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * Data object for the categorical bar chart
      */

package/charts/core/components/annotations/AnnotationsAtom.css CHANGED Viewed

@@ -1,3 +1,3 @@
-._145zb630-3-11-3 {
+._145zb630-3-12-0 {
   position: relative;
 }

package/charts/core/components/annotations/AnnotationsAtom.sty.js CHANGED Viewed

@@ -21,4 +21,4 @@ __export(AnnotationsAtom_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsAtom_css_exports);
 var import_AnnotationsAtom_css_ts_vanilla = require("./AnnotationsAtom.css");
-var wrapper = "_145zb630-3-11-3";
+var wrapper = "_145zb630-3-12-0";

package/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._1yc349j0-3-11-3 {
+._1yc349j0-3-12-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js CHANGED Viewed

@@ -21,4 +21,4 @@ __export(AnnotationsCanvasLayout_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsCanvasLayout_css_exports);
 var import_AnnotationsCanvasLayout_css_ts_vanilla = require("./AnnotationsCanvasLayout.css");
-var canvasContainer = "_1yc349j0-3-11-3";
+var canvasContainer = "_1yc349j0-3-12-0";

package/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._107efci0-3-11-3 {
+._107efci0-3-12-0 {
   position: absolute;
   top: 0;
 }

package/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js CHANGED Viewed

@@ -21,4 +21,4 @@ __export(AnnotationsOverlays_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsOverlays_css_exports);
 var import_AnnotationsOverlays_css_ts_vanilla = require("./AnnotationsOverlays.css");
-var annotationsOverlay = "_107efci0-3-11-3";
+var annotationsOverlay = "_107efci0-3-12-0";