@react-magma/charts 15.0.0-rc.2 → 15.0.0-rc.4

package/dist/charts.js

@@ -1467,6 +1467,7 @@ function downloadImage(wrapperRef, title, format) {
     img.src = url;
 }
 function CarbonChartToolbar(_a) {
+    var _b;
     var config = _a.config, dataSet = _a.dataSet, isInverse = _a.isInverse, isTableOpen = _a.isTableOpen, isFullscreen = _a.isFullscreen, onOpenTable = _a.onOpenTable, onToggleFullscreen = _a.onToggleFullscreen, theme = _a.theme, title = _a.title, wrapperRef = _a.wrapperRef;
     var t = useChartToolbarI18n();
     var showTable = config.showAsTable !== false;
@@ -1489,7 +1490,7 @@ function CarbonChartToolbar(_a) {
             React__namespace.createElement(reactMagmaDom.DropdownDivider, null),
             config.moreOptions))));
     return (React__namespace.createElement(ToolbarWrapper, { isFullscreen: isFullscreen, isInverse: isInverse, theme: theme },
-        React__namespace.createElement(ChartTitle, { isInverse: isInverse, theme: theme }, resolvedTitle),
+        React__namespace.createElement(ChartTitle, { as: "h".concat((_b = config.titleLevel) !== null && _b !== void 0 ? _b : 2), isInverse: isInverse, theme: theme }, resolvedTitle),
         React__namespace.createElement(ToolbarActions, { theme: theme },
             showTable && (React__namespace.createElement(ChartTableButton, { ariaLabel: resolvedTitle, icon: React__namespace.createElement(reactMagmaIcons.TableIcon, { size: 20 }), isInverse: isInverse, isTableOpen: isTableOpen, onClick: onOpenTable })),
             showFullscreen && (React__namespace.createElement(ChartFullscreenButton, { ariaLabel: "".concat(isFullscreen ? 'Exit' : 'View', " ").concat(resolvedTitle, " full screen"), icon: React__namespace.createElement(reactMagmaIcons.FullscreenIcon, { size: 20 }), exitIcon: React__namespace.createElement(reactMagmaIcons.FullscreenExitIcon, { size: 20 }), isInverse: isInverse, isFullscreen: isFullscreen, onClick: onToggleFullscreen })),
@@ -1503,7 +1504,9 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
     var internalRef = React__namespace.useRef(null);
     var _a = React__namespace.useState(false), isTableOpen = _a[0], setIsTableOpen = _a[1];
     var _b = React__namespace.useState(false), isFullscreen = _b[0], setIsFullscreen = _b[1];
+    var _c = React__namespace.useState(''), legendAnnouncement = _c[0], setLegendAnnouncement = _c[1];
     var lastTableTriggerRef = React__namespace.useRef(null);
+    var legendAnnouncedRef = React__namespace.useRef(false);
     var mergedRef = React__namespace.useCallback(function (node) {
         internalRef.current = node;
         if (typeof ref === 'function') {
@@ -1584,8 +1587,9 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
             var parent = legend.parentElement;
             if ((parent === null || parent === void 0 ? void 0 : parent.tagName) === 'FIELDSET') {
                 var existingCaption = parent.querySelector('legend');
-                if (existingCaption)
+                if (existingCaption && existingCaption.textContent !== legendLabel) {
                     existingCaption.textContent = legendLabel;
+                }
                 return;
             }
             var fieldset = document.createElement('fieldset');
@@ -1667,9 +1671,50 @@ var CarbonChart = React__namespace.forwardRef(function (props, ref) {
         }, 0);
         return function () { return clearTimeout(timer); };
     }, [type, dataSet]);
+    React__namespace.useEffect(function () {
+        var wrapper = internalRef.current;
+        if (!wrapper)
+            return;
+        var observer = new MutationObserver(function () {
+            var allItems = wrapper.querySelectorAll('.legend-item:not(.additional)');
+            if (allItems.length <= 1)
+                return;
+            var activeLabels = [];
+            allItems.forEach(function (el) {
+                var _a;
+                var checkbox = el.querySelector('.checkbox');
+                var label = el.querySelector('p');
+                if ((checkbox === null || checkbox === void 0 ? void 0 : checkbox.getAttribute('aria-checked')) === 'true' && label) {
+                    activeLabels.push(((_a = label.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '');
+                }
+            });
+            if (activeLabels.length === 1) {
+                if (!legendAnnouncedRef.current) {
+                    legendAnnouncedRef.current = true;
+                    setLegendAnnouncement("Only ".concat(activeLabels[0], " is selected"));
+                }
+            }
+            else if (activeLabels.length === allItems.length) {
+                legendAnnouncedRef.current = false;
+                setLegendAnnouncement('All items selected');
+            }
+            else {
+                legendAnnouncedRef.current = false;
+                setLegendAnnouncement('');
+            }
+        });
+        observer.observe(wrapper, {
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['aria-checked'],
+        });
+        return function () { return observer.disconnect(); };
+    }, [type, dataSet]);
     var groupsLength = Object.keys(buildColors()).length;
     var showTable = (chartToolbar === null || chartToolbar === void 0 ? void 0 : chartToolbar.showAsTable) !== false;
     return (React__namespace.createElement(FullscreenRoot, { ref: mergedRef, isInverse: isInverse, theme: theme },
+        React__namespace.createElement(reactMagmaDom.VisuallyHidden, null,
+            React__namespace.createElement(reactMagmaDom.Announce, null, legendAnnouncement)),
         React__namespace.createElement(CarbonChartWrapper, __assign({ "data-testid": testId, isInverse: isInverse, theme: theme, className: "carbon-chart-wrapper".concat(chartToolbar ? ' has-magma-toolbar' : ''), groupsLength: groupsLength < 6 ? groupsLength : 14, role: "region", "aria-label": ariaLabel || chartTitle, "aria-roledescription": "chart" }, rest),
             React__namespace.createElement(ChartContentWrapper, null,
                 chartToolbar && (React__namespace.createElement(CarbonChartToolbar, { config: chartToolbar, dataSet: dataSet, isInverse: isInverse, isTableOpen: isTableOpen, isFullscreen: isFullscreen, onOpenTable: openTableModal, onToggleFullscreen: toggleFullscreen, theme: theme, title: chartTitle, wrapperRef: internalRef })),