highcharts 9.3.2 → 10.1.0

package/es-modules/Accessibility/Components/SeriesComponent/SeriesDescriber.js

@@ -43,13 +43,17 @@ function findFirstPointWithGraphic(point) {
     }) || null;
 }
 /**
+ * Whether or not we should add a dummy point element in
+ * order to describe a point that has no graphic.
  * @private
  */
 function shouldAddDummyPoint(point) {
     // Note: Sunburst series use isNull for hidden points on drilldown.
     // Ignore these.
-    var isSunburst = point.series && point.series.is('sunburst'), isNull = point.isNull;
-    return isNull && !isSunburst;
+    var series = point.series, chart = series && series.chart, isSunburst = series && series.is('sunburst'), isNull = point.isNull, shouldDescribeNull = chart &&
+        chart
+            .options.accessibility.point.describeNull;
+    return isNull && !isSunburst && shouldDescribeNull;
 }
 /**
  * @private
@@ -258,9 +262,9 @@ function getPointValueDescription(point) {
  * @private
  */
 function defaultPointDescriptionFormatter(point) {
-    var series = point.series, chart = series.chart, valText = getPointValueDescription(point), description = point.options && point.options.accessibility &&
-        point.options.accessibility.description, userDescText = description ? ' ' + description : '', seriesNameText = chart.series.length > 1 && series.name ?
-        ' ' + series.name + '.' : '', annotationsDesc = getPointAnnotationDescription(point), pointAnnotationsText = annotationsDesc ? ' ' + annotationsDesc : '';
+    var series = point.series, shouldExposeSeriesName = series.chart.series.length > 1 ||
+        series.options.name, valText = getPointValueDescription(point), description = point.options && point.options.accessibility &&
+        point.options.accessibility.description, userDescText = description ? ' ' + description : '', seriesNameText = shouldExposeSeriesName ? ' ' + series.name + '.' : '', annotationsDesc = getPointAnnotationDescription(point), pointAnnotationsText = annotationsDesc ? ' ' + annotationsDesc : '';
     point.accessibility = point.accessibility || {};
     point.accessibility.valueDescription = valText;
     return valText + userDescText + seriesNameText + pointAnnotationsText;
@@ -287,15 +291,19 @@ function setPointScreenReaderAttribs(point, pointElement) {
  * @param {Highcharts.Series} series
  */
 function describePointsInSeries(series) {
-    var setScreenReaderProps = shouldSetScreenReaderPropsOnPoints(series), setKeyboardProps = shouldSetKeyboardNavPropsOnPoints(series);
+    var setScreenReaderProps = shouldSetScreenReaderPropsOnPoints(series), setKeyboardProps = shouldSetKeyboardNavPropsOnPoints(series), shouldDescribeNullPoints = series.chart.options.accessibility
+        .point.describeNull;
     if (setScreenReaderProps || setKeyboardProps) {
         series.points.forEach(function (point) {
             var pointEl = point.graphic && point.graphic.element ||
-                shouldAddDummyPoint(point) && addDummyPointElement(point);
-            var pointA11yDisabled = (point.options &&
+                shouldAddDummyPoint(point) && addDummyPointElement(point), pointA11yDisabled = (point.options &&
                 point.options.accessibility &&
                 point.options.accessibility.enabled === false);
             if (pointEl) {
+                if (point.isNull && !shouldDescribeNullPoints) {
+                    pointEl.setAttribute('aria-hidden', true);
+                    return;
+                }
                 // We always set tabindex, as long as we are setting props.
                 // When setting tabindex, also remove default outline to
                 // avoid ugly border on click.
@@ -320,14 +328,19 @@ function describePointsInSeries(series) {
 function defaultSeriesDescriptionFormatter(series) {
     var chart = series.chart, chartTypes = chart.types || [], description = getSeriesDescriptionText(series), shouldDescribeAxis = function (coll) {
         return chart[coll] && chart[coll].length > 1 && series[coll];
-    }, xAxisInfo = getSeriesAxisDescriptionText(series, 'xAxis'), yAxisInfo = getSeriesAxisDescriptionText(series, 'yAxis'), summaryContext = {
-        name: series.name || '',
-        ix: series.index + 1,
-        numSeries: chart.series && chart.series.length,
-        numPoints: series.points && series.points.length,
-        series: series
-    }, combinationSuffix = chartTypes.length > 1 ? 'Combination' : '', summary = chart.langFormat('accessibility.series.summary.' + series.type + combinationSuffix, summaryContext) || chart.langFormat('accessibility.series.summary.default' + combinationSuffix, summaryContext);
-    return summary + (description ? ' ' + description : '') + (shouldDescribeAxis('yAxis') ? ' ' + yAxisInfo : '') + (shouldDescribeAxis('xAxis') ? ' ' + xAxisInfo : '');
+    }, seriesNumber = series.index + 1, xAxisInfo = getSeriesAxisDescriptionText(series, 'xAxis'), yAxisInfo = getSeriesAxisDescriptionText(series, 'yAxis'), summaryContext = {
+        seriesNumber: seriesNumber,
+        series: series,
+        chart: chart
+    }, combinationSuffix = chartTypes.length > 1 ? 'Combination' : '', summary = chart.langFormat('accessibility.series.summary.' + series.type + combinationSuffix, summaryContext) || chart.langFormat('accessibility.series.summary.default' + combinationSuffix, summaryContext), axisDescription = (shouldDescribeAxis('yAxis') ? ' ' + yAxisInfo + '.' : '') + (shouldDescribeAxis('xAxis') ? ' ' + xAxisInfo + '.' : ''), formatStr = chart.options.accessibility.series.descriptionFormat || '';
+    return format(formatStr, {
+        seriesDescription: summary,
+        authorDescription: (description ? ' ' + description : ''),
+        axisDescription: axisDescription,
+        series: series,
+        chart: chart,
+        seriesNumber: seriesNumber
+    }, void 0);
 }
 /**
  * Set a11y props on a series element
@@ -343,7 +356,10 @@ function describeSeriesElement(series, seriesElement) {
     }
     else if (landmarkVerbosity === 'all') {
         seriesElement.setAttribute('role', 'region');
-    } /* else do not add role */
+    }
+    else {
+        seriesElement.setAttribute('role', 'group');
+    }
     seriesElement.setAttribute('tabindex', '-1');
     if (!series.chart.styledMode) {
         // Don't show browser outline on click, despite tabindex
@@ -373,7 +389,7 @@ function describeSeries(series) {
             describeSeriesElement(series, seriesEl);
         }
         else {
-            seriesEl.setAttribute('aria-label', '');
+            seriesEl.removeAttribute('aria-label');
         }
     }
 }

package/es-modules/Accessibility/Components/SeriesComponent/SeriesKeyboardNavigation.js

@@ -84,6 +84,35 @@ function isSkipPoint(point) {
         pointA11yDisabled ||
         isSkipSeries(point.series);
 }
+/**
+ * Get the first point that is not a skip point in this series.
+ * @private
+ */
+function getFirstValidPointInSeries(series) {
+    var points = series.points || [], len = points.length;
+    for (var i = 0; i < len; ++i) {
+        if (!isSkipPoint(points[i])) {
+            return points[i];
+        }
+    }
+    return null;
+}
+/**
+ * Get the first point that is not a skip point in this chart.
+ * @private
+ */
+function getFirstValidPointInChart(chart) {
+    var series = chart.series || [], len = series.length;
+    for (var i = 0; i < len; ++i) {
+        if (!isSkipSeries(series[i])) {
+            var point = getFirstValidPointInSeries(series[i]);
+            if (point) {
+                return point;
+            }
+        }
+    }
+    return null;
+}
 /**
  * @private
  */
@@ -95,7 +124,7 @@ function highlightLastValidPointInChart(chart) {
         // Highlight first valid point in the series will also
         // look backwards. It always starts from currently
         // highlighted point.
-        res = chart.series[i].highlightFirstValidPoint();
+        res = chart.series[i].highlightNextValidPoint();
         if (res) {
             break;
         }
@@ -103,24 +132,24 @@ function highlightLastValidPointInChart(chart) {
     return res;
 }
 /**
+ * After drilling down/up, we need to set focus to the first point for
+ * screen readers and keyboard nav.
  * @private
  */
 function updateChartFocusAfterDrilling(chart) {
-    highlightFirstValidPointInChart(chart);
-    if (chart.focusElement) {
-        chart.focusElement.removeFocusBorder();
+    var point = getFirstValidPointInChart(chart);
+    if (point) {
+        point.highlight(false); // Do not visually highlight
     }
 }
 /**
+ * Highlight the first point in chart that is not a skip point
  * @private
  */
 function highlightFirstValidPointInChart(chart) {
-    var res = false;
     delete chart.highlightedPoint;
-    res = chart.series.reduce(function (acc, cur) {
-        return acc || cur.highlightFirstValidPoint();
-    }, false);
-    return res;
+    var point = getFirstValidPointInChart(chart);
+    return point ? point.highlight() : false;
 }
 /* *
  *
@@ -156,7 +185,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         e.addEvent(Series, 'destroy', function () {
             return keyboardNavigation.onSeriesDestroy(this);
         });
-        e.addEvent(chart, 'afterDrilldown', function () {
+        e.addEvent(chart, 'afterApplyDrilldown', function () {
             updateChartFocusAfterDrilling(this);
         });
         e.addEvent(chart, 'drilldown', function (e) {
@@ -195,25 +224,23 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         });
     };
     /**
+     * After drillup we want to find the point that was drilled down to and
+     * highlight it.
      * @private
      */
     SeriesKeyboardNavigation.prototype.onDrillupAll = function () {
-        // After drillup we want to find the point that was drilled down to and
-        // highlight it.
         var last = this.lastDrilledDownPoint, chart = this.chart, series = last && getSeriesFromName(chart, last.seriesName);
         var point;
         if (last && series && defined(last.x) && defined(last.y)) {
             point = getPointFromXY(series, last.x, last.y);
         }
+        point = point || getFirstValidPointInChart(chart);
         // Container focus can be lost on drillup due to deleted elements.
         if (chart.container) {
             chart.container.focus();
         }
         if (point && point.highlight) {
-            point.highlight();
-        }
-        if (chart.focusElement) {
-            chart.focusElement.removeFocusBorder();
+            point.highlight(false); // Do not visually highlight
         }
     };
     /**
@@ -252,8 +279,10 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
                     }]
             ],
             init: function () {
-                highlightFirstValidPointInChart(chart);
-                return this.response.success;
+                return keyboardNavigation.onHandlerInit(this);
+            },
+            validate: function () {
+                return !!getFirstValidPointInChart(chart);
             },
             terminate: function () {
                 return keyboardNavigation.onHandlerTerminate();
@@ -271,6 +300,24 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         var keys = this.keyCodes, isNext = keyCode === keys.right || keyCode === keys.down;
         return this.attemptHighlightAdjacentPoint(handler, isNext);
     };
+    /**
+     * When keyboard navigation inits.
+     * @private
+     * @param {Highcharts.KeyboardNavigationHandler} handler The handler object
+     * @return {number}
+     * response
+     */
+    SeriesKeyboardNavigation.prototype.onHandlerInit = function (handler) {
+        var chart = this.chart, kbdNavOptions = chart.options.accessibility.keyboardNavigation;
+        if (kbdNavOptions.seriesNavigation.rememberPointFocus &&
+            chart.highlightedPoint) {
+            chart.highlightedPoint.highlight();
+        }
+        else {
+            highlightFirstValidPointInChart(chart);
+        }
+        return handler.response.success;
+    };
     /**
      * @private
      * @param {Highcharts.KeyboardNavigationHandler} handler
@@ -297,7 +344,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
      * @private
      */
     SeriesKeyboardNavigation.prototype.onHandlerTerminate = function () {
-        var chart = this.chart;
+        var chart = this.chart, kbdNavOptions = chart.options.accessibility.keyboardNavigation;
         if (chart.tooltip) {
             chart.tooltip.hide(0);
         }
@@ -308,22 +355,22 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         if (chart.highlightedPoint && chart.highlightedPoint.onMouseOut) {
             chart.highlightedPoint.onMouseOut();
         }
-        delete chart.highlightedPoint;
+        if (!kbdNavOptions.seriesNavigation.rememberPointFocus) {
+            delete chart.highlightedPoint;
+        }
     };
     /**
      * Function that attempts to highlight next/prev point. Handles wrap around.
      * @private
-     * @param {Highcharts.KeyboardNavigationHandler} handler
-     * @param {boolean} directionIsNext
-     * @return {number}
-     * response
      */
     SeriesKeyboardNavigation.prototype.attemptHighlightAdjacentPoint = function (handler, directionIsNext) {
         var chart = this.chart, wrapAround = chart.options.accessibility.keyboardNavigation
             .wrapAround, highlightSuccessful = chart.highlightAdjacentPoint(directionIsNext);
         if (!highlightSuccessful) {
-            if (wrapAround) {
-                return handler.init(directionIsNext ? 1 : -1);
+            if (wrapAround && (directionIsNext ?
+                highlightFirstValidPointInChart(chart) :
+                highlightLastValidPointInChart(chart))) {
+                return handler.response.success;
             }
             return handler.response[directionIsNext ? 'next' : 'prev'];
         }
@@ -515,7 +562,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         // Highlight the new point or any first valid point back or forwards
         // from it
         newPoint.highlight();
-        return newPoint.series.highlightFirstValidPoint();
+        return newPoint.series.highlightNextValidPoint();
     }
     /**
      * @private
@@ -552,7 +599,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
                     seriesTypes[type].prototype.keyboardMoveVertical = false;
                 }
             });
-            seriesProto.highlightFirstValidPoint = (seriesHighlightFirstValidPoint);
+            seriesProto.highlightNextValidPoint = (seriesHighlightNextValidPoint);
         }
     }
     SeriesKeyboardNavigation.compose = compose;
@@ -586,7 +633,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         return defined(minIx) ? series.points[minIx] : void 0;
     }
     /**
-     * Highlights a point (show tooltip and display hover state).
+     * Highlights a point (show tooltip, display hover state, focus element).
      *
      * @private
      * @function Highcharts.Point#highlight
@@ -594,9 +641,10 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
      * @return {Highcharts.Point}
      *         This highlighted point.
      */
-    function pointHighlight() {
+    function pointHighlight(highlightVisually) {
+        if (highlightVisually === void 0) { highlightVisually = true; }
         var chart = this.series.chart;
-        if (!this.isNull) {
+        if (!this.isNull && highlightVisually) {
             this.onMouseOver(); // Show the hover marker and tooltip
         }
         else {
@@ -611,6 +659,9 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         // change z-index and mess up the element.
         if (this.graphic) {
             chart.setFocusToElement(this.graphic);
+            if (!highlightVisually && chart.focusElement) {
+                chart.focusElement.removeFocusBorder();
+            }
         }
         chart.highlightedPoint = this;
         return this;
@@ -621,9 +672,9 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
      * point in the series, use that as starting point.
      *
      * @private
-     * @function Highcharts.Series#highlightFirstValidPoint
+     * @function Highcharts.Series#highlightNextValidPoint
      */
-    function seriesHighlightFirstValidPoint() {
+    function seriesHighlightNextValidPoint() {
         var curPoint = this.chart.highlightedPoint, start = (curPoint && curPoint.series) === this ?
             getPointIndex(curPoint) :
             0, points = this.points, len = points.length;

package/es-modules/Accessibility/Components/ZoomComponent.js

@@ -42,8 +42,8 @@ var attr = U.attr, extend = U.extend, pick = U.pick;
  */
 function chartHasMapZoom(chart) {
     return !!(chart.mapZoom &&
-        chart.mapNavButtons &&
-        chart.mapNavButtons.length);
+        chart.mapNavigation &&
+        chart.mapNavigation.navButtons.length);
 }
 /* *
  *
@@ -81,7 +81,7 @@ var ZoomComponent = /** @class */ (function (_super) {
         var component = this, chart = this.chart;
         this.proxyProvider.addGroup('zoom', 'div');
         [
-            'afterShowResetZoom', 'afterDrilldown', 'drillupall'
+            'afterShowResetZoom', 'afterApplyDrilldown', 'drillupall'
         ].forEach(function (eventType) {
             component.addEvent(chart, eventType, function () {
                 component.updateProxyOverlays();
@@ -94,8 +94,8 @@ var ZoomComponent = /** @class */ (function (_super) {
     ZoomComponent.prototype.onChartUpdate = function () {
         var chart = this.chart, component = this;
         // Make map zoom buttons accessible
-        if (chart.mapNavButtons) {
-            chart.mapNavButtons.forEach(function (button, i) {
+        if (chart.mapNavigation) {
+            chart.mapNavigation.navButtons.forEach(function (button, i) {
                 unhideChartElementFromAT(chart, button.element);
                 component.setMapNavButtonAttrs(button.element, 'accessibility.zoom.mapZoom' + (i ? 'Out' : 'In'));
             });
@@ -131,10 +131,13 @@ var ZoomComponent = /** @class */ (function (_super) {
         if (chart.resetZoomButton) {
             this.createZoomProxyButton(chart.resetZoomButton, 'resetZoomProxyButton', chart.langFormat('accessibility.zoom.resetZoomButton', { chart: chart }));
         }
-        if (chart.drillUpButton) {
+        if (chart.drillUpButton &&
+            chart.breadcrumbs &&
+            chart.breadcrumbs.list) {
+            var lastBreadcrumb = chart.breadcrumbs.list[chart.breadcrumbs.list.length - 1];
             this.createZoomProxyButton(chart.drillUpButton, 'drillUpProxyButton', chart.langFormat('accessibility.drillUpButton', {
                 chart: chart,
-                buttonText: chart.getDrilldownBackText()
+                buttonText: chart.breadcrumbs.getButtonText(lastBreadcrumb)
             }));
         }
     };
@@ -214,14 +217,14 @@ var ZoomComponent = /** @class */ (function (_super) {
         var isMoveOutOfRange = isBackwards && !this.focusedMapNavButtonIx ||
             !isBackwards && this.focusedMapNavButtonIx;
         // Deselect old
-        chart.mapNavButtons[this.focusedMapNavButtonIx].setState(0);
+        chart.mapNavigation.navButtons[this.focusedMapNavButtonIx].setState(0);
         if (isMoveOutOfRange) {
             chart.mapZoom(); // Reset zoom
             return response[isBackwards ? 'prev' : 'next'];
         }
         // Select other button
         this.focusedMapNavButtonIx += isBackwards ? -1 : 1;
-        var button = chart.mapNavButtons[this.focusedMapNavButtonIx];
+        var button = chart.mapNavigation.navButtons[this.focusedMapNavButtonIx];
         chart.setFocusToElement(button.box, button.element);
         button.setState(2);
         return response.success;
@@ -241,7 +244,7 @@ var ZoomComponent = /** @class */ (function (_super) {
      * @param {number} direction
      */
     ZoomComponent.prototype.onMapNavInit = function (direction) {
-        var chart = this.chart, zoomIn = chart.mapNavButtons[0], zoomOut = chart.mapNavButtons[1], initialButton = direction > 0 ? zoomIn : zoomOut;
+        var chart = this.chart, zoomIn = chart.mapNavigation.navButtons[0], zoomOut = chart.mapNavigation.navButtons[1], initialButton = direction > 0 ? zoomIn : zoomOut;
         chart.setFocusToElement(initialButton.box, initialButton.element);
         initialButton.setState(2);
         this.focusedMapNavButtonIx = direction > 0 ? 0 : 1;

package/es-modules/Accessibility/FocusBorder.js

@@ -151,12 +151,13 @@ var FocusBorderComposition;
             this.removeFocusBorder();
         }
         // Add the border rect
-        var bb = this.getBBox(), pad = pick(margin, 3);
+        var bb = this.getBBox(), pad = pick(margin, 3), parent = this.parentGroup, scaleX = this.scaleX || parent && parent.scaleX, scaleY = this.scaleY || parent && parent.scaleY, oneDefined = scaleX ? !scaleY : scaleY, scaleBoth = oneDefined ? Math.abs(scaleX || scaleY || 1) :
+            (Math.abs(scaleX || 1) + Math.abs(scaleY || 1)) / 2;
         bb.x += this.translateX ? this.translateX : 0;
         bb.y += this.translateY ? this.translateY : 0;
         var borderPosX = bb.x - pad, borderPosY = bb.y - pad, borderWidth = bb.width + 2 * pad, borderHeight = bb.height + 2 * pad;
-        // For text elements, apply x and y offset, #11397.
         /**
+         * For text elements, apply x and y offset, #11397.
          * @private
          */
         function getTextAnchorCorrection(text) {
@@ -203,16 +204,16 @@ var FocusBorderComposition;
                 }
             }
         }
-        this.focusBorder = this.renderer.rect(borderPosX, borderPosY, borderWidth, borderHeight, parseInt((attribs && attribs.r || 0).toString(), 10))
+        this.focusBorder = this.renderer.rect(borderPosX, borderPosY, borderWidth, borderHeight, parseInt((attribs && attribs.r || 0).toString(), 10) / scaleBoth)
             .addClass('highcharts-focus-border')
             .attr({
             zIndex: 99
         })
-            .add(this.parentGroup);
+            .add(parent);
         if (!this.renderer.styledMode) {
             this.focusBorder.attr({
                 stroke: attribs && attribs.stroke,
-                'stroke-width': attribs && attribs.strokeWidth
+                'stroke-width': (attribs && attribs.strokeWidth || 0) / scaleBoth
             });
         }
         avgElementAddUpdateFocusBorderHooks(this, margin, attribs);

package/es-modules/Accessibility/HighContrastMode.js

@@ -42,8 +42,8 @@ function isHighContrastModeActive() {
         doc.body.removeChild(testDiv);
         return bi === 'none';
     }
-    // Not used for other browsers
-    return false;
+    // Other browsers use the forced-colors standard
+    return win.matchMedia && win.matchMedia('(forced-colors: active)').matches;
 }
 /**
  * Force high contrast theme for the chart. The default theme is defined in