highcharts 13.0.2 → 13.1.0

package/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highcharts",
-  "version": "13.0.2",
+  "version": "13.1.0",
   "main": "highcharts.js",
   "license": "https://www.highcharts.com/license",
   "types": "highcharts.d.ts",

package/css/highcharts.css

@@ -315,9 +315,13 @@
     transition: stroke 150ms;
 }
 
+/* Invisible hit area for tooltip.stickOnContact, the stroke is the tolerance */
 .highcharts-tooltip .highcharts-tracker {
-    fill: none;
-    stroke: none;
+    fill: rgba(0, 0, 0, 0);
+    pointer-events: auto;
+    stroke: rgba(0, 0, 0, 0);
+    stroke-linejoin: round;
+    stroke-width: 10px;
 }
 
 .highcharts-tooltip text,

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

@@ -25,7 +25,7 @@ const { format } = F;
 import H from '../../Core/Globals.js';
 const { doc } = H;
 import HU from '../Utils/HTMLUtilities.js';
-const { addClass, getElement, getHeadingTagNameForElement, stripHTMLTagsFromString, visuallyHideElement } = HU;
+const { addClass, getElement, getHeadingTagNameForElement, getShadowRoot, stripHTMLTagsFromString, visuallyHideElement } = HU;
 import { attr, replaceNested } from '../../Shared/Utilities.js';
 /* *
  *
@@ -240,7 +240,11 @@ class InfoRegionsComponent extends AccessibilityComponent {
         if (typeof linkedDescOption !== 'string') {
             return linkedDescOption;
         }
-        const query = format(linkedDescOption, this.chart), queryMatch = doc.querySelectorAll(query);
+        const query = format(linkedDescOption, this.chart), shadowRoot = getShadowRoot(this.chart.renderTo), shadowMatch = shadowRoot?.querySelectorAll(query), 
+        // The description may also live outside the shadow root (#22682)
+        queryMatch = shadowMatch?.length ?
+            shadowMatch :
+            doc.querySelectorAll(query);
         if (queryMatch.length === 1) {
             return queryMatch[0];
         }
@@ -412,7 +416,7 @@ class InfoRegionsComponent extends AccessibilityComponent {
      * @private
      */
     getEndOfChartMarkerText() {
-        const endMarkerId = `highcharts-end-of-chart-marker-${this.chart.index}`, endMarker = getElement(endMarkerId);
+        const endMarkerId = `highcharts-end-of-chart-marker-${this.chart.index}`, endMarker = getElement(endMarkerId, this.chart.renderTo);
         if (endMarker) {
             return endMarker.outerHTML;
         }
@@ -449,8 +453,8 @@ class InfoRegionsComponent extends AccessibilityComponent {
      * @param {string} sonifyButtonId
      */
     initSonifyButton(sonifyButtonId) {
-        const el = this.sonifyButton = getElement(sonifyButtonId);
         const chart = this.chart;
+        const el = this.sonifyButton = getElement(sonifyButtonId, chart.renderTo);
         const defaultHandler = (e) => {
             if (el) {
                 el.setAttribute('aria-hidden', 'true');
@@ -486,11 +490,11 @@ class InfoRegionsComponent extends AccessibilityComponent {
      * @param {string} tableButtonId
      */
     initDataTableButton(tableButtonId) {
-        const el = this.viewDataTableButton = getElement(tableButtonId), chart = this.chart, tableId = tableButtonId.replace('hc-linkto-', '');
+        const chart = this.chart, el = this.viewDataTableButton = getElement(tableButtonId, chart.renderTo), tableId = tableButtonId.replace('hc-linkto-', '');
         if (el) {
             attr(el, {
                 tabindex: -1,
-                'aria-expanded': !!getElement(tableId)
+                'aria-expanded': !!getElement(tableId, chart.renderTo)
             });
             el.onclick = chart.options.accessibility
                 .screenReaderSection.onViewDataTableClick ||

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

@@ -18,7 +18,7 @@ const { hideSeriesFromAT } = ChartUtilities;
 import ForcedMarkers from './ForcedMarkers.js';
 import NewDataAnnouncer from './NewDataAnnouncer.js';
 import SeriesDescriber from './SeriesDescriber.js';
-const { describeSeries } = SeriesDescriber;
+const { compose: composeSeriesDescriber, describeSeries } = SeriesDescriber;
 import SeriesKeyboardNavigation from './SeriesKeyboardNavigation.js';
 /* *
  *
@@ -44,6 +44,7 @@ class SeriesComponent extends AccessibilityComponent {
     static compose(ChartClass, PointClass, SeriesClass) {
         NewDataAnnouncer.compose(SeriesClass);
         ForcedMarkers.compose(SeriesClass);
+        composeSeriesDescriber(PointClass);
         SeriesKeyboardNavigation.compose(ChartClass, PointClass, SeriesClass);
     }
     /* *

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

@@ -18,14 +18,37 @@ import ChartUtilities from '../../Utils/ChartUtilities.js';
 const { getAxisDescription, getSeriesFirstPointElement, getSeriesA11yElement, unhideChartElementFromAT } = ChartUtilities;
 import F from '../../../Core/Templating.js';
 const { format, numberFormat } = F;
+import H from '../../../Core/Globals.js';
+const { composed } = H;
 import HTMLUtilities from '../../Utils/HTMLUtilities.js';
 const { reverseChildNodes, stripHTMLTagsFromString: stripHTMLTags } = HTMLUtilities;
-import { defined, find, isString, isNumber } from '../../../Shared/Utilities.js';
+import { defined, find, isString, isNumber, pushUnique, wrap } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Functions
  *
  * */
+/**
+ * @private
+ */
+function compose(PointClass) {
+    if (pushUnique(composed, 'A11y.SD')) {
+        wrap(PointClass.prototype, 'applyOptions', pointApplyOptions);
+    }
+}
+/**
+ * Discard the mock graphic once the point is no longer null, so that the
+ * series can draw a real marker for it, #25299.
+ * @private
+ */
+function pointApplyOptions(proceed, ...args) {
+    const point = proceed.apply(this, args);
+    if (point.hasMockGraphic && !point.isNull) {
+        point.graphic = point.graphic?.destroy();
+        delete point.hasMockGraphic;
+    }
+    return point;
+}
 /**
  * @private
  */
@@ -411,6 +434,7 @@ function describeSeries(series) {
  *
  * */
 const SeriesDescriber = {
+    compose,
     defaultPointDescriptionFormatter,
     defaultSeriesDescriptionFormatter,
     describeSeries

package/es-modules/Accessibility/KeyboardNavigation.js

@@ -110,7 +110,7 @@ class KeyboardNavigation {
      * @private
      */
     updateExitAnchor() {
-        const endMarkerId = `highcharts-end-of-chart-marker-${this.chart.index}`, endMarker = getElement(endMarkerId);
+        const endMarkerId = `highcharts-end-of-chart-marker-${this.chart.index}`, endMarker = getElement(endMarkerId, this.chart.renderTo);
         this.removeExitAnchor();
         if (endMarker) {
             this.makeElementAnExitAnchor(endMarker);

package/es-modules/Accessibility/Utils/HTMLUtilities.js

@@ -132,11 +132,20 @@ function escapeStringForHTML(str) {
         .replace(/\//g, '/');
 }
 /**
- * Get an element by ID
+ * Get the shadow root the element lives in, if any. Lookups in the main
+ * document do not cross a shadow boundary. (#22682)
  * @private
  */
-function getElement(id) {
-    return doc.getElementById(id);
+function getShadowRoot(el) {
+    const root = el?.getRootNode();
+    return root?.host ? root : void 0;
+}
+/**
+ * Get an element by ID, from the reference element's shadow root if it has one.
+ * @private
+ */
+function getElement(id, referenceElement) {
+    return (getShadowRoot(referenceElement) || doc).getElementById(id);
 }
 /**
  * Get a fake mouse event of a given type. If relatedTarget is not given,
@@ -308,6 +317,7 @@ const HTMLUtilities = {
     getElement,
     getFakeMouseEvent,
     getHeadingTagNameForElement,
+    getShadowRoot,
     removeChildNodes,
     removeClass,
     removeElement,

package/es-modules/Core/Animation/AnimationUtilities.js

@@ -136,7 +136,9 @@ export function animate(el, params = { pos: 1 }, opt) {
         if (el) {
             stop(el, prop);
         }
-        const fx = new Fx(el, opt, prop), d = params.d;
+        const fx = new Fx(el, opt, prop), d = params.d, 
+        // Discrete value that doesn't animate, apply at once
+        applyImmediately = prop === 'dashstyle';
         let start = 0, end = void 0, unit = '';
         if (prop === 'd' && isArray(d)) {
             fx.paths = fx.initPath(el, el.pathArray, d);
@@ -145,6 +147,9 @@ export function animate(el, params = { pos: 1 }, opt) {
         }
         else if (el?.attr) {
             start = el.attr(prop);
+            if (applyImmediately) {
+                el.attr(prop, val);
+            }
         }
         else if (el) {
             start = +(getStyle(el, prop) || 0);
@@ -159,7 +164,7 @@ export function animate(el, params = { pos: 1 }, opt) {
             end = end.replace(/px/g, ''); // #4351
         }
         // Empty dashstyle animation crashes treemap on hover
-        if (defined(end)) {
+        if (defined(end) && !applyImmediately) {
             fx.run(start, end, unit);
         }
     });

package/es-modules/Core/Animation/Fx.js

@@ -231,6 +231,7 @@ class Fx {
      * Prepare start and end values so that the path can be animated one to one.
      *
      * @function Highcharts.Fx#initPath
+     * @internal
      *
      * @param {Highcharts.SVGElement} elem
      *        The SVGElement item.