@fluentui/react-charting 4.23.17 → 4.23.19

package/dist/react-charting.js

@@ -21807,6 +21807,13 @@ var Arc = /** @class */ (function (_super) {
         _this._onBlur = function () {
             _this.props.onBlurCallback();
         };
+        _this._getAriaLabel = function () {
+            var _a;
+            var point = _this.props.data.data;
+            var legend = point.xAxisCalloutData || point.legend;
+            var yValue = point.yAxisCalloutData || point.data || 0;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? legend + ", " : '') + (yValue + ".");
+        };
         return _this;
     }
     Arc.getDerivedStateFromProps = function (nextProps) {
@@ -21829,7 +21836,7 @@ var Arc = /** @class */ (function (_super) {
         var opacity = this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '' ? 1 : 0.1;
         return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("g", { ref: this.currentRef },
             !!focusedArcId && focusedArcId === id && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", { id: id + 'focusRing', d: arc(this.props.focusData), className: classNames.focusRing })),
-            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", { id: id, d: arc(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": true, onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, opacity: opacity, onClick: href ? this._redirectToUrl.bind(this, href) : (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick, "aria-labelledby": this.props.calloutId, role: "text" }),
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", { id: id, d: arc(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": true, onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, opacity: opacity, onClick: href ? this._redirectToUrl.bind(this, href) : (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("text", { textAnchor: 'middle', className: classNames.insideDonutString, y: 5 }, this.props.valueInsideDonut)));
     };
     Arc.prototype._onFocus = function (data, id) {
@@ -22438,7 +22445,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 pointData.data &&
                     singleGroup.push(react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("rect", { className: _this._classNames.opacityChangeOnHover, key: singleSet.indexNum + "-" + index, height: Math.max(yBarScale(pointData.data), 0), width: widthOfBar, x: xScale1(datasetKey), y: Math.max(containerHeight - _this.margins.bottom - yBarScale(pointData.data), 0), "data-is-focusable": !_this.props.hideTooltip, opacity: _this._getOpacity(pointData.legend), ref: function (e) {
                             _this._refCallback(e, pointData.legend, refIndexNumber);
-                        }, fill: pointData.color, onMouseOver: _this._onBarHover.bind(_this, pointData, singleSet), onMouseMove: _this._onBarHover.bind(_this, pointData, singleSet), onMouseOut: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, pointData, singleSet, refIndexNumber), onBlur: _this._onBarLeave, onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : pointData.onClick, "aria-labelledby": "toolTip" + _this._calloutId, role: "text" }));
+                        }, fill: pointData.color, onMouseOver: _this._onBarHover.bind(_this, pointData, singleSet), onMouseMove: _this._onBarHover.bind(_this, pointData, singleSet), onMouseOut: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, pointData, singleSet, refIndexNumber), onBlur: _this._onBarLeave, onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : pointData.onClick, "aria-label": _this._getAriaLabel(pointData, singleSet.xAxisPoint), role: "img" }));
             });
             // Used to display tooltip at x axis labels.
             if (!_this.props.wrapXAxisLables && _this.props.showXAxisLablesTooltip) {
@@ -22548,6 +22555,13 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
                 _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
             }
         };
+        _this._getAriaLabel = function (point, xAxisPoint) {
+            var _a;
+            var xValue = point.xAxisCalloutData || xAxisPoint;
+            var legend = point.legend;
+            var yValue = point.yAxisCalloutData || point.data;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || xValue + ". " + legend + ", " + yValue + ".";
+        };
         _this._createSet = Object(office_ui_fabric_react_lib_Utilities__WEBPACK_IMPORTED_MODULE_7__["memoizeFunction"])(function (data) { return _this._createDataSetOfGVBC(data); });
         _this.state = {
             color: '',
@@ -22823,11 +22837,9 @@ var HeatMapChartBase = /** @class */ (function (_super) {
                  */
                 _this._dataSet[yAxisDataPoint].forEach(function (dataPointObject, index2) {
                     var id = "" + index1 + index2;
-                    var rectElement = (react__WEBPACK_IMPORTED_MODULE_6__["createElement"]("g", Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ key: id }, (_this.state.calloutId && {
-                        'aria-labelledby': "" + _this.state.calloutId,
-                    }), { "data-is-focusable": true, fillOpacity: _this._getOpacity(dataPointObject.legend), transform: "translate(" + _this._xAxisScale(dataPointObject.x) + ", " + _this._yAxisScale(dataPointObject.y) + ")", ref: function (gElement) {
+                    var rectElement = (react__WEBPACK_IMPORTED_MODULE_6__["createElement"]("g", { key: id, role: "img", "aria-label": _this._getAriaLabel(dataPointObject), "data-is-focusable": true, fillOpacity: _this._getOpacity(dataPointObject.legend), transform: "translate(" + _this._xAxisScale(dataPointObject.x) + ", " + _this._yAxisScale(dataPointObject.y) + ")", ref: function (gElement) {
                             _this._rectRefCallback(gElement, id, dataPointObject);
-                        }, onFocus: _this._onRectFocus.bind(_this, id, dataPointObject), onBlur: _this._onRectBlurOrMouseOut, onMouseOver: _this._onRectMouseOver.bind(_this, id, dataPointObject), onMouseOut: _this._onRectBlurOrMouseOut }),
+                        }, onFocus: _this._onRectFocus.bind(_this, id, dataPointObject), onBlur: _this._onRectBlurOrMouseOut, onMouseOver: _this._onRectMouseOver.bind(_this, id, dataPointObject), onMouseOut: _this._onRectBlurOrMouseOut },
                         react__WEBPACK_IMPORTED_MODULE_6__["createElement"]("rect", { fill: _this._colorScale(dataPointObject.value), width: _this._xAxisScale.bandwidth(), height: _this._yAxisScale.bandwidth(), onClick: dataPointObject.onClick }),
                         react__WEBPACK_IMPORTED_MODULE_6__["createElement"]("text", { dominantBaseline: 'middle', textAnchor: 'middle', className: _this._classNames.text, transform: "translate(" + _this._xAxisScale.bandwidth() / 2 + ", " + _this._yAxisScale.bandwidth() / 2 + ")" }, Object(_utilities_utilities__WEBPACK_IMPORTED_MODULE_8__["convertToLocaleString"])(dataPointObject.rectText, _this.props.culture))));
                     rectangles.push(rectElement);
@@ -23166,6 +23178,16 @@ var HeatMapChartBase = /** @class */ (function (_super) {
                 isCalloutVisible: false,
             });
         };
+        _this._getAriaLabel = function (point) {
+            var _a;
+            var xValue = point.x;
+            var yValue = point.y;
+            var legend = point.legend;
+            var zValue = point.ratio ? point.ratio[0] + "/" + point.ratio[1] : point.rectText || point.value;
+            var description = point.descriptionMessage;
+            return (((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) ||
+                xValue + ", " + yValue + ". " + legend + ", " + zValue + "." + (description ? " " + description + "." : ''));
+        };
         var _a = _this._getXandY(), x = _a.x, y = _a.y;
         _this._xAxisType = Object(_utilities_utilities__WEBPACK_IMPORTED_MODULE_8__["getTypeOfAxis"])(x, true);
         _this._yAxisType = Object(_utilities_utilities__WEBPACK_IMPORTED_MODULE_8__["getTypeOfAxis"])(y, false);
@@ -23357,6 +23379,13 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                 isCalloutVisible: false,
             });
         };
+        _this._getAriaLabel = function (point) {
+            var _a;
+            var legend = point.xAxisCalloutData || point.legend;
+            var yValue = point.yAxisCalloutData ||
+                (point.horizontalBarChartdata ? point.horizontalBarChartdata.x + "/" + point.horizontalBarChartdata.y : 0);
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? legend + ", " : '') + (yValue + ".");
+        };
         _this.state = {
             isCalloutVisible: false,
             hoverValue: '',
@@ -23422,7 +23451,7 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                                         if (p && p.onClick) {
                                             p.onClick();
                                         }
-                                    }, "aria-labelledby": _this._calloutId, role: "img", "aria-label": "Horizontal bar chart", "data-is-focusable": true, onBlur: _this._hoverOff, onMouseLeave: _this._hoverOff }, bars))))));
+                                    }, role: "img", "aria-label": _this._getAriaLabel(points.chartData[0]), "data-is-focusable": true, onBlur: _this._hoverOff, onMouseLeave: _this._hoverOff }, bars))))));
             }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_3__["Callout"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ target: this.state.refSelected, coverTarget: true, isBeakVisible: false, gapSpace: 30, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_3__["DirectionalHint"].rightTopEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps, Object(_utilities_index__WEBPACK_IMPORTED_MODULE_4__["getAccessibleDataObject"])(this.state.callOutAccessibilityData)),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, this.props.onRenderCalloutPerHorizonalBar ? (this.props.onRenderCalloutPerHorizonalBar(this.state.barCalloutProps)) : (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_utilities_index__WEBPACK_IMPORTED_MODULE_4__["ChartHoverCard"], { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue, color: this.state.lineColor, culture: this.props.culture }))))));
@@ -25375,6 +25404,12 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
                 isCalloutVisible: false,
             });
         };
+        _this._getAriaLabel = function (point) {
+            var _a;
+            var legend = point.xAxisCalloutData || point.legend;
+            var yValue = point.yAxisCalloutData || point.data || 0;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? legend + ", " : '') + (yValue + ".");
+        };
         _this.state = {
             isCalloutVisible: false,
             refArray: [],
@@ -25452,7 +25487,7 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
             }
             return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("g", { key: index, className: point.placeHolder ? _this._classNames.placeHolderOnHover : _this._classNames.opacityChangeOnHover, ref: function (e) {
                     _this._refCallback(e, point.legend);
-                }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, "aria-labelledby": _this._calloutId, role: "img", "aria-label": "Multi stacked bar chart", onMouseOver: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: point.placeHolder ? undefined : _this._onBarLeave, onClick: href ? (point.placeHolder ? undefined : _this._redirectToUrl.bind(_this, href)) : point.onClick },
+                }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, role: "img", "aria-label": _this._getAriaLabel(point), onMouseOver: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: point.placeHolder ? undefined : _this._onBarLeave, onClick: href ? (point.placeHolder ? undefined : _this._redirectToUrl.bind(_this, href)) : point.onClick },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("rect", { key: index, x: startingPoint[index] + '%', y: 0, width: value + '%', height: barHeight, fill: color })));
         });
         if (data.chartData.length === 0) {
@@ -25708,6 +25743,12 @@ var StackedBarChartBase = /** @class */ (function (_super) {
                 isCalloutVisible: false,
             });
         };
+        _this._getAriaLabel = function (point) {
+            var _a;
+            var legend = point.xAxisCalloutData || point.legend;
+            var yValue = point.yAxisCalloutData || point.data || 0;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? legend + ", " : '') + (yValue + ".");
+        };
         _this.state = {
             isCalloutVisible: false,
             selectedLegendTitle: '',
@@ -25855,7 +25896,7 @@ var StackedBarChartBase = /** @class */ (function (_super) {
             }
             return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("g", { key: index, className: _this._classNames.opacityChangeOnHover, ref: function (e) {
                     _this._refCallback(e, legend.title);
-                }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, "aria-labelledby": _this._calloutId, "aria-label": "Stacked bar chart", role: "img", onMouseOver: _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: _this._onBarLeave, pointerEvents: "all", onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : point.onClick },
+                }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, "aria-label": _this._getAriaLabel(point), role: "img", onMouseOver: _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: _this._onBarLeave, pointerEvents: "all", onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : point.onClick },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("rect", { key: index, x: startingPoint[index] + '%', y: 0, width: value + '%', height: barHeight, fill: color })));
         });
         // add benchmark legends
@@ -26822,6 +26863,19 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
                 _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
             }
         };
+        _this._getAriaLabel = function (point) {
+            var _a, _b, _c;
+            var xValue = point.xAxisCalloutData || point.x;
+            var legend = point.legend;
+            var yValue = point.yAxisCalloutData || point.y;
+            var lineLegend = _this.props.lineLegendText || 'Line';
+            var lineYValue = ((_a = point.lineData) === null || _a === void 0 ? void 0 : _a.yAxisCalloutData) || ((_b = point.lineData) === null || _b === void 0 ? void 0 : _b.y);
+            return (((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel) ||
+                xValue + ". " +
+                    (legend ? legend + ", " : '') +
+                    (yValue + ".") +
+                    (typeof lineYValue !== 'undefined' ? " " + lineLegend + ", " + lineYValue + "." : ''));
+        };
         _this.state = {
             color: '',
             dataForHoverCard: 0,
@@ -26941,7 +26995,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             }
             return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("rect", { key: point.x, x: xBarScale(point.x), className: _this._classNames.opacityChangeOnHover, y: containerHeight - _this.margins.bottom - yBarScale(point.y), width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip, height: barHeight, ref: function (e) {
                     _this._refCallback(e, point.legend);
-                }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, colorScale(point.y)), "aria-labelledby": "toolTip" + _this._calloutId, "aria-label": "Vertical bar chart", role: "text", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, colorScale(point.y)), onBlur: _this._onBarLeave, fill: point.color && !useSingleColor ? point.color : colorScale(point.y) }));
+                }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, colorScale(point.y)), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, colorScale(point.y)), onBlur: _this._onBarLeave, fill: point.color && !useSingleColor ? point.color : colorScale(point.y) }));
         });
         // Removing un wanted tooltip div from DOM, when prop not provided.
         if (!this.props.showXAxisLablesTooltip) {
@@ -26977,7 +27031,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
             if (barHeight < 1) {
                 return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], { key: point.x }, " ");
             }
-            return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("rect", { key: point.x, x: xBarScale(point.x), y: containerHeight - _this.margins.bottom - yBarScale(point.y), width: _this._barWidth, height: barHeight, "aria-labelledby": "toolTip" + _this._calloutId, "aria-label": "Vertical bar chart", role: "text", ref: function (e) {
+            return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("rect", { key: point.x, x: xBarScale(point.x), y: containerHeight - _this.margins.bottom - yBarScale(point.y), width: _this._barWidth, height: barHeight, "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
                     _this._refCallback(e, point.legend);
                 }, onMouseOver: _this._onBarHover.bind(_this, point, colorScale(point.y)), onMouseLeave: _this._onBarLeave, onBlur: _this._onBarLeave, onClick: point.onClick, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, point, index, colorScale(point.y)), fill: point.color ? point.color : colorScale(point.y), transform: "translate(" + 0.5 * (xBarScale.bandwidth() - _this._barWidth) + ", 0)" }));
         });
@@ -27364,7 +27418,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     });
                     var rectFocusProps = !shouldFocusWholeStack && {
                         'data-is-focusable': !_this.props.hideTooltip,
-                        'aria-labelledby': "toolTip" + _this._calloutId,
+                        'aria-label': _this._getAriaLabel(singleChartData, point),
                         onMouseOver: _this._onRectHover.bind(_this, singleChartData.xAxisPoint, point, color),
                         onMouseMove: _this._onRectHover.bind(_this, singleChartData.xAxisPoint, point, color),
                         onMouseLeave: _this._handleMouseOut,
@@ -27385,19 +27439,19 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                     if (barHeight < 1) {
                         return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], { key: index + indexNumber }, " ");
                     }
-                    return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("rect", Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ key: index + indexNumber + ("" + shouldFocusWholeStack), className: classNames.opacityChangeOnHover, x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, fill: color, ref: function (e) { return (ref.refElement = e); } }, rectFocusProps, { role: "text", transform: "translate(" + xScaleBandwidthTranslate + ", 0)" })));
+                    return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("rect", Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ key: index + indexNumber + ("" + shouldFocusWholeStack), className: classNames.opacityChangeOnHover, x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, fill: color, ref: function (e) { return (ref.refElement = e); } }, rectFocusProps, { role: "img", transform: "translate(" + xScaleBandwidthTranslate + ", 0)" })));
                 });
                 var groupRef = {};
                 var stackFocusProps = shouldFocusWholeStack && {
                     'data-is-focusable': !_this.props.hideTooltip,
-                    'aria-labelledby': "toolTip" + _this._calloutId,
+                    'aria-label': _this._getAriaLabel(singleChartData),
                     onMouseOver: _this._onStackHover.bind(_this, singleChartData),
                     onMouseMove: _this._onStackHover.bind(_this, singleChartData),
                     onMouseLeave: _this._handleMouseOut,
                     onFocus: _this._onStackFocus.bind(_this, singleChartData, groupRef),
                     onBlur: _this._handleMouseOut,
                     onClick: _this._onClick.bind(_this, singleChartData),
-                    role: 'text',
+                    role: 'img',
                 };
                 return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("g", Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ key: indexNumber + ("" + shouldFocusWholeStack), id: indexNumber + "-singleBar", ref: function (e) { return (groupRef.refElement = e); } }, stackFocusProps), singleBar));
             });
@@ -27480,6 +27534,32 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
                 _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
             }
         };
+        _this._getAriaLabel = function (singleChartData, point) {
+            var _a, _b, _c;
+            if (!point) {
+                /** if shouldFocusWholeStack is true */
+                var xVal = singleChartData.xAxisCalloutData || singleChartData.xAxisPoint;
+                var pointValues = singleChartData.chartData
+                    .map(function (pt) {
+                    var leg = pt.legend;
+                    var yVal = pt.yAxisCalloutData || pt.data;
+                    return leg + ", " + yVal + ".";
+                })
+                    .join(' ');
+                var lineValues = (_a = singleChartData.lineData) === null || _a === void 0 ? void 0 : _a.map(function (ln) {
+                    var leg = ln.legend;
+                    var yVal = ln.yAxisCalloutData || ln.data || ln.y;
+                    return leg + ", " + yVal + ".";
+                }).join(' ');
+                return (((_b = singleChartData.stackCallOutAccessibilityData) === null || _b === void 0 ? void 0 : _b.ariaLabel) ||
+                    xVal + ". " + pointValues + (lineValues ? " " + lineValues : ''));
+            }
+            /** if shouldFocusWholeStack is false */
+            var xValue = singleChartData.xAxisCalloutData || point.xAxisCalloutData || singleChartData.xAxisPoint;
+            var legend = point.legend;
+            var yValue = point.yAxisCalloutData || point.data;
+            return ((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel) || xValue + ". " + legend + ", " + yValue + ".";
+        };
         _this.state = {
             isCalloutVisible: false,
             isLegendSelected: false,
@@ -28953,7 +29033,7 @@ __webpack_require__.r(__webpack_exports__);
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 
-Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('@uifabric/charting', '4.23.16');
+Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('@uifabric/charting', '4.23.18');
 
 
 /***/ }),
@@ -42073,7 +42153,7 @@ var CalloutContentBase = /** @class */ (function (_super) {
         // eslint-disable-next-line deprecation/deprecation
         _c = _a.shouldRestoreFocus, 
         // eslint-disable-next-line deprecation/deprecation
-        shouldRestoreFocus = _c === void 0 ? true : _c;
+        shouldRestoreFocus = _c === void 0 ? true : _c, popupProps = _a.popupProps;
         target = this._getTarget();
         var positions = this.state.positions;
         var getContentMaxHeight = this._getMaxHeight()
@@ -42105,7 +42185,7 @@ var CalloutContentBase = /** @class */ (function (_super) {
                 tabIndex: -1, ref: this._calloutElement }),
                 beakVisible && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this._classNames.beak, style: this._getBeakPosition() }),
                 beakVisible && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this._classNames.beakCurtain }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_Popup__WEBPACK_IMPORTED_MODULE_5__["Popup"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, Object(_Utilities__WEBPACK_IMPORTED_MODULE_3__["getNativeProps"])(this.props, ARIA_ROLE_ATTRIBUTES), { ariaLabel: ariaLabel, onRestoreFocus: this.props.onRestoreFocus, ariaDescribedBy: ariaDescribedBy, ariaLabelledBy: ariaLabelledBy, className: this._classNames.calloutMain, onDismiss: this.dismiss, onScroll: onScroll, shouldRestoreFocus: shouldRestoreFocus, style: overflowStyle, onMouseDown: this._mouseDownOnPopup, onMouseUp: this._mouseUpOnPopup }), children))));
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_Popup__WEBPACK_IMPORTED_MODULE_5__["Popup"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, Object(_Utilities__WEBPACK_IMPORTED_MODULE_3__["getNativeProps"])(this.props, ARIA_ROLE_ATTRIBUTES), { ariaLabel: ariaLabel, onRestoreFocus: this.props.onRestoreFocus, ariaDescribedBy: ariaDescribedBy, ariaLabelledBy: ariaLabelledBy, className: this._classNames.calloutMain, onDismiss: this.dismiss, onScroll: onScroll, shouldRestoreFocus: shouldRestoreFocus, style: overflowStyle, onMouseDown: this._mouseDownOnPopup, onMouseUp: this._mouseUpOnPopup }, popupProps), children))));
         return content;
     };
     CalloutContentBase.prototype._dismissOnClickOrScroll = function (ev) {
@@ -92354,7 +92434,7 @@ __webpack_require__.r(__webpack_exports__);
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 
-Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('office-ui-fabric-react', '7.199.6');
+Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('office-ui-fabric-react', '7.201.0');
 
 
 /***/ }),