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

package/dist/charts.js

@@ -1503,7 +1503,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 +1586,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 +1670,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 })),