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

package/dist/es2015/chart/pie-chart/pie-segment.js

@@ -4,11 +4,12 @@ import { ChartElement, ShapeBuilder, TextBox, Box } from '../../core';
 
 import PointEventsMixin from '../mixins/point-events-mixin';
 
-import { OUTSIDE_END, INSIDE_END, PIE, FADEIN, TOOLTIP_OFFSET } from '../constants';
+import { OUTSIDE_END, INSIDE_END, PIE, FADEIN, TOOLTIP_OFFSET, CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
 import hasGradientOverlay from '../utils/has-gradient-overlay';
 
 import { TOP, BOTTOM, LEFT, RIGHT, DEFAULT_FONT, CIRCLE, WHITE, CENTER, DEFAULT_PRECISION } from '../../common/constants';
 import { autoTextColor, setDefaultOptions, getSpacing, getTemplate, deepExtend, round, rad } from '../../common';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 
 class PieSegment extends ChartElement {
     constructor(value, sector, options) {
@@ -19,23 +20,18 @@ class PieSegment extends ChartElement {
     }
 
     render() {
-        const labels = this.options.labels;
-        const chartService = this.owner.chartService;
-        let labelText = this.value;
-
         if (this._rendered || this.visible === false) {
             return;
         }
         this._rendered = true;
 
-        const labelTemplate = getTemplate(labels);
-        const pointData = this.pointData();
+        this.createLabel();
+    }
 
-        if (labelTemplate) {
-            labelText = labelTemplate(pointData);
-        } else if (labels.format) {
-            labelText = chartService.format.auto(labels.format, labelText);
-        }
+    createLabel() {
+        const labels = this.options.labels;
+        const chartService = this.owner.chartService;
+        let labelText = this.getLabelText(labels);
 
         if (labels.visible && (labelText || labelText === 0)) {
             if (labels.position === CENTER || labels.position === INSIDE_END) {
@@ -59,12 +55,22 @@ class PieSegment extends ChartElement {
                     type: FADEIN,
                     delay: this.animationDelay
                 }
-            }), pointData);
+            }), this.pointData());
 
             this.append(this.label);
         }
     }
 
+    getLabelText(options) {
+        let labelTemplate = getTemplate(options);
+
+        if (labelTemplate) {
+            return labelTemplate(this.pointData());
+        }
+
+        return this.owner.chartService.format.auto(options.format, this.value);
+    }
+
     reflow(targetBox) {
         this.render();
         this.box = targetBox;
@@ -110,6 +116,8 @@ class PieSegment extends ChartElement {
 
         super.createVisual();
 
+        this.addAccessibilityAttributesToVisual();
+
         if (this.value) {
             if (options.visual) {
                 const startAngle = (sector.startAngle + 180) % 360;
@@ -238,6 +246,24 @@ class PieSegment extends ChartElement {
         };
     }
 
+    createFocusHighlight(style) {
+        const borderWidth = this.options.accessibility.highlight.border.width;
+        const result = this.createSegment(this.sector, deepExtend({}, style, {
+            stroke: {
+                width: borderWidth * 2
+            }
+        }));
+
+        const clipPath = new draw.MultiPath();
+
+        clipPath.paths.push(draw.Path.fromRect(result.bbox()));
+        clipPath.paths.push(this.createSegment(this.sector, {}));
+
+        result.clip(clipPath);
+
+        return result;
+    }
+
     tooltipAnchor() {
         const sector = this.sector.clone().expand(TOOLTIP_OFFSET);
         const midAndle = sector.middle();
@@ -262,6 +288,10 @@ class PieSegment extends ChartElement {
             percentage: this.percentage
         };
     }
+
+    getIndex() {
+        return this.index;
+    }
 }
 
 const RAD_30 = round(rad(30), DEFAULT_PRECISION);
@@ -323,9 +353,15 @@ setDefaultOptions(PieSegment, {
             width: 1
         }
     },
-    visible: true
+    visible: true,
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
+    }
 });
 
 deepExtend(PieSegment.prototype, PointEventsMixin);
+deepExtend(PieSegment.prototype, AccessibilityAttributesMixin);
 
 export default PieSegment;

package/dist/es2015/chart/plotarea/categorical-plotarea.js

@@ -24,10 +24,10 @@ import { appendIfNotNull, categoriesCount, createOutOfRangePoints, equalsIgnoreC
 
 import { BAR, COLUMN, BULLET, VERTICAL_BULLET, LINE, VERTICAL_LINE, AREA, VERTICAL_AREA,
     RANGE_AREA, VERTICAL_RANGE_AREA, RANGE_COLUMN, RANGE_BAR, WATERFALL, HORIZONTAL_WATERFALL,
-    BOX_PLOT, VERTICAL_BOX_PLOT, OHLC, CANDLESTICK, LOGARITHMIC, STEP, EQUALLY_SPACED_SERIES } from '../constants';
+    BOX_PLOT, VERTICAL_BOX_PLOT, OHLC, CANDLESTICK, LOGARITHMIC, STEP, EQUALLY_SPACED_SERIES, RADAR_LINE, RADAR_AREA } from '../constants';
 
 import { DATE, MAX_VALUE } from '../../common/constants';
-import { setDefaultOptions, inArray, deepExtend, defined, eventElement, grep } from '../../common';
+import { setDefaultOptions, inArray, deepExtend, defined, eventElement, grep, cycleIndex } from '../../common';
 
 const AREA_SERIES = [ AREA, VERTICAL_AREA, RANGE_AREA, VERTICAL_RANGE_AREA ];
 const OUT_OF_RANGE_SERIES = [ LINE, VERTICAL_LINE ].concat(AREA_SERIES);
@@ -814,6 +814,53 @@ class CategoricalPlotArea extends PlotAreaBase {
         updateAxisOptions(this.options, axis, options);
         updateAxisOptions(this.originalOptions, axis, options);
     }
+
+    _pointsByVertical(basePoint, offset = 0) {
+        if (this.invertAxes) {
+            return this._siblingsBySeriesIndex(basePoint, offset);
+        }
+
+        return this._siblingsByPointIndex(basePoint, offset);
+    }
+
+    _pointsByHorizontal(basePoint, offset = 0) {
+        if (this.invertAxes) {
+            return this._siblingsByPointIndex(basePoint, offset);
+        }
+
+        return this._siblingsBySeriesIndex(basePoint, offset);
+    }
+
+    _siblingsByPointIndex(basePoint) {
+        return this
+            .pointsByPointIndex(basePoint.getIndex())
+            .sort(this._getSeriesCompareFn(basePoint));
+    }
+
+    _siblingsBySeriesIndex(basePoint, offset) {
+        const index = cycleIndex(basePoint.series.index + offset, this.series.length);
+
+        return this.pointsBySeriesIndex(index);
+    }
+
+    _getSeriesCompareFn(point) {
+        const isStacked = this._isInStackedSeries(point);
+
+        if (isStacked && this.invertAxes || !isStacked && !this.invertAxes) {
+            return (a, b) => a.box.center().x - b.box.center().x;
+        }
+
+        return (a, b) => a.box.center().y - b.box.center().y;
+    }
+
+    _isInStackedSeries(point) {
+        const sortableSeries = inArray(point.series.type,
+            [ AREA, VERTICAL_AREA, RANGE_AREA, VERTICAL_RANGE_AREA, LINE, VERTICAL_LINE, RADAR_LINE, RADAR_AREA]);
+
+        const stackableSeries = inArray(point.series.type, [ COLUMN, BAR]);
+
+        return sortableSeries || stackableSeries && point.options.isStacked;
+    }
 }
 
 function updateAxisOptions(targetOptions, axis, options) {

package/dist/es2015/chart/plotarea/funnel-plotarea.js

@@ -36,6 +36,14 @@ class FunnelPlotArea extends PlotAreaBase {
         super.appendChart(chart, pane);
         append(this.options.legend.items, chart.legendItems);
     }
+
+    _pointsByVertical(basePoint) {
+        return this.pointsBySeriesIndex(basePoint.series.index);
+    }
+
+    _pointsByHorizontal(basePoint) {
+        return [basePoint];
+    }
 }
 
 export default FunnelPlotArea;

package/dist/es2015/chart/plotarea/heatmap-plotarea.js

@@ -1,6 +1,7 @@
-import { deepExtend, eventElement, grep, inArray, setDefaultOptions, createHashSet } from '../../common';
+import { deepExtend, eventElement, grep, inArray, setDefaultOptions, createHashSet, cycleIndex } from '../../common';
 import { DATE } from '../../common/constants';
 import { CategoryAxis, DateCategoryAxis, Point } from '../../core';
+import { dateEquals } from '../../date-utils';
 import { HEATMAP } from '../constants';
 import HeatmapChart from '../heatmap-chart/heatmap-chart';
 import PlotAreaEventsMixin from '../mixins/plotarea-events-mixin';
@@ -272,6 +273,64 @@ class HeatmapPlotArea extends PlotAreaBase {
         // Stack the crosshair above the series points.
         return Object.assign({}, axis.options.crosshair, { zIndex: 0 });
     }
+
+    _pointsByVertical(basePoint, offset = 0) {
+        const normalizedOffset = this.axisX.options.reverse ? offset * -1 : offset;
+        const axisXItems = this.axisX.children;
+        let xIndex = this._getPointAxisXIndex(basePoint) + normalizedOffset;
+
+        xIndex = cycleIndex(xIndex, axisXItems.length);
+        const targetXValue = axisXItems[xIndex].value;
+
+        const points = this
+            .filterPoints(point => compareValues(point.pointData().x, targetXValue))
+            .sort((a, b) => this._getPointAxisYIndex(a) - this._getPointAxisYIndex(b));
+
+        if (this.axisY.options.reverse) {
+            return points.reverse();
+        }
+
+        return points;
+    }
+
+    _pointsByHorizontal(basePoint, offset = 0) {
+        const normalizedOffset = this.axisY.options.reverse ? offset * -1 : offset;
+        const axisYItems = this.axisY.children;
+        let yIndex = this._getPointAxisYIndex(basePoint) + normalizedOffset;
+
+        yIndex = cycleIndex(yIndex, axisYItems.length);
+        const targetYValue = axisYItems[yIndex].value;
+
+        const points = this
+            .filterPoints(point => compareValues(point.pointData().y, targetYValue))
+            .sort((a, b) => this._getPointAxisXIndex(a) - this._getPointAxisXIndex(b));
+
+        if (this.axisX.options.reverse) {
+            return points.reverse();
+        }
+
+        return points;
+    }
+
+    _getPointAxisXIndex(point) {
+        return this._getPointAxisIndex(this.axisX, point.pointData().x);
+    }
+
+    _getPointAxisYIndex(point) {
+        return this._getPointAxisIndex(this.axisY, point.pointData().y);
+    }
+
+    _getPointAxisIndex(axis, pointValue) {
+        return axis.children.findIndex(axisItem => compareValues(pointValue, axisItem.value));
+    }
+}
+
+function compareValues(a, b) {
+    if (a instanceof Date && b instanceof Date) {
+        return dateEquals(a, b);
+    }
+
+    return a === b;
 }
 
 function updateAxisOptions(targetOptions, axisIndex, vertical, options) {

package/dist/es2015/chart/plotarea/plotarea-base.js

@@ -7,7 +7,8 @@ import { hasValue } from '../utils';
 import SeriesBinder from '../series-binder';
 
 import { WHITE, BLACK, X, Y, COORD_PRECISION, TOP, BOTTOM, LEFT, RIGHT, START, END, INHERIT } from '../../common/constants';
-import { append, deepExtend, defined, getSpacing, getTemplate, inArray, isFunction, isString, limitValue, round, setDefaultOptions, last } from '../../common';
+import { append, deepExtend, defined, getSpacing, getTemplate, inArray, isFunction, isString,
+    limitValue, round, setDefaultOptions, last, cycleIndex } from '../../common';
 import { TRENDLINE_SERIES } from '../constants';
 
 class PlotAreaBase extends ChartElement {
@@ -818,6 +819,7 @@ class PlotAreaBase extends ChartElement {
         if (categoryIndex !== null) {
             for (let i = 0; i < charts.length; i++) {
                 const chart = charts[i];
+
                 if (chart.pane.options.name === "_navigator") {
                     continue;
                 }
@@ -843,6 +845,12 @@ class PlotAreaBase extends ChartElement {
         });
     }
 
+    pointsByPointIndex(pointIndex) {
+        return this.filterPoints(function(point) {
+            return point.getIndex() === pointIndex;
+        });
+    }
+
     pointsBySeriesName(name) {
         return this.filterPoints(function(point) {
             return point.series.name === name;
@@ -1004,6 +1012,64 @@ class PlotAreaBase extends ChartElement {
     seriesByName(name) {
         return this.series.find(series => series.name === name);
     }
+
+    getFirstPoint() {
+        return this.pointsBySeriesIndex(0)[0];
+    }
+
+    getPointBelow(point) {
+        return this._getNextPoint(point, this._pointsByVertical, 1);
+    }
+
+    getPointAbove(point) {
+        return this._getNextPoint(point, this._pointsByVertical, -1);
+    }
+
+    getPointToTheRight(point) {
+        return this._getNextPoint(point, this._pointsByHorizontal, 1);
+    }
+
+    getPointToTheLeft(point) {
+        return this._getNextPoint(point, this._pointsByHorizontal, -1);
+    }
+
+    _getNextPoint(point, getPointsFunc, increment) {
+        let points = getPointsFunc.call(this, point);
+        const pointIndex = points.indexOf(point);
+        let nextIndex = pointIndex + increment;
+        const loopPoints = (direction) => {
+            // loop over to last non-empty collection
+            let result;
+            let offset = 0;
+            do {
+                offset += direction;
+                result = getPointsFunc.call(this, point, offset);
+            } while (result.length === 0);
+
+            return result;
+        };
+
+        if (nextIndex < 0) {
+            points = loopPoints(-1);
+
+            return points.at(-1);
+        } else if (nextIndex >= points.length) {
+            points = loopPoints(1);
+
+            return points.at(0);
+        }
+
+        return points[nextIndex];
+    }
+
+    _pointsByVertical(basePoint) {
+        return this.pointsByPointIndex(basePoint.getIndex());
+    }
+
+    _pointsByHorizontal(basePoint, offset = 0) {
+        let index = cycleIndex(basePoint.series.index + offset, this.series.length);
+        return this.pointsBySeriesIndex(index);
+    }
 }
 
 function isSingleAxis(axis) {

package/dist/es2015/chart/plotarea/radar-plotarea.js

@@ -158,6 +158,14 @@ class RadarPlotArea extends PolarPlotAreaBase {
     }
 
     createCrosshairs() {}
+
+    _pointsByVertical(basePoint) {
+        return super._pointsByVertical(basePoint).sort(this._getSeriesCompareFn());
+    }
+
+    _getSeriesCompareFn() {
+        return (a, b) => b.value - a.value;
+    }
 }
 
 deepExtend(RadarPlotArea.prototype, PlotAreaEventsMixin, {

package/dist/es2015/chart/radar-bar-chart/radar-segment.js

@@ -6,6 +6,10 @@ class RadarSegment extends DonutSegment {
     constructor(value, options) {
         super(value, null, options);
     }
+
+    getIndex() {
+        return this.categoryIx;
+    }
 }
 
 setDefaultOptions(RadarSegment, {

package/dist/es2015/chart/range-area-chart/range-area-point.js

@@ -5,7 +5,7 @@ import RangeLinePoint from './range-line-point';
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
 
-import { LINE_MARKER_SIZE, FADEIN, INITIAL_ANIMATION_DURATION, TOOLTIP_OFFSET, ABOVE, BELOW } from '../constants';
+import { LINE_MARKER_SIZE, FADEIN, INITIAL_ANIMATION_DURATION, TOOLTIP_OFFSET, ABOVE, BELOW, CHART_POINT_ROLE, CHART_POINT_CLASSNAME, CHART_POINT_ROLE_DESCRIPTION } from '../constants';
 import { WHITE, CIRCLE, HIGHLIGHT_ZINDEX, LEFT, RIGHT, BOTTOM, CENTER } from '../../common/constants';
 import { deepExtend, valueOrDefault, getSpacing } from '../../common';
 
@@ -84,6 +84,14 @@ class RangeAreaPoint extends ChartElement {
         };
     }
 
+    createFocusHighlight() {
+        const group = new draw.Group();
+        group.append(this.fromPoint.createFocusHighlight());
+        group.append(this.toPoint.createFocusHighlight());
+
+        return group;
+    }
+
     tooltipAnchor() {
         const clipBox = this.owner.pane.clipBox();
         const showTooltip = !clipBox || clipBox.overlaps(this.box);
@@ -184,6 +192,18 @@ class RangeAreaPoint extends ChartElement {
         point.color = this.color;
         point.owner = this.owner;
     }
+
+    focusVisual() {
+        this.fromPoint.focusVisual();
+    }
+
+    clearFocusFromVisual() {
+        this.toPoint.clearFocusFromVisual();
+    }
+
+    getIndex() {
+        return this.categoryIx;
+    }
 }
 
 deepExtend(RangeAreaPoint.prototype, PointEventsMixin);
@@ -224,6 +244,11 @@ RangeAreaPoint.prototype.defaults = {
     },
     tooltip: {
         format: '{0} - {1}'
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 };
 

package/dist/es2015/chart/range-bar-chart/range-bar.js

@@ -1,7 +1,6 @@
 import Bar from '../bar-chart/bar';
-import BarLabel from '../bar-chart/bar-label';
 
-import { deepExtend, getTemplate } from '../../common';
+import { deepExtend } from '../../common';
 
 class RangeBar extends Bar {
     createLabel() {
@@ -10,36 +9,16 @@ class RangeBar extends Bar {
         const toOptions = deepExtend({}, labels, labels.to);
 
         if (fromOptions.visible) {
-            this.labelFrom = this._createLabel(fromOptions);
+            this.labelFrom = this.createLabelElement(fromOptions);
             this.append(this.labelFrom);
         }
 
         if (toOptions.visible) {
-            this.labelTo = this._createLabel(toOptions);
+            this.labelTo = this.createLabelElement(toOptions);
             this.append(this.labelTo);
         }
     }
 
-    _createLabel(options) {
-        const labelTemplate = getTemplate(options);
-        const pointData = this.pointData();
-
-        let labelText;
-
-        if (labelTemplate) {
-            labelText = labelTemplate(pointData);
-        } else {
-            labelText = this.formatValue(options.format);
-        }
-
-        return new BarLabel(labelText,
-            deepExtend({
-                vertical: this.options.vertical
-            },
-            options
-        ), pointData);
-    }
-
     reflow(targetBox) {
         this.render();
 

package/dist/es2015/chart/scatter-charts/scatter-chart.js

@@ -161,7 +161,7 @@ class ScatterChart extends ChartElement {
             excluded: [
                 "data", "tooltip", "content", "template", "visual", "toggle",
                 "_outOfRangeMinPoint", "_outOfRangeMaxPoint",
-                "drilldownSeriesFactory"
+                "drilldownSeriesFactory", "ariaTemplate"
             ]
         };
 

package/dist/es2015/common/constants.js

@@ -1,4 +1,10 @@
 export const ARC = "arc";
+export const ARROW_UP = "ArrowUp";
+export const ARROW_DOWN = "ArrowDown";
+export const ARROW_LEFT = "ArrowLeft";
+export const ARROW_RIGHT = "ArrowRight";
+export const TAB = "Tab";
+export const ARIA_ACTIVE_DESCENDANT = "aria-activedescendant";
 export const AXIS_LABEL_CLICK = "axisLabelClick";
 export const BLACK = "#000";
 export const BOTTOM = "bottom";

package/dist/es2015/common/cycleDown.js

@@ -0,0 +1,5 @@
+export default function cycleDown(index, count) {
+    let result = index - 1;
+
+    return result < 0 ? count - 1 : result;
+}

package/dist/es2015/common/cycleIndex.js

@@ -0,0 +1,13 @@
+export default function cycleIndex(index, length) {
+    if (length === 1 || (index % length) === 0) {
+        return 0;
+    }
+
+    if (index < 0) {
+        return length + (index % length);
+    } else if (index >= length) {
+        return index % length;
+    }
+
+    return index;
+}

package/dist/es2015/common/cycleUp.js

@@ -0,0 +1,3 @@
+export default function cycleUp(index, count) {
+    return (index + 1) % count;
+}

package/dist/es2015/common.js

@@ -3,6 +3,9 @@ export { default as removeClass } from './common/remove-class';
 export { default as alignPathToPixel } from './common/align-path-to-pixel';
 export { default as clockwise } from './common/clockwise';
 export { default as convertableToNumber } from './common/convertable-to-number';
+export { default as cycleUp } from './common/cycleUp';
+export { default as cycleDown } from './common/cycleDown';
+export { default as cycleIndex } from './common/cycleIndex';
 export { default as deepExtend } from './common/deep-extend';
 export { default as elementStyles } from './common/element-styles';
 export { default as getSpacing } from './common/get-spacing';

package/dist/es2015/core/chart-element.js

@@ -1,7 +1,7 @@
 import { drawing as draw } from '@progress/kendo-drawing';
 
 import { WHITE } from '../common/constants';
-import { Class, deepExtend, defined, valueOrDefault } from '../common';
+import { Class, deepExtend, defined, valueOrDefault, autoTextColor } from '../common';
 
 class ChartElement extends Class {
     constructor(options) {
@@ -251,8 +251,8 @@ class ChartElement extends Class {
                         percentage: this.percentage,
                         runningTotal: this.runningTotal,
                         total: this.total
-                    }
-                ));
+                    })
+                );
 
                 if (!highlight) {
                     return;
@@ -271,6 +271,34 @@ class ChartElement extends Class {
         highlight.visible(show);
     }
 
+    toggleFocusHighlight(show) {
+        const options = ((this.options || {}).accessibility || {}).highlight || {};
+        let focusHighlight = this._focusHighlight;
+
+        if (!show && !focusHighlight) {
+            return;
+        }
+
+        if (!focusHighlight) {
+            const rootBackground = this.getRoot().options.background;
+            const highlightColor = autoTextColor(rootBackground);
+            const focusHighlightOptions = {
+                fill: {
+                    opacity: options.opacity,
+                    color: options.color
+                },
+                stroke: Object.assign({}, {color: highlightColor}, options.border),
+                zIndex: options.zIndex
+            };
+
+            focusHighlight = this._focusHighlight = this.createFocusHighlight(focusHighlightOptions);
+
+            this.appendVisual(focusHighlight);
+        }
+
+        focusHighlight.visible(show);
+    }
+
     createGradientOverlay(element, options, gradientOptions) {
         const overlay = new draw.Path(Object.assign({
             stroke: {

package/dist/es2015/core/shape-builder.js

@@ -9,7 +9,7 @@ class ShapeBuilder extends Class {
         let endAngle = sector.angle + startAngle;
 
         //required in order to avoid reversing the arc direction in cases like 0.000000000000001 + 100 === 100
-        if (sector.angle > 0 && startAngle === endAngle) {
+        if (sector.angle === 0 || sector.angle > 0 && startAngle === endAngle) {
             endAngle += DIRECTION_ANGLE;
         }
 

package/dist/es2015/core/shape-element.js

@@ -3,6 +3,7 @@ import { round, setDefaultOptions } from '../common';
 import { CENTER, CIRCLE, COORD_PRECISION, CROSS, ROUNDED_RECT, TRIANGLE } from '../common/constants';
 import { valueOrDefault } from '../drawing-utils';
 import BoxElement from './box-element';
+import addAccessibilityAttributesToVisual from './utils/add-accessibility-attributes-to-visual';
 
 class ShapeElement extends BoxElement {
 
@@ -104,6 +105,8 @@ class ShapeElement extends BoxElement {
 
     createVisual() {
         this.visual = this.createElement();
+
+        addAccessibilityAttributesToVisual(this.visual, this.options.accessibilityOptions);
     }
 }
 

package/dist/es2015/core/utils/add-accessibility-attributes-to-visual.js

@@ -0,0 +1,8 @@
+export default function addAccessibilityAttributesToVisual(visual, accessibilityOptions) {
+    if (accessibilityOptions) {
+        visual.options.className = accessibilityOptions.className;
+        visual.options.role = accessibilityOptions.role;
+        visual.options.ariaLabel = accessibilityOptions.ariaLabel;
+        visual.options.ariaRoleDescription = accessibilityOptions.ariaRoleDescription;
+    }
+}

package/dist/es2015/core/utils/guid.js

@@ -0,0 +1,17 @@
+export default function guid() {
+    let id = "";
+    let i;
+    let random;
+
+    for (i = 0; i < 32; i++) {
+        random = Math.random() * 16 | 0;
+
+        if (i === 8 || i === 12 || i === 16 || i === 20) {
+            id += "-";
+        }
+
+        id += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16); // eslint-disable-line no-nested-ternary
+    }
+
+    return id;
+}