@fluentui/react-charting 5.23.85 → 5.23.86

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js

@@ -18,11 +18,6 @@ var COMPONENT_NAME = 'VERTICAL STACKED BAR CHART';
 var barGapMultiplier = 0.2;
 var barGapMin = 1;
 var MIN_DOMAIN_MARGIN = 8;
-var CircleVisbility;
-(function (CircleVisbility) {
-    CircleVisbility["show"] = "visibility";
-    CircleVisbility["hide"] = "hidden";
-})(CircleVisbility || (CircleVisbility = {}));
 var VerticalStackedBarChartBase = /** @class */ (function (_super) {
     __extends(VerticalStackedBarChartBase, _super);
     function VerticalStackedBarChartBase(props) {
@@ -132,23 +127,28 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     if (lineBorderWidth > 0) {
                         borderForLines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-BorderLine"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3 + lineBorderWidth * 2, fill: "transparent", strokeLinecap: "round", stroke: theme.semanticColors.bodyBackground, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }));
                     }
-                    lines.push(React.createElement("line", __assign({ key: "".concat(index, "-").concat(i, "-line"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: (_b = (_a = lineObject[item][0].lineOptions) === null || _a === void 0 ? void 0 : _a.strokeWidth) !== null && _b !== void 0 ? _b : 3, strokeLinecap: (_d = (_c = lineObject[item][0].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeLinecap) !== null && _d !== void 0 ? _d : 'round', strokeDasharray: (_e = lineObject[item][0].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeDasharray, stroke: lineObject[item][i].color, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }, (_this._isLegendHighlighted(item) && {
-                        onMouseOver: _this._lineHover.bind(_this, lineObject[item][i - 1]),
-                        onMouseLeave: _this._lineHoverOut,
-                    }))));
+                    lines.push(React.createElement("line", { key: "".concat(index, "-").concat(i, "-line"), x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: (_b = (_a = lineObject[item][0].lineOptions) === null || _a === void 0 ? void 0 : _a.strokeWidth) !== null && _b !== void 0 ? _b : 3, strokeLinecap: (_d = (_c = lineObject[item][0].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeLinecap) !== null && _d !== void 0 ? _d : 'round', strokeDasharray: (_e = lineObject[item][0].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeDasharray, stroke: lineObject[item][i].color, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), onMouseOver: _this._lineHover.bind(_this, lineObject[item][i - 1]), onMouseLeave: _this._handleMouseOut }));
                 }
             });
             Object.keys(lineObject).forEach(function (item, index) {
                 lineObject[item].forEach(function (circlePoint, subIndex) {
                     // Create an object to store line point ref so that the object can be passed by reference to the focus handler
                     var circleRef = { refElement: null };
+                    var noBarsActive = circlePoint.xItem.chartData.filter(function (dataPoint) { return _this._noLegendHighlighted() || _this._isLegendHighlighted(dataPoint.legend); }).length === 0;
                     dots.push(React.createElement("circle", __assign({ key: "".concat(index, "-").concat(subIndex, "-dot"), cx: xScale(circlePoint.xItem.xAxisPoint), cy: circlePoint.useSecondaryYScale && yScaleSecondary
                             ? yScaleSecondary(circlePoint.y)
-                            : yScalePrimary(circlePoint.y), onMouseOver: _this._isLegendHighlighted(item)
-                            ? _this._lineHover.bind(_this, circlePoint)
-                            : _this._onStackHover.bind(_this, circlePoint.xItem) }, (_this._isLegendHighlighted(item) && {
-                        onMouseLeave: _this._lineHoverOut,
-                    }), { r: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, visibility: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).visibility, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), "data-is-focusable": _this._isLegendHighlighted(item), ref: function (e) { return (circleRef.refElement = e); }, onFocus: _this._lineFocus.bind(_this, circlePoint, circleRef), onBlur: _this._lineHoverOut })));
+                            : yScalePrimary(circlePoint.y), onMouseOver: _this._lineHover.bind(_this, circlePoint), onMouseLeave: _this._handleMouseOut, r: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, 
+                        // Elements with visibility: hidden cannot receive focus, so use opacity: 0 instead to hide them.
+                        // For more information, see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
+                        opacity: _this._getCircleOpacityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).opacity, transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)"), ref: function (e) { return (circleRef.refElement = e); } }, (noBarsActive && (_this._noLegendHighlighted() || _this._isLegendHighlighted(item))
+                        ? {
+                            'data-is-focusable': !_this.props.hideTooltip,
+                            onFocus: _this._lineFocus.bind(_this, circlePoint, circleRef),
+                            onBlur: _this._handleMouseOut,
+                            role: 'img',
+                            'aria-label': _this._getAriaLabel(circlePoint.xItem, circlePoint, true),
+                        }
+                        : {}))));
                 });
             });
             return (React.createElement(React.Fragment, null,
@@ -156,22 +156,22 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 lines,
                 dots));
         };
-        _this._getCircleVisibilityAndRadius = function (xAxisPoint, legend) {
+        _this._getCircleOpacityAndRadius = function (xAxisPoint, legend) {
             var activeXAxisDataPoint = _this.state.activeXAxisDataPoint;
             if (!_this._noLegendHighlighted()) {
                 if (xAxisPoint === activeXAxisDataPoint && _this._isLegendHighlighted(legend)) {
-                    return { visibility: CircleVisbility.show, radius: 8 };
+                    return { opacity: 1, radius: 8 };
                 }
                 else if (_this._isLegendHighlighted(legend)) {
-                    return { visibility: CircleVisbility.show, radius: 0.3 };
+                    return { opacity: 1, radius: 0.3 };
                 }
                 else {
-                    return { visibility: CircleVisbility.hide, radius: 0 };
+                    return { opacity: 0, radius: 0 };
                 }
             }
             else {
                 return {
-                    visibility: activeXAxisDataPoint === xAxisPoint ? CircleVisbility.show : CircleVisbility.hide,
+                    opacity: activeXAxisDataPoint === xAxisPoint ? 1 : 0,
                     radius: 8,
                 };
             }
@@ -191,30 +191,27 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
             mouseEvent.persist();
             _this._lineHoverFocus(lineData, mouseEvent);
         };
-        _this._lineHoverOut = function () {
-            _this.setState({
-                refSelected: null,
-                isCalloutVisible: false,
-                xCalloutValue: '',
-                yCalloutValue: '',
-                activeXAxisDataPoint: '',
-                color: '',
-            });
-        };
         _this._lineFocus = function (lineData, ref) {
             if (ref.refElement) {
                 _this._lineHoverFocus(lineData, ref.refElement);
             }
         };
         _this._lineHoverFocus = function (lineData, refSelected) {
-            _this.setState({
-                refSelected: refSelected,
-                isCalloutVisible: true,
-                xCalloutValue: "".concat(lineData.xItem.xAxisPoint),
-                yCalloutValue: "".concat(lineData.yAxisCalloutData || lineData.data || lineData.y),
-                activeXAxisDataPoint: lineData.xItem.xAxisPoint,
-                color: lineData.color,
-            });
+            if (_this._getHighlightedLegend().length === 1) {
+                if (_this._noLegendHighlighted() || _this._isLegendHighlighted(lineData.legend)) {
+                    _this.setState({
+                        refSelected: refSelected,
+                        isCalloutVisible: true,
+                        xCalloutValue: "".concat(lineData.xItem.xAxisPoint),
+                        yCalloutValue: "".concat(lineData.yAxisCalloutData || lineData.data || lineData.y),
+                        activeXAxisDataPoint: lineData.xItem.xAxisPoint,
+                        color: lineData.color,
+                    });
+                }
+            }
+            else {
+                _this._onStackHoverFocus(lineData.xItem, refSelected);
+            }
         };
         _this._handleMouseOut = function () {
             /**/
@@ -275,8 +272,9 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                         shouldHighlight: shouldHighlight,
                         href: _this.props.href,
                     });
-                    var rectFocusProps = !shouldFocusWholeStack && {
-                        'data-is-focusable': !_this.props.hideTooltip && shouldHighlight,
+                    var rectFocusProps = !shouldFocusWholeStack &&
+                        shouldHighlight && {
+                        'data-is-focusable': !_this.props.hideTooltip,
                         'aria-label': _this._getAriaLabel(singleChartData, point),
                         onMouseOver: _this._onRectHover.bind(_this, singleChartData.xAxisPoint, point, startColor),
                         onMouseMove: _this._onRectHover.bind(_this, singleChartData.xAxisPoint, point, startColor),
@@ -323,7 +321,12 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                         React.createElement("rect", __assign({ className: _this._classNames.opacityChangeOnHover, x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, ref: function (e) { return (ref.refElement = e); } }, rectFocusProps, { transform: "translate(".concat(xScaleBandwidthTranslate, ", 0)") }))));
                 });
                 var groupRef = {};
-                var stackFocusProps = shouldFocusWholeStack && {
+                var someBarsActive = singleChartData.chartData.filter(function (dataPoint) { return _this._noLegendHighlighted() || _this._isLegendHighlighted(dataPoint.legend); }).length > 0;
+                // FIXME: Making the entire stack focusable when stack callout is enabled adds unnecessary complexity
+                // and can reduce usability in certain scenarios. Instead, each individual element within the stack
+                // should be focusable on its own, with its own aria-label. This behavior is also seen in Highcharts.
+                var stackFocusProps = shouldFocusWholeStack &&
+                    someBarsActive && {
                     'data-is-focusable': !_this.props.hideTooltip,
                     'aria-label': _this._getAriaLabel(singleChartData),
                     onMouseOver: _this._onStackHover.bind(_this, singleChartData),
@@ -452,7 +455,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
         _this._noLegendHighlighted = function () {
             return _this._getHighlightedLegend().length === 0;
         };
-        _this._getAriaLabel = function (singleChartData, point) {
+        _this._getAriaLabel = function (singleChartData, point, isLinePoint) {
             var _a, _b, _c;
             if (!point) {
                 /** if shouldFocusWholeStack is true */
@@ -464,26 +467,29 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     .map(function (pt) {
                     var legend = pt.legend;
                     var yValue = pt.yAxisCalloutData || pt.data;
-                    return "".concat(legend, ", ").concat(yValue, ".");
+                    return _this._noLegendHighlighted() || _this._isLegendHighlighted(legend) ? "".concat(legend, ", ").concat(yValue, ".") : '';
                 })
+                    .filter(function (str) { return str !== ''; })
                     .join(' ');
                 var lineValues = (_a = singleChartData.lineData) === null || _a === void 0 ? void 0 : _a.map(function (ln) {
                     var legend = ln.legend;
                     var yValue = ln.yAxisCalloutData || ln.data || ln.y;
-                    return "".concat(legend, ", ").concat(yValue, ".");
-                }).join(' ');
+                    return _this._noLegendHighlighted() || _this._isLegendHighlighted(legend) ? "".concat(legend, ", ").concat(yValue, ".") : '';
+                }).filter(function (str) { return str !== ''; }).join(' ');
                 return (((_b = singleChartData.stackCallOutAccessibilityData) === null || _b === void 0 ? void 0 : _b.ariaLabel) ||
                     "".concat(xValue_1, ". ").concat(pointValues) + (lineValues ? " ".concat(lineValues) : ''));
             }
             /** if shouldFocusWholeStack is false */
             var xValue = singleChartData.xAxisCalloutData ||
-                point.xAxisCalloutData ||
+                (!isLinePoint && point.xAxisCalloutData) ||
                 (singleChartData.xAxisPoint instanceof Date
                     ? formatDate(singleChartData.xAxisPoint)
                     : singleChartData.xAxisPoint);
             var legend = point.legend;
-            var yValue = point.yAxisCalloutData || point.data;
-            return ((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
+            var yValue = point.yAxisCalloutData ||
+                (isLinePoint ? point.data || point.y : point.data);
+            return ((!isLinePoint && ((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel)) ||
+                "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, "."));
         };
         _this._getDomainMargins = function (containerWidth) {
             var _a;