@fluentui/react-charting 5.19.27 → 5.19.28

package/etc/react-charting.api.md

@@ -1094,6 +1094,13 @@ export interface IRefArrayData {
     refElement?: SVGGElement;
 }
 
+// @public
+export interface ISankeyChartAccessibilityProps {
+    emptyAriaLabel?: string;
+    linkAriaLabel?: string;
+    nodeAriaLabel?: string;
+}
+
 // @public (undocumented)
 export interface ISankeyChartData {
     // (undocumented)
@@ -1104,6 +1111,7 @@ export interface ISankeyChartData {
 
 // @public
 export interface ISankeyChartProps {
+    accessibility?: ISankeyChartAccessibilityProps;
     borderColorsForNodes?: string[];
     className?: string;
     colorsForNodes?: string[];
@@ -1112,11 +1120,17 @@ export interface ISankeyChartProps {
     parentRef?: HTMLElement | null;
     pathColor?: string;
     shouldResize?: number;
+    strings?: ISankeyChartStrings;
     styles?: IStyleFunctionOrObject<ISankeyChartStyleProps, ISankeyChartStyles>;
     theme?: ITheme;
     width?: number;
 }
 
+// @public
+export interface ISankeyChartStrings {
+    linkFrom?: string;
+}
+
 // @public
 export interface ISankeyChartStyleProps {
     // (undocumented)

package/lib/components/SankeyChart/SankeyChart.base.d.ts

@@ -52,6 +52,8 @@ export declare class SankeyChartBase extends React.Component<ISankeyChartProps,
     private readonly _linkAttributes;
     private readonly _fetchNodes;
     private readonly _fetchLinks;
+    private readonly _strings;
+    private readonly _accessibility;
     constructor(props: ISankeyChartProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: ISankeyChartProps): void;

package/lib/components/SankeyChart/SankeyChart.base.js

@@ -1,7 +1,7 @@
 import { __assign, __extends } from "tslib";
 import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
-import { classNamesFunction, getId, getRTL, memoizeFunction, } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, format, getId, getRTL, memoizeFunction, } from '@fluentui/react/lib/Utilities';
 import { sum as d3Sum } from 'd3-array';
 import { sankey as d3Sankey, sankeyJustify, sankeyRight } from 'd3-sankey';
 import { select, selectAll } from 'd3-selection';
@@ -358,7 +358,7 @@ function computeElipsisLength(tspan) {
     var measurement = measureText(tspan, elipsis);
     return measurement === undefined ? 0 : measurement;
 }
-function computeNodeAttributes(nodes) {
+function computeNodeAttributes(nodes, nodeAriaLabel) {
     var result = {};
     var weightSpan = select('.nodeName').append('text').attr('class', 'tempText').append('tspan').text(null);
     var nameSpan = select('.nodeName')
@@ -371,13 +371,14 @@ function computeNodeAttributes(nodes) {
         var height = Math.max(singleNode.y1 - singleNode.y0, 0);
         var padding = 8;
         var textLengthForNodeWeight = 0;
+        var nodeValue = singleNode.actualValue;
         // If the nodeWeight is in the same line as node description an extra padding
         // of 6 px is required between node description and node weight.
         if (height < MIN_HEIGHT_FOR_DOUBLINE_TYPE) {
             padding = padding + 6;
             // The following `select` statement injects a `tempText` element into the DOM. This injection
             // (and subsequent removal) is causing a layout recalculation. This is a performance issue.
-            var measurement = measureText(weightSpan, singleNode.actualValue);
+            var measurement = measureText(weightSpan, nodeValue);
             if (measurement !== undefined) {
                 textLengthForNodeWeight = measurement;
                 padding = padding + textLengthForNodeWeight;
@@ -391,6 +392,7 @@ function computeNodeAttributes(nodes) {
             reactId: getId('nodeBar'),
             gElementId: getId('nodeGElement'),
             name: truncatedname,
+            aria: nodeAriaLabel(singleNode, nodeValue),
             trimmed: isTruncated,
             height: height,
             weightOffset: textLengthForNodeWeight,
@@ -399,7 +401,7 @@ function computeNodeAttributes(nodes) {
     selectAll('.tempText').remove();
     return result;
 }
-function computeLinkAttributes(links) {
+function computeLinkAttributes(links, linkFrom, linkAriaLabel) {
     var result = {};
     links.forEach(function (link) {
         var sourceId = idFromNumberOrSNode(link.source);
@@ -408,7 +410,11 @@ function computeLinkAttributes(links) {
             sourceToTarget = {};
             result[sourceId] = sourceToTarget;
         }
-        sourceToTarget[idFromNumberOrSNode(link.target)] = { reactId: getId('link') };
+        sourceToTarget[idFromNumberOrSNode(link.target)] = {
+            reactId: getId('link'),
+            from: linkFrom(link.source),
+            aria: linkAriaLabel(link),
+        };
     });
     return result;
 }
@@ -433,6 +439,16 @@ function nodeTextColor(state, singleNode) {
         ? DEFAULT_TEXT_COLOR
         : NON_SELECTED_TEXT_COLOR;
 }
+function linkCalloutAttributes(singleLink, from) {
+    return {
+        selectedLink: singleLink,
+        isCalloutVisible: true,
+        color: singleLink.source.color,
+        xCalloutValue: singleLink.target.name,
+        yCalloutValue: singleLink.unnormalizedValue.toString(),
+        descriptionMessage: from,
+    };
+}
 // NOTE: To start employing React.useMemo properly, we need to convert this code from a React.Component
 // to a function component. This will require a significant refactor of the code in this file.
 // https://stackoverflow.com/questions/60223362/fast-way-to-convert-react-class-component-to-functional-component
@@ -511,11 +527,36 @@ var SankeyChartBase = /** @class */ (function (_super) {
         _this._fetchTooltip = memoizeFunction(function (classNames) {
             return _this._labelTooltipDiv(classNames);
         });
-        // NOTE: Memoizing the `_createNodes` and `_createLinks` methods breaks the hoverability of the chart
-        // because the nodes are currently created differently based on the layout information.
-        _this._nodeAttributes = memoizeFunction(function (nodes) { return computeNodeAttributes(nodes); });
+        // Prepare the localization utilities
+        _this._strings = memoizeFunction(function (strings) {
+            var fromString = (strings === null || strings === void 0 ? void 0 : strings.linkFrom) || 'From {0}';
+            // NOTE: The `node` parameter is the sankey-generated node on the link, and not the original `node` supplied
+            // by the caller.
+            return {
+                linkFrom: function (node) { return format(fromString, node.name); },
+            };
+        })(props.strings);
+        _this._accessibility = memoizeFunction(function (accessibility) {
+            var linkString = (accessibility === null || accessibility === void 0 ? void 0 : accessibility.linkAriaLabel) || 'link from {0} to {1} with weight {2}';
+            var nodeString = (accessibility === null || accessibility === void 0 ? void 0 : accessibility.nodeAriaLabel) || 'node {0} with weight {1}';
+            return {
+                emptyAriaLabel: (accessibility === null || accessibility === void 0 ? void 0 : accessibility.emptyAriaLabel) || 'Graph has no data to display',
+                linkAriaLabel: function (link) {
+                    return format(linkString, link.source.name, link.target.name, link.unnormalizedValue);
+                },
+                nodeAriaLabel: function (node, weight) { return format(nodeString, node.name, weight); },
+            };
+        })(props.accessibility);
+        // NOTE: Memoizing the `_createNodes` and `_createLinks` methods would break the hoverability of the chart
+        // because the nodes are currently created differently based on the layout information. Hence why we do not
+        // memoize these methods (but have stubs for memoizing as the `_fetchNodes` and `_fetchLinks` methods).
+        _this._nodeAttributes = memoizeFunction(function (nodes, nodeAriaLabel) {
+            return computeNodeAttributes(nodes, nodeAriaLabel);
+        });
         _this._fetchNodes = function (classNames, nodes, nodeAttributes, tooltipDiv) { return _this._createNodes(classNames, nodes, nodeAttributes, tooltipDiv); };
-        _this._linkAttributes = memoizeFunction(function (links) { return computeLinkAttributes(links); });
+        _this._linkAttributes = memoizeFunction(function (links, linkFrom, linkAriaLabel) {
+            return computeLinkAttributes(links, linkFrom, linkAriaLabel);
+        });
         _this._fetchLinks = function (links, linkAttributes) {
             return _this._createLinks(links, linkAttributes);
         };
@@ -551,10 +592,10 @@ var SankeyChartBase = /** @class */ (function (_super) {
             // It might be better to perform this `fetch` within the `_showTooltip` and `_hideTooltip` methods.
             var tooltipDiv = this._fetchTooltip(classNames);
             // Pre-compute some important attributes about nodes, specifically text
-            var nodeAttributes = this._nodeAttributes(nodes);
+            var nodeAttributes = this._nodeAttributes(nodes, this._accessibility.nodeAriaLabel);
             // Build the nodes and links as rendered in the UX.
             var nodeData = this._fetchNodes(classNames, nodes, nodeAttributes, tooltipDiv);
-            var linkAttributes = this._linkAttributes(links);
+            var linkAttributes = this._linkAttributes(links, this._strings.linkFrom, this._accessibility.linkAriaLabel);
             var linkData = this._fetchLinks(links, linkAttributes);
             var calloutProps = {
                 isCalloutVisible: state.isCalloutVisible,
@@ -579,7 +620,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
                         calloutProps.isCalloutVisible && (React.createElement(Callout, __assign({}, calloutProps),
                             React.createElement(ChartHoverCard, { XValue: calloutProps.XValue, YValue: calloutProps.YValue, color: calloutProps.color, descriptionMessage: calloutProps.descriptionMessage ? calloutProps.descriptionMessage : '' })))))));
         }
-        return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+        return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": this._accessibility.emptyAriaLabel }));
     };
     SankeyChartBase.prototype._normalizeSankeyData = function (data, containerWidth, containerHeight, colorsForNodes, borderColorsForNodes) {
         var _a = preRenderLayout(this._margins, containerWidth, containerHeight, this._isRtl), sankey = _a.sankey, height = _a.height, width = _a.width;
@@ -640,7 +681,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
                 var onMouseOut = function () {
                     _this._onStreamLeave(singleLink);
                 };
-                var reactId = linkValue(linkAttributes, singleLink).reactId;
+                var _a = linkValue(linkAttributes, singleLink), reactId = _a.reactId, from = _a.from, aria = _a.aria;
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataPoints = linkToDataPoints(singleLink);
                 var key = "".concat(linkId_1, "-").concat(index);
@@ -654,7 +695,7 @@ var SankeyChartBase = /** @class */ (function (_super) {
                         React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
                             React.createElement("stop", { offset: "0", stopColor: source.color }),
                             React.createElement("stop", { offset: "100%", stopColor: target.color }))),
-                    React.createElement("path", { d: linkArea(dataPoints), id: reactId, fill: _this._fillStreamColors(singleLink, gradientUrl), stroke: _this._fillStreamBorder(singleLink, gradientUrl), strokeWidth: "2", strokeOpacity: _this._getOpacityStreamBorder(singleLink), onMouseOver: _this._onStreamHover.bind(_this, singleLink), onMouseOut: onMouseOut, onFocus: _this._onFocusLink.bind(_this, singleLink), onBlur: _this._onBlur, fillOpacity: _this._getOpacityStream(singleLink), "data-is-focusable": true, "aria-label": "link from ".concat(source.name, " to ").concat(target.name, " with weight ").concat(singleLink.unnormalizedValue), role: "img" })));
+                    React.createElement("path", { d: linkArea(dataPoints), id: reactId, fill: _this._fillStreamColors(singleLink, gradientUrl), stroke: _this._fillStreamBorder(singleLink, gradientUrl), strokeWidth: "2", strokeOpacity: _this._getOpacityStreamBorder(singleLink), onMouseOver: function (event) { return _this._onStreamHover(event, singleLink, from); }, onMouseOut: onMouseOut, onFocus: function (event) { return _this._onFocusLink(event, singleLink, from); }, onBlur: _this._onBlur, fillOpacity: _this._getOpacityStream(singleLink), "data-is-focusable": true, "aria-label": aria, role: "img" })));
             });
         }
         return [];
@@ -668,12 +709,12 @@ var SankeyChartBase = /** @class */ (function (_super) {
                 var onMouseOut = function () {
                     _this._onLeave(singleNode);
                 };
-                var _a = nodeAttributes[singleNode.nodeId], nodeId = _a.reactId, gElementId = _a.gElementId, height = _a.height, isTruncated = _a.trimmed, truncatedName = _a.name, textLengthForNodeWeight = _a.weightOffset;
+                var _a = nodeAttributes[singleNode.nodeId], nodeId = _a.reactId, gElementId = _a.gElementId, height = _a.height, isTruncated = _a.trimmed, truncatedName = _a.name, textLengthForNodeWeight = _a.weightOffset, aria = _a.aria;
                 var tooTall = height > MIN_HEIGHT_FOR_DOUBLINE_TYPE;
                 var name = singleNode.name, actualValue = singleNode.actualValue, x0 = singleNode.x0, x1 = singleNode.x1, y0 = singleNode.y0;
                 var textColor = nodeTextColor(state_1, singleNode);
                 return (React.createElement("g", { key: index, id: gElementId },
-                    React.createElement("rect", { x: x0, y: y0, height: height, width: x1 - x0, fill: _this._fillNodeColors(singleNode), id: nodeId, onMouseOver: _this._onHover.bind(_this, singleNode), onMouseOut: onMouseOut, onFocus: _this._onCloseCallout.bind(_this), stroke: _this._fillNodeBorder(singleNode), strokeWidth: "2", opacity: "1", "data-is-focusable": true, "aria-label": "node ".concat(name, " with weight ").concat(actualValue), role: "img" }),
+                    React.createElement("rect", { x: x0, y: y0, height: height, width: x1 - x0, fill: _this._fillNodeColors(singleNode), id: nodeId, onMouseOver: _this._onHover.bind(_this, singleNode), onMouseOut: onMouseOut, onFocus: _this._onCloseCallout.bind(_this), stroke: _this._fillNodeBorder(singleNode), strokeWidth: "2", opacity: "1", "data-is-focusable": true, "aria-label": aria, role: "img" }),
                     height > MIN_HEIGHT_FOR_TYPE && (React.createElement("g", { className: classNames.nodeTextContainer },
                         React.createElement("g", { className: "nodeName" },
                             React.createElement("text", { id: "".concat(nodeId, "-name"), x: x0, y: y0, dy: '1.2em', dx: '0.4em', textAnchor: textAnchor_1, fontWeight: "regular", "aria-hidden": "true", fill: textColor, fontSize: 10, onMouseOver: _this._showTooltip.bind(_this, name, isTruncated, tooltipDiv), onMouseOut: _this._hideTooltip.bind(_this, tooltipDiv) }, truncatedName)),
@@ -712,23 +753,12 @@ var SankeyChartBase = /** @class */ (function (_super) {
             });
         }
     };
-    SankeyChartBase.prototype._onStreamHover = function (singleLink, mouseEvent) {
+    SankeyChartBase.prototype._onStreamHover = function (mouseEvent, singleLink, from) {
         mouseEvent.persist();
         this._onCloseCallout();
         if (!this.state.selectedState) {
             var _a = getSelectedLinksforStreamHover(singleLink), selectedLinks = _a.selectedLinks, selectedNodes = _a.selectedNodes;
-            this.setState({
-                selectedState: true,
-                selectedNodes: new Set(Array.from(selectedNodes).map(function (node) { return node.index; })),
-                selectedLinks: new Set(Array.from(selectedLinks).map(function (link) { return link.index; })),
-                refSelected: mouseEvent,
-                selectedLink: singleLink,
-                isCalloutVisible: true,
-                color: singleLink.source.color,
-                xCalloutValue: singleLink.target.name,
-                yCalloutValue: singleLink.unnormalizedValue.toString(),
-                descriptionMessage: 'from ' + singleLink.source.name, // TODO: Does this need to be localized?
-            });
+            this.setState(__assign({ selectedState: true, selectedNodes: new Set(Array.from(selectedNodes).map(function (node) { return node.index; })), selectedLinks: new Set(Array.from(selectedLinks).map(function (link) { return link.index; })), refSelected: mouseEvent }, linkCalloutAttributes(singleLink, from)));
         }
     };
     SankeyChartBase.prototype._onStreamLeave = function (singleLink) {
@@ -741,19 +771,13 @@ var SankeyChartBase = /** @class */ (function (_super) {
             });
         }
     };
-    SankeyChartBase.prototype._onFocusLink = function (singleLink, element) {
+    SankeyChartBase.prototype._onFocusLink = function (element, singleLink, from) {
+        // There is a big difference in how "Tab" and the "Arrow keys" are handled in this diagram.
+        // In particular, I would expect the "Down" key to be like "Tab", but it jumps a little wildly. I'm not sure
+        // if this behavior is an accessiblity violation, but it we might want to investigate it.
         element.persist();
         this._onCloseCallout();
-        this.setState({
-            refSelected: element.currentTarget,
-            selectedLink: singleLink,
-            isCalloutVisible: true,
-            color: singleLink.source.color,
-            xCalloutValue: singleLink.target.name,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            yCalloutValue: singleLink.source.actualValue,
-            descriptionMessage: 'from ' + singleLink.source.name, // TODO: Does this need to be localized?
-        });
+        this.setState(__assign({ refSelected: element.currentTarget }, linkCalloutAttributes(singleLink, from)));
     };
     SankeyChartBase.prototype._fillStreamColors = function (singleLink, gradientUrl) {
         var state = this.state;