@progress/kendo-charts 1.32.1 → 1.33.0-dev.202311081130

package/dist/es/chart/chart.js

@@ -20,16 +20,17 @@ import isDateAxis from './utils/is-date-axis';
 import getDateField from './utils/get-date-field';
 import { ChartPane, ChartPlotArea, findAxisByName } from './api-elements';
 
-import { X, Y, VALUE, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SERIES_OPACITY } from '../common/constants';
+import { X, Y, VALUE, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SERIES_OPACITY,
+         ARROW_DOWN, ARROW_UP, ARROW_LEFT, ARROW_RIGHT, ARIA_ACTIVE_DESCENDANT, TAB, TOP, LEFT, BLACK } from '../common/constants';
 import { addClass, Class, setDefaultOptions, deepExtend, defined, find, isObject, isFunction, elementSize, elementOffset,
          elementScale, elementStyles, eventCoordinates, bindEvents, unbindEvents, mousewheelDelta, FontLoader, inArray, last, round,
-         HashMap, valueOrDefault, isString } from '../common';
+         HashMap, valueOrDefault, isString, cycleUp, cycleDown } from '../common';
 
 import { dateComparer } from '../date-utils';
 
 import { DRAG_START, DRAG, DRAG_END, ZOOM_START, ZOOM, ZOOM_END, SELECT_START, SELECT, SELECT_END, PLOT_AREA_HOVER, PLOT_AREA_LEAVE,
          RENDER, CATEGORY, PIE, DONUT, FUNNEL, PYRAMID, COLUMN, MOUSEWHEEL, MOUSEWHEEL_DELAY, MOUSEWHEEL_ZOOM_RATE, SHOW_TOOLTIP, SERIES_HOVER,
-         SERIES_OVER, SERIES_LEAVE, SERIES_CLICK, DRILLDOWN } from './constants';
+         SERIES_OVER, SERIES_LEAVE, SERIES_CLICK, DRILLDOWN, LEGEND_ITEM_CLICK } from './constants';
 
 import './animations';
 import './register-charts';
@@ -39,6 +40,9 @@ var AXIS_NAMES = [ CATEGORY, VALUE, X, Y ];
 var MOUSEMOVE = "mousemove";
 var CONTEXTMENU = "contextmenu";
 var MOUSELEAVE = "mouseleave";
+var KEYDOWN = "keydown";
+var FOCUS = "focus";
+var BLUR = "blur";
 var MOUSEMOVE_DELAY = 20;
 
 var Chart = (function (Class) {
@@ -59,6 +63,7 @@ var Chart = (function (Class) {
         this._originalOptions = deepExtend({}, options);
         this._theme = themeOptions;
         this._initTheme(options, themeOptions);
+        this._focusState = {};
 
         this._initHandlers();
         this._initSurface();
@@ -81,6 +86,9 @@ var Chart = (function (Class) {
     Chart.prototype._initElement = function _initElement (element) {
         this._setElementClass(element);
         element.style.position = "relative";
+        element.tabIndex = element.getAttribute("tabindex") ? element.getAttribute("tabindex") : 0;
+        // To support user agents and assistive technologies based on the ARIA 1.0 specification, authors may wish to include the document role as a fallback value, in the form role="graphics-document document".
+        element.setAttribute("role", "graphics-document document");
         while (element.firstChild) {
             element.removeChild(element.firstChild);
         }
@@ -296,8 +304,11 @@ var Chart = (function (Class) {
 
         this._destroyView();
 
+        this._setElementAccessibilityAttributes();
+
         this._model = model;
         this._plotArea = model._plotArea;
+        this._legend = model._legend;
 
         model.renderVisual();
 
@@ -335,6 +346,13 @@ var Chart = (function (Class) {
         }
     };
 
+    Chart.prototype._setElementAccessibilityAttributes = function _setElementAccessibilityAttributes () {
+        var titleOptions = this.options.title;
+        var title = isString(titleOptions) ? titleOptions : (titleOptions.description || titleOptions.text);
+
+        this.element.setAttribute("aria-roledescription", title);
+    };
+
     Chart.prototype.exportVisual = function exportVisual (exportOptions) {
         var visual;
         if (exportOptions && (exportOptions.width || exportOptions.height || exportOptions.options)) {
@@ -484,7 +502,9 @@ var Chart = (function (Class) {
         model.append.apply(model, Title.orderTitles([title, subtitle]));
 
         if (options.legend && options.legend.visible) {
-            model.append(new Legend(plotArea.options.legend, this.chartService));
+            var legend = new Legend(plotArea.options.legend, this.chartService);
+            model.append(legend);
+            model._legend = legend;
         }
         model.append(plotArea);
         model.reflow();
@@ -547,6 +567,9 @@ var Chart = (function (Class) {
 
     Chart.prototype._initHandlers = function _initHandlers () {
         this._clickHandler = this._click.bind(this);
+        this._keydownHandler = this._keydown.bind(this);
+        this._focusHandler = this._focus.bind(this);
+        this._blurHandler = this._blur.bind(this);
         this._mousewheelHandler = this._mousewheel.bind(this);
         this._mouseleaveHandler = this._mouseleave.bind(this);
         this._surfaceMouseenterHandler = this._mouseover.bind(this);
@@ -592,7 +615,10 @@ var Chart = (function (Class) {
         } else if (name === SERIES_LEAVE) {
             this._resetDrilldownPoint();
         } else if (name === SERIES_CLICK) {
+            this._focusPoint(args.point);
             this._startDrilldown(args.point);
+        } else if (name === LEGEND_ITEM_CLICK) {
+            this._focusLegendItem(args);
         }
 
         var observers = this.observers;
@@ -613,7 +639,7 @@ var Chart = (function (Class) {
 
         this._touchAction = element.style.touchAction;
 
-        bindEvents(element, ( obj = {}, obj[ CONTEXTMENU ] = this._clickHandler, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj[ MOUSELEAVE ] = this._mouseleaveHandler, obj ));
+        bindEvents(element, ( obj = {}, obj[ CONTEXTMENU ] = this._clickHandler, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj[ MOUSELEAVE ] = this._mouseleaveHandler, obj[ KEYDOWN ] = this._keydownHandler, obj[ FOCUS ] = this._focusHandler, obj[ BLUR] = this._blurHandler, obj ));
 
         if (this._shouldAttachMouseMove()) {
             bindEvents(element, ( obj$1 = {}, obj$1[ MOUSEMOVE ] = this._mousemove, obj$1 ));
@@ -659,6 +685,7 @@ var Chart = (function (Class) {
         if (this._mousewheelZoom && !this._stopChartHandlers(e)) {
             this._gestureDistance = e.distance;
             this._unsetActivePoint();
+            this._clearFocusedElement();
             this.surface.suspendTracking();
         }
     };
@@ -727,6 +754,7 @@ var Chart = (function (Class) {
         if (this._pannable && this._pannable.start(e)) {
             this.surface.suspendTracking();
             this._unsetActivePoint();
+            this._clearFocusedElement();
             this._suppressHover = true;
             this.chartService.panning = true;
         }
@@ -850,6 +878,7 @@ var Chart = (function (Class) {
 
                 if (!this._zooming) {
                     this._unsetActivePoint();
+                    this._clearFocusedElement();
                     this.surface.suspendTracking();
                     this._zooming = true;
                 }
@@ -933,6 +962,7 @@ var Chart = (function (Class) {
         } else {
             this._suppressHover = true;
             this._unsetActivePoint();
+            this._clearFocusedElement();
             this._navState = {
                 axisRanges: ranges,
                 pane: pane,
@@ -1069,6 +1099,232 @@ var Chart = (function (Class) {
         }
     };
 
+    Chart.prototype._isLegendBeforeChart = function _isLegendBeforeChart () {
+        var ref = this;
+        var legendPosition = ref.options.legend.position;
+        var legend = ref._legend;
+
+        return legend && legend.hasItems() && (legendPosition === TOP || legendPosition === LEFT);
+    };
+
+    Chart.prototype._focus = function _focus () {
+        if (!this._preventInitialPointFocus) {
+            if (this._isLegendBeforeChart()) {
+                this._focusFirstLegendItem();
+            } else {
+                this._focusFirstPoint();
+            }
+        }
+    };
+
+    Chart.prototype._keydown = function _keydown (e) {
+        var ref = this;
+        var legendInFocus = ref._focusState.legendInFocus;
+        var legend = ref._legend;
+
+        if (e.key === TAB) {
+            this._clearFocusedElement();
+            var isLegendBeforeChart = this._isLegendBeforeChart();
+
+            if (legendInFocus && isLegendBeforeChart !== e.shiftKey) {
+                this._navigatePoints(e);
+            } else if (!legendInFocus && isLegendBeforeChart === e.shiftKey && legend.hasItems()) {
+                this._navigateLegend(e);
+            }
+        } else if (!legendInFocus) {
+            this._navigatePoints(e);
+        } else {
+            this._navigateLegend(e);
+        }
+    };
+
+    Chart.prototype._navigatePoints = function _navigatePoints (e) {
+        var this$1 = this;
+
+        var ref = this;
+        var focusState = ref._focusState;
+        var plotArea = ref._plotArea;
+
+        focusState.legendInFocus = false;
+
+        if (!focusState.focusedElement) {
+            this._focusFirstPoint();
+            e.preventDefault();
+            return;
+        }
+
+        var moveFocus = function (point) {
+            focusState.focusedPoint = point;
+
+            this$1._focusElement(focusState.focusedPoint);
+            e.preventDefault();
+        };
+
+        switch (e.key) {
+            case ARROW_RIGHT:
+                moveFocus(plotArea.getPointToTheRight(focusState.focusedPoint));
+                break;
+            case ARROW_LEFT:
+                moveFocus(plotArea.getPointToTheLeft(focusState.focusedPoint));
+                break;
+            case ARROW_DOWN:
+                moveFocus(plotArea.getPointBelow(focusState.focusedPoint));
+                break;
+            case ARROW_UP:
+                moveFocus(plotArea.getPointAbove(focusState.focusedPoint));
+                break;
+            default:
+                break;
+        }
+    };
+
+    Chart.prototype._navigateLegend = function _navigateLegend (e) {
+        var this$1 = this;
+
+        var ref = this;
+        var focusState = ref._focusState;
+        var legend = ref._legend;
+
+        focusState.legendInFocus = true;
+
+        if (!focusState.focusedElement) {
+            this._focusFirstLegendItem();
+            e.preventDefault();
+            return;
+        }
+
+        var itemsLength = legend.getItems().length;
+        var moveFocus = function () {
+            this$1._focusElement(this$1._getFocusedLegendItem());
+            e.preventDefault();
+        };
+
+        switch (e.key) {
+            case ARROW_UP:
+            case ARROW_LEFT:
+                focusState.focusedLegendItemIndex = cycleDown(
+                    focusState.focusedLegendItemIndex,
+                    itemsLength
+                );
+                moveFocus();
+                break;
+            case ARROW_DOWN:
+            case ARROW_RIGHT:
+                focusState.focusedLegendItemIndex = cycleUp(
+                    focusState.focusedLegendItemIndex,
+                    itemsLength
+                );
+                moveFocus();
+                break;
+            default:
+                break;
+        }
+    };
+
+    Chart.prototype._focusFirstPoint = function _focusFirstPoint () {
+        var point = this._focusState.focusedPoint = this._plotArea.getFirstPoint();
+
+        if (point) {
+            this._focusElement(point);
+        }
+    };
+
+    Chart.prototype._focusChart = function _focusChart () {
+        if (document.activeElement !== this.element) {
+            this._preventInitialPointFocus = true;
+            this.element.focus();
+            this._preventInitialPointFocus = false;
+        }
+    };
+
+    Chart.prototype._focusPoint = function _focusPoint (point) {
+        this._focusState.focusedPoint = point;
+
+        this._focusChart();
+
+        this._focusElement(point, true);
+    };
+
+    Chart.prototype._focusFirstLegendItem = function _focusFirstLegendItem () {
+        var ref = this;
+        var focusState = ref._focusState;
+
+        focusState.focusedLegendItemIndex = 0;
+        this._focusElement(this._getFocusedLegendItem());
+        focusState.legendInFocus = true;
+    };
+
+    Chart.prototype._focusLegendItem = function _focusLegendItem (args) {
+        var ref = this;
+        var focusState = ref._focusState;
+
+        focusState.focusedLegendItemIndex = args.seriesIndex;
+        focusState.legendInFocus = true;
+
+        this._focusChart();
+
+        this._focusElement(this._getFocusedLegendItem(), true);
+    };
+
+    Chart.prototype._getFocusedLegendItem = function _getFocusedLegendItem () {
+        var ref = this;
+        var focusState = ref._focusState;
+        var legend = ref._legend;
+
+        return legend.getItems()[focusState.focusedLegendItemIndex];
+    };
+
+    Chart.prototype._focusElement = function _focusElement (element, omitHighlight) {
+        var ref = this;
+        var focusState = ref._focusState;
+
+        this._clearFocusedElement();
+
+        focusState.focusedElement = element;
+
+        if (!omitHighlight) {
+            element.focusVisual();
+
+            this._setElementActiveDescendant(element._id);
+
+            if (focusState.legendInFocus) {
+                this._showSeriesInactiveOpacity(focusState.focusedLegendItemIndex);
+            } else {
+                this._showInactiveOpacity(element);
+            }
+        }
+    };
+
+    Chart.prototype._clearFocusedElement = function _clearFocusedElement () {
+        var ref = this;
+        var focusState = ref._focusState;
+
+        if (!focusState) {
+            return;
+        }
+
+        if (focusState.focusedElement) {
+            focusState.focusedElement.clearFocusFromVisual();
+            this._setElementActiveDescendant(null);
+        }
+
+        focusState.focusedElement = null;
+    };
+
+    Chart.prototype._setElementActiveDescendant = function _setElementActiveDescendant (id) {
+        if (id) {
+            this.element.setAttribute(ARIA_ACTIVE_DESCENDANT, id);
+        } else {
+            this.element.removeAttribute(ARIA_ACTIVE_DESCENDANT);
+        }
+    };
+
+    Chart.prototype._blur = function _blur () {
+        this._focusState.legendInFocus = false;
+        this._clearFocusedElement();
+        this._hideInactiveOpacity();
+    };
+
     Chart.prototype._startHover = function _startHover (element, e) {
         if (this._suppressHover) {
             return false;
@@ -1078,7 +1334,19 @@ var Chart = (function (Class) {
             return (element.hover || element.over) && !(element instanceof PlotAreaBase);
         });
 
-        this._showInactiveOpacity(point, e);
+        var activePoint = this._activePoint;
+
+        this._updateHoveredPoint(point, e);
+
+        if (point && activePoint !== point && point.hover) {
+            this._activePoint = point;
+
+            if (!this._sharedTooltip() && !point.hover(this, e)) {
+                this._displayTooltip(point);
+
+                this._showInactiveOpacity(point);
+            }
+        }
 
         return point;
     };
@@ -1249,28 +1517,15 @@ var Chart = (function (Class) {
         return chartInstance;
     };
 
-    Chart.prototype._showInactiveOpacity = function _showInactiveOpacity (point, e) {
-        var activePoint = this._activePoint;
+    Chart.prototype._showInactiveOpacity = function _showInactiveOpacity (point) {
         var multipleSeries = this._plotArea.series.length > 1;
         var hasInactiveOpacity = this._hasInactiveOpacity();
 
-        this._updateHoveredPoint(point, e);
-
-        if (point && activePoint !== point && point.hover) {
-            this._activePoint = point;
-
-            if (!this._sharedTooltip() && !point.hover(this, e)) {
-                this._displayTooltip(point);
-
-                if (hasInactiveOpacity) {
-                    this._displayInactiveOpacity(point, multipleSeries);
-                } else {
-                    this._highlight.show(point);
-                }
-            }
+        if (hasInactiveOpacity) {
+            this._displayInactiveOpacity(point, multipleSeries);
+        } else {
+            this._highlight.show(point);
         }
-
-        return point;
     };
 
     Chart.prototype._hideInactiveOpacity = function _hideInactiveOpacity (point) {
@@ -1343,6 +1598,7 @@ var Chart = (function (Class) {
         } else {
             unbindEvents(document, ( obj = {}, obj[ MOUSEMOVE ] = this._mouseMoveTrackHandler, obj ));
             this._unsetActivePoint();
+            this._clearFocusedElement();
             this._mouseMoveTrackHandler = null;
 
             this._hideInactiveOpacity(point);
@@ -1577,6 +1833,10 @@ var Chart = (function (Class) {
     };
 
     Chart.prototype._legendItemHover = function _legendItemHover (seriesIndex, pointIndex) {
+        this._showSeriesInactiveOpacity(seriesIndex, pointIndex);
+    };
+
+    Chart.prototype._showSeriesInactiveOpacity = function _showSeriesInactiveOpacity (seriesIndex, pointIndex) {
         var ref = this;
         var plotArea = ref._plotArea;
         var highlight = ref._highlight;
@@ -1656,7 +1916,7 @@ var Chart = (function (Class) {
 
         this._destroyed = true;
 
-        unbindEvents(this.element, ( obj = {}, obj[ CONTEXTMENU ] = this._clickHandler, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj[ MOUSEMOVE ] = this._mousemove, obj[ MOUSELEAVE ] = this._mouseleaveHandler, obj ));
+        unbindEvents(this.element, ( obj = {}, obj[ CONTEXTMENU ] = this._clickHandler, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj[ MOUSEMOVE ] = this._mousemove, obj[ MOUSELEAVE ] = this._mouseleaveHandler, obj[ KEYDOWN ] = this._keydownHandler, obj[ FOCUS ] = this._focusHandler, obj[ BLUR] = this._blurHandler, obj ));
 
         if (this.domEvents) {
             this.domEvents.destroy();
@@ -1667,6 +1927,8 @@ var Chart = (function (Class) {
             unbindEvents(document, ( obj$1 = {}, obj$1[ MOUSEMOVE ] = this._mouseMoveTrackHandler, obj$1 ));
         }
 
+        this._focusState = null;
+
         this._destroyView();
 
         this._destroySurface();
@@ -1704,6 +1966,7 @@ var Chart = (function (Class) {
         }
 
         this._unsetActivePoint();
+        this._clearFocusedElement();
         this._resetDrilldownPoint();
         this._destroySelections();
 
@@ -1940,7 +2203,16 @@ setDefaultOptions(Chart, {
     chartArea: {},
     legend: {
         visible: true,
-        labels: {}
+        labels: {},
+        accessibility: {
+            highlight: {
+                border: {
+                    opacity: 1,
+                    color: BLACK,
+                    width: 2
+                }
+            }
+        }
     },
     categoryAxis: {},
     seriesDefaults: {
@@ -1952,6 +2224,15 @@ setDefaultOptions(Chart, {
         labels: {},
         negativeValues: {
             visible: false
+        },
+        accessibility: {
+            highlight: {
+                border: {
+                    opacity: 1,
+                    width: 2
+                },
+                zIndex: 200
+            }
         }
     },
     series: [],

package/dist/es/chart/constants.js

@@ -92,6 +92,14 @@ var SHOW_TOOLTIP = "showTooltip";
 var HIDE_TOOLTIP = "hideTooltip";
 var PANE_RENDER = "paneRender";
 
+
+var CHART_POINT_ROLE = "graphics-symbol";
+var CHART_POINT_CLASSNAME = "k-chart-point";
+var CHART_POINT_ROLE_DESCRIPTION = "Point";
+var LEGEND_ITEM_ROLE = "checkbox";
+var LEGEND_ITEM_CLASSNAME = "k-chart-legend-item";
+var LEGEND_ITEM_ARIA_ROLE_DESCRIPTION = "Legend item";
+
 var LOGARITHMIC = "log";
 var CATEGORY = "category";
 
@@ -134,5 +142,8 @@ export {
     HEATMAP,
     DRILLDOWN, DRILLDOWN_FIELD,
     MIN_MOVING_AVERAGE_PERIOD,
-    TRENDLINE_SERIES, TRENDLINE_LINEAR, TRENDLINE_MOVING_AVERAGE
+    TRENDLINE_SERIES, TRENDLINE_LINEAR, TRENDLINE_MOVING_AVERAGE,
+    CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION,
+    LEGEND_ITEM_ROLE, LEGEND_ITEM_CLASSNAME,
+    LEGEND_ITEM_ARIA_ROLE_DESCRIPTION
 };

package/dist/es/chart/funnel-chart/funnel-chart.js

@@ -26,16 +26,17 @@ var FunnelChart = (function (ChartElement) {
     FunnelChart.prototype.constructor = FunnelChart;
 
     FunnelChart.prototype.formatPointValue = function formatPointValue (point, format) {
-        return this.chartService.format.auto(format,point.value);
+        return this.plotArea.chartService.format.auto(format,point.value);
     };
 
     FunnelChart.prototype.render = function render () {
         var this$1 = this;
 
+        var seriesIx = 0;
         var ref = this;
         var options = ref.options;
         var seriesColors = ref.plotArea.options.seriesColors; if ( seriesColors === void 0 ) seriesColors = [];
-        var series = options.series[0];
+        var series = options.series[seriesIx];
         var data = series.data;
 
         if (!data) {
@@ -63,6 +64,7 @@ var FunnelChart = (function (ChartElement) {
                 index: i,
                 owner: this$1,
                 series: series,
+                seriesIx: seriesIx,
                 dataItem: data[i],
                 percentage: pointData.value / total
             }, fields, { visible: pointData.visible });
@@ -85,7 +87,7 @@ var FunnelChart = (function (ChartElement) {
             series: series,
             dataItem: fields.dataItem,
             index: fields.index
-        }, { defaults: series._defaults, excluded: [ "data", "content", "template", "toggle", "visual" ] });
+        }, { defaults: series._defaults, excluded: [ "data", "content", "template", "toggle", "visual", "ariaTemplate" ] });
     };
 
     FunnelChart.prototype.createSegment = function createSegment (value, fields) {

package/dist/es/chart/funnel-chart/funnel-segment.js

@@ -1,10 +1,12 @@
-import { drawing as draw } from '@progress/kendo-drawing';
+import { drawing as draw, geometry as geom } from '@progress/kendo-drawing';
 
 import { ChartElement, Box, Point } from '../../core';
 import PointEventsMixin from '../mixins/point-events-mixin';
 
 import { WHITE } from '../../common/constants';
-import { deepExtend, setDefaultOptions } from '../../common';
+import { deepExtend, setDefaultOptions, getTemplate } from '../../common';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
+import { CHART_POINT_CLASSNAME, CHART_POINT_ROLE, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
 
 var FunnelSegment = (function (ChartElement) {
     function FunnelSegment(value, options, segmentOptions) {
@@ -18,11 +20,25 @@ var FunnelSegment = (function (ChartElement) {
     FunnelSegment.prototype = Object.create( ChartElement && ChartElement.prototype );
     FunnelSegment.prototype.constructor = FunnelSegment;
 
+    FunnelSegment.prototype.getLabelText = function getLabelText (options) {
+        var labelTemplate = getTemplate(options);
+
+        if (labelTemplate) {
+            return labelTemplate(this.pointData());
+        } else if (options.format) {
+            return this.formatValue(options.format);
+        }
+
+        return this.value;
+    };
+
     FunnelSegment.prototype.reflow = function reflow (chartBox) {
         var points = this.points;
         var label = this.children[0];
+        var x1 = Math.min(points[0].x, points[3].x);
+        var x2 = Math.max(points[1].x, points[2].x);
 
-        this.box = new Box(points[0].x, points[0].y, points[1].x, points[2].y);
+        this.box = new Box(x1, points[0].y, x2, points[2].y);
 
         if (label) {
             label.reflow(new Box(chartBox.x1, points[0].y, chartBox.x2, points[2].y));
@@ -37,6 +53,8 @@ var FunnelSegment = (function (ChartElement) {
 
         ChartElement.prototype.createVisual.call(this);
 
+        this.addAccessibilityAttributesToVisual();
+
         if (options.visual) {
             visual = options.visual({
                 category: this.category,
@@ -93,6 +111,24 @@ var FunnelSegment = (function (ChartElement) {
         };
     };
 
+    FunnelSegment.prototype.createFocusHighlight = function createFocusHighlight (style) {
+        var borderWidth = this.options.accessibility.highlight.border.width;
+        var result = draw.Path.fromPoints(this.points, deepExtend({}, style, {
+            stroke: {
+                width: borderWidth * 2
+            }
+        })).close();
+
+        var clipPath = new draw.MultiPath();
+
+        clipPath.paths.push(draw.Path.fromRect(this.box.clone().pad(borderWidth).toRect()));
+        clipPath.paths.push(draw.Path.fromPoints(this.points));
+
+        result.clip(clipPath);
+
+        return result;
+    };
+
     FunnelSegment.prototype.tooltipAnchor = function tooltipAnchor () {
         var box = this.box;
         return {
@@ -109,6 +145,20 @@ var FunnelSegment = (function (ChartElement) {
         return point.owner.formatPointValue(point, format);
     };
 
+    FunnelSegment.prototype.pointData = function pointData () {
+        return {
+            dataItem: this.dataItem,
+            category: this.category,
+            value: this.value,
+            series: this.series,
+            percentage: this.percentage
+        };
+    };
+
+    FunnelSegment.prototype.getIndex = function getIndex () {
+        return this.index;
+    };
+
     return FunnelSegment;
 }(ChartElement));
 
@@ -116,9 +166,18 @@ setDefaultOptions(FunnelSegment, {
     color: WHITE,
     border: {
         width: 1
+    },
+    labels: {
+        format: ""
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 });
 
 deepExtend(FunnelSegment.prototype, PointEventsMixin);
+deepExtend(FunnelSegment.prototype, AccessibilityAttributesMixin);
 
 export default FunnelSegment;

package/dist/es/chart/heatmap-chart/heatmap-chart.js

@@ -71,7 +71,8 @@ var HeatmapChart = (function (ChartElement) {
             defaults: series._defaults,
             excluded: [
                 "data", "tooltip", "content", "template",
-                "visual", "toggle", "drilldownSeriesFactory"
+                "visual", "toggle", "drilldownSeriesFactory",
+                "ariaTemplate"
             ]
         };