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

package/dist/es2015/chart/bubble-chart/bubble.js

@@ -55,6 +55,16 @@ class Bubble extends LinePoint {
 
         return highlightGroup;
     }
+
+    createFocusHighlight(style) {
+        const highlightOptions = this.options.accessibility.highlight;
+        const markers = this.options.markers;
+        const center = this.box.center();
+        const radius = (markers.size + markers.border.width) / 2 + highlightOptions.border.width / 2;
+        const highlight = new draw.Circle(new geom.Circle([ center.x, center.y ], radius), style);
+
+        return highlight;
+    }
 }
 
 Bubble.prototype.defaults = deepExtend({}, Bubble.prototype.defaults, {

package/dist/es2015/chart/bullet-chart/bullet.js

@@ -12,6 +12,8 @@ import { WHITE, TOP, RIGHT } from '../../common/constants';
 import { alignPathToPixel, deepExtend, defined, getTemplate, setDefaultOptions, valueOrDefault } from '../../common';
 
 import BarLabel from '../bar-chart/bar-label';
+import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE } from '../constants';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 
 class Bullet extends ChartElement {
     constructor(value, options) {
@@ -56,21 +58,27 @@ class Bullet extends ChartElement {
         const labels = options.labels;
 
         if (labels.visible) {
-            const pointData = this.pointData();
-            let labelTemplate = getTemplate(labels);
-            let labelText;
-
-            if (labelTemplate) {
-                labelText = labelTemplate(pointData);
-            } else {
-                labelText = this.formatValue(labels.format);
-            }
-
-            this.label = new BarLabel(labelText, labels, pointData);
+            this.label = this.createLabelElement(labels);
             this.append(this.label);
         }
     }
 
+    createLabelElement(options) {
+        return new BarLabel(this.getLabelText(options),
+            options,
+            this.pointData());
+    }
+
+    getLabelText(options) {
+        let labelTemplate = getTemplate(options);
+
+        if (labelTemplate) {
+            return labelTemplate(this.pointData());
+        }
+
+        return this.formatValue(options.format);
+    }
+
     reflow(box) {
         this.render();
 
@@ -108,6 +116,8 @@ class Bullet extends ChartElement {
     createVisual() {
         super.createVisual();
 
+        this.addAccessibilityAttributesToVisual();
+
         const options = this.options;
         const body = draw.Path.fromRect(this.box.toRect(), {
             fill: {
@@ -172,9 +182,14 @@ class Bullet extends ChartElement {
     overlapsBox(box) {
         return this.box.overlaps(box);
     }
+
+    getIndex() {
+        return this.categoryIx;
+    }
 }
 
 Bullet.prototype.tooltipAnchor = Bar.prototype.tooltipAnchor;
+Bullet.prototype.createFocusHighlight = Bar.prototype.createFocusHighlight;
 
 setDefaultOptions(Bullet, {
     border: {
@@ -200,10 +215,16 @@ setDefaultOptions(Bullet, {
     },
     notes: {
         label: {}
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 });
 
 deepExtend(Bullet.prototype, PointEventsMixin);
 deepExtend(Bullet.prototype, NoteMixin);
+deepExtend(Bullet.prototype, AccessibilityAttributesMixin);
 
 export default Bullet;

package/dist/es2015/chart/candlestick-chart/candlestick.js

@@ -3,8 +3,10 @@ import { drawing as draw, Color } from '@progress/kendo-drawing';
 import { ChartElement, Point } from '../../core';
 import PointEventsMixin from '../mixins/point-events-mixin';
 import NoteMixin from '../mixins/note-mixin';
+import Bar from '../bar-chart/bar';
+import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 
-import { TOOLTIP_OFFSET } from '../constants';
+import { CHART_POINT_ROLE_DESCRIPTION, CHART_POINT_CLASSNAME, CHART_POINT_ROLE, TOOLTIP_OFFSET } from '../constants';
 import hasGradientOverlay from '../utils/has-gradient-overlay';
 
 import { WHITE, LEFT, TOP } from '../../common/constants';
@@ -16,6 +18,10 @@ class Candlestick extends ChartElement {
         this.value = value;
     }
 
+    getLabelText(options) {
+        return this.formatValue(options.format);
+    }
+
     reflow(box) {
         const { options, value, owner: chart } = this;
         const valueAxis = chart.seriesValueAxis(options);
@@ -53,6 +59,9 @@ class Candlestick extends ChartElement {
 
     createVisual() {
         super.createVisual();
+
+        this.addAccessibilityAttributesToVisual();
+
         this._mainVisual = this.mainVisual(this.options);
         this.visual.append(
             this._mainVisual
@@ -196,8 +205,26 @@ class Candlestick extends ChartElement {
     overlapsBox(box) {
         return this.box.overlaps(box);
     }
+
+    pointData() {
+        return {
+            dataItem: this.dataItem,
+            value: this.value,
+            meanPoints: this.meanPoints,
+            medianPoints: this.medianPoints,
+            whiskerPoints: this.whiskerPoints,
+            stackValue: this.stackValue,
+            series: this.series
+        };
+    }
+
+    getIndex() {
+        return this.categoryIx;
+    }
 }
 
+Candlestick.prototype.createFocusHighlight = Bar.prototype.createFocusHighlight;
+
 setDefaultOptions(Candlestick, {
     vertical: true,
     border: {
@@ -218,6 +245,9 @@ setDefaultOptions(Candlestick, {
                     "<tr><td>Close:</td><td>{3:C}</td></tr>" +
                 "</table>"
     },
+    labels: {
+        format: ""
+    },
     highlight: {
         opacity: 1,
         border: {
@@ -232,10 +262,16 @@ setDefaultOptions(Candlestick, {
     notes: {
         visible: true,
         label: {}
+    },
+    accessibility: {
+        role: CHART_POINT_ROLE,
+        className: CHART_POINT_CLASSNAME,
+        ariaRoleDescription: CHART_POINT_ROLE_DESCRIPTION
     }
 });
 
 deepExtend(Candlestick.prototype, PointEventsMixin);
 deepExtend(Candlestick.prototype, NoteMixin);
+deepExtend(Candlestick.prototype, AccessibilityAttributesMixin);
 
 export default Candlestick;

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

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

package/dist/es2015/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 @@ const AXIS_NAMES = [ CATEGORY, VALUE, X, Y ];
 const MOUSEMOVE = "mousemove";
 const CONTEXTMENU = "contextmenu";
 const MOUSELEAVE = "mouseleave";
+const KEYDOWN = "keydown";
+const FOCUS = "focus";
+const BLUR = "blur";
 const MOUSEMOVE_DELAY = 20;
 
 class Chart extends Class {
@@ -56,6 +60,7 @@ class Chart extends Class {
         this._originalOptions = deepExtend({}, options);
         this._theme = themeOptions;
         this._initTheme(options, themeOptions);
+        this._focusState = {};
 
         this._initHandlers();
         this._initSurface();
@@ -74,6 +79,9 @@ class Chart extends Class {
     _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);
         }
@@ -287,8 +295,11 @@ class Chart extends Class {
 
         this._destroyView();
 
+        this._setElementAccessibilityAttributes();
+
         this._model = model;
         this._plotArea = model._plotArea;
+        this._legend = model._legend;
 
         model.renderVisual();
 
@@ -326,6 +337,13 @@ class Chart extends Class {
         }
     }
 
+    _setElementAccessibilityAttributes() {
+        let titleOptions = this.options.title;
+        let title = isString(titleOptions) ? titleOptions : (titleOptions.description || titleOptions.text);
+
+        this.element.setAttribute("aria-roledescription", title);
+    }
+
     exportVisual(exportOptions) {
         let visual;
         if (exportOptions && (exportOptions.width || exportOptions.height || exportOptions.options)) {
@@ -474,7 +492,9 @@ class Chart extends Class {
         model.append.apply(model, Title.orderTitles([title, subtitle]));
 
         if (options.legend && options.legend.visible) {
-            model.append(new Legend(plotArea.options.legend, this.chartService));
+            const legend = new Legend(plotArea.options.legend, this.chartService);
+            model.append(legend);
+            model._legend = legend;
         }
         model.append(plotArea);
         model.reflow();
@@ -534,6 +554,9 @@ class Chart extends Class {
 
     _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);
@@ -577,7 +600,10 @@ class Chart extends 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);
         }
 
         const observers = this.observers;
@@ -599,7 +625,10 @@ class Chart extends Class {
         bindEvents(element, {
             [ CONTEXTMENU ]: this._clickHandler,
             [ MOUSEWHEEL ]: this._mousewheelHandler,
-            [ MOUSELEAVE ]: this._mouseleaveHandler
+            [ MOUSELEAVE ]: this._mouseleaveHandler,
+            [ KEYDOWN ]: this._keydownHandler,
+            [ FOCUS ]: this._focusHandler,
+            [ BLUR]: this._blurHandler
         });
 
         if (this._shouldAttachMouseMove()) {
@@ -646,6 +675,7 @@ class Chart extends Class {
         if (this._mousewheelZoom && !this._stopChartHandlers(e)) {
             this._gestureDistance = e.distance;
             this._unsetActivePoint();
+            this._clearFocusedElement();
             this.surface.suspendTracking();
         }
     }
@@ -714,6 +744,7 @@ class Chart extends Class {
         if (this._pannable && this._pannable.start(e)) {
             this.surface.suspendTracking();
             this._unsetActivePoint();
+            this._clearFocusedElement();
             this._suppressHover = true;
             this.chartService.panning = true;
         }
@@ -833,6 +864,7 @@ class Chart extends Class {
 
                 if (!this._zooming) {
                     this._unsetActivePoint();
+                    this._clearFocusedElement();
                     this.surface.suspendTracking();
                     this._zooming = true;
                 }
@@ -916,6 +948,7 @@ class Chart extends Class {
         } else {
             this._suppressHover = true;
             this._unsetActivePoint();
+            this._clearFocusedElement();
             this._navState = {
                 axisRanges: ranges,
                 pane: pane,
@@ -1046,6 +1079,214 @@ class Chart extends Class {
         }
     }
 
+    _isLegendBeforeChart() {
+        const { options: { legend: { position: legendPosition } }, _legend: legend } = this;
+
+        return legend && legend.hasItems() && (legendPosition === TOP || legendPosition === LEFT);
+    }
+
+    _focus() {
+        if (!this._preventInitialPointFocus) {
+            if (this._isLegendBeforeChart()) {
+                this._focusFirstLegendItem();
+            } else {
+                this._focusFirstPoint();
+            }
+        }
+    }
+
+    _keydown(e) {
+        const { _focusState: { legendInFocus }, _legend: legend } = this;
+
+        if (e.key === TAB) {
+            this._clearFocusedElement();
+            const 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);
+        }
+    }
+
+    _navigatePoints(e) {
+        const { _focusState: focusState, _plotArea: plotArea } = this;
+
+        focusState.legendInFocus = false;
+
+        if (!focusState.focusedElement) {
+            this._focusFirstPoint();
+            e.preventDefault();
+            return;
+        }
+
+        const moveFocus = (point) => {
+            focusState.focusedPoint = point;
+
+            this._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;
+        }
+    }
+
+    _navigateLegend(e) {
+        const { _focusState: focusState, _legend: legend } = this;
+
+        focusState.legendInFocus = true;
+
+        if (!focusState.focusedElement) {
+            this._focusFirstLegendItem();
+            e.preventDefault();
+            return;
+        }
+
+        const itemsLength = legend.getItems().length;
+        const moveFocus = () => {
+            this._focusElement(this._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;
+        }
+    }
+
+    _focusFirstPoint() {
+        const point = this._focusState.focusedPoint = this._plotArea.getFirstPoint();
+
+        if (point) {
+            this._focusElement(point);
+        }
+    }
+
+    _focusChart() {
+        if (document.activeElement !== this.element) {
+            this._preventInitialPointFocus = true;
+            this.element.focus();
+            this._preventInitialPointFocus = false;
+        }
+    }
+
+    _focusPoint(point) {
+        this._focusState.focusedPoint = point;
+
+        this._focusChart();
+
+        this._focusElement(point, true);
+    }
+
+    _focusFirstLegendItem() {
+        const { _focusState: focusState } = this;
+
+        focusState.focusedLegendItemIndex = 0;
+        this._focusElement(this._getFocusedLegendItem());
+        focusState.legendInFocus = true;
+    }
+
+    _focusLegendItem(args) {
+        const { _focusState: focusState } = this;
+
+        focusState.focusedLegendItemIndex = args.seriesIndex;
+        focusState.legendInFocus = true;
+
+        this._focusChart();
+
+        this._focusElement(this._getFocusedLegendItem(), true);
+    }
+
+    _getFocusedLegendItem() {
+        const { _focusState: focusState, _legend: legend } = this;
+
+        return legend.getItems()[focusState.focusedLegendItemIndex];
+    }
+
+    _focusElement(element, omitHighlight) {
+        const { _focusState: focusState } = this;
+
+        this._clearFocusedElement();
+
+        focusState.focusedElement = element;
+
+        if (!omitHighlight) {
+            element.focusVisual();
+
+            this._setElementActiveDescendant(element._id);
+
+            if (focusState.legendInFocus) {
+                this._showSeriesInactiveOpacity(focusState.focusedLegendItemIndex);
+            } else {
+                this._showInactiveOpacity(element);
+            }
+        }
+    }
+
+    _clearFocusedElement() {
+        const { _focusState: focusState } = this;
+
+        if (!focusState) {
+            return;
+        }
+
+        if (focusState.focusedElement) {
+            focusState.focusedElement.clearFocusFromVisual();
+            this._setElementActiveDescendant(null);
+        }
+
+        focusState.focusedElement = null;
+    }
+
+    _setElementActiveDescendant(id) {
+        if (id) {
+            this.element.setAttribute(ARIA_ACTIVE_DESCENDANT, id);
+        } else {
+            this.element.removeAttribute(ARIA_ACTIVE_DESCENDANT);
+        }
+    }
+
+    _blur() {
+        this._focusState.legendInFocus = false;
+        this._clearFocusedElement();
+        this._hideInactiveOpacity();
+    }
+
     _startHover(element, e) {
         if (this._suppressHover) {
             return false;
@@ -1055,7 +1296,19 @@ class Chart extends Class {
             return (element.hover || element.over) && !(element instanceof PlotAreaBase);
         });
 
-        this._showInactiveOpacity(point, e);
+        const 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;
     }
@@ -1218,28 +1471,15 @@ class Chart extends Class {
         return chartInstance;
     }
 
-    _showInactiveOpacity(point, e) {
-        const activePoint = this._activePoint;
+    _showInactiveOpacity(point) {
         const multipleSeries = this._plotArea.series.length > 1;
         const 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;
     }
 
     _hideInactiveOpacity(point) {
@@ -1308,6 +1548,7 @@ class Chart extends Class {
                 [ MOUSEMOVE ]: this._mouseMoveTrackHandler
             });
             this._unsetActivePoint();
+            this._clearFocusedElement();
             this._mouseMoveTrackHandler = null;
 
             this._hideInactiveOpacity(point);
@@ -1531,6 +1772,10 @@ class Chart extends Class {
     }
 
     _legendItemHover(seriesIndex, pointIndex) {
+        this._showSeriesInactiveOpacity(seriesIndex, pointIndex);
+    }
+
+    _showSeriesInactiveOpacity(seriesIndex, pointIndex) {
         const { _plotArea: plotArea, _highlight: highlight } = this;
         const currentSeries = (plotArea.srcSeries || plotArea.series)[seriesIndex];
         let items;
@@ -1612,7 +1857,10 @@ class Chart extends Class {
             [ CONTEXTMENU ]: this._clickHandler,
             [ MOUSEWHEEL ]: this._mousewheelHandler,
             [ MOUSEMOVE ]: this._mousemove,
-            [ MOUSELEAVE ]: this._mouseleaveHandler
+            [ MOUSELEAVE ]: this._mouseleaveHandler,
+            [ KEYDOWN ]: this._keydownHandler,
+            [ FOCUS ]: this._focusHandler,
+            [ BLUR]: this._blurHandler
         });
 
         if (this.domEvents) {
@@ -1626,6 +1874,8 @@ class Chart extends Class {
             });
         }
 
+        this._focusState = null;
+
         this._destroyView();
 
         this._destroySurface();
@@ -1663,6 +1913,7 @@ class Chart extends Class {
         }
 
         this._unsetActivePoint();
+        this._clearFocusedElement();
         this._resetDrilldownPoint();
         this._destroySelections();
 
@@ -1893,7 +2144,16 @@ setDefaultOptions(Chart, {
     chartArea: {},
     legend: {
         visible: true,
-        labels: {}
+        labels: {},
+        accessibility: {
+            highlight: {
+                border: {
+                    opacity: 1,
+                    color: BLACK,
+                    width: 2
+                }
+            }
+        }
     },
     categoryAxis: {},
     seriesDefaults: {
@@ -1905,6 +2165,15 @@ setDefaultOptions(Chart, {
         labels: {},
         negativeValues: {
             visible: false
+        },
+        accessibility: {
+            highlight: {
+                border: {
+                    opacity: 1,
+                    width: 2
+                },
+                zIndex: 200
+            }
         }
     },
     series: [],