Merge pull request highcharts#22217 from highcharts/bugfix/21994-ally…

…-legend-button-offset

bugfix/21994-ally-legend-button-offset

samples/highcharts/accessibility/legend-proxy/demo.css

@@ -0,0 +1,23 @@
+.container {
+    margin: 3em auto;
+}
+
+#instructions {
+    margin: 2em;
+}
+
+#area {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    width: 800px;
+    height: 70vh;
+    background-color: #00f3;
+    padding-bottom: 1em;
+}
+
+.highcharts-a11y-proxy-element {
+    opacity: 1 !important;
+    border: 1px solid red !important;
+    z-index: 9999 !important;
+}

samples/highcharts/accessibility/legend-proxy/demo.details

@@ -0,0 +1,7 @@
+---
+ name: Highcharts Demo
+ authors:
+   - Kent Wincent Holt
+ js_wrap: b
+ requiresManualTesting: true
+...

samples/highcharts/accessibility/legend-proxy/demo.html

@@ -0,0 +1,15 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
+
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+
+<div id="area">
+    Area to push the chart lower down outside the screen causing scrolling.
+</div>
+<div id="instructions">
+    Verify that the legend items always have a red border (proxy element) over
+    them when resizing the window especially when making it smaller. Clicking
+    over the legend items should not toggle other series.
+</div>
+<div id="container"></div>

samples/highcharts/accessibility/legend-proxy/demo.js

@@ -0,0 +1,58 @@
+Highcharts.chart('container', {
+    chart: {
+        type: 'line',
+        aninmation: false
+    },
+    title: {
+        text: 'Sample Line Chart'
+    },
+    xAxis: {
+        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
+    },
+    yAxis: {
+        title: {
+            text: 'Values'
+        }
+    },
+    plotOptions: {
+        series: {
+            animation: false
+        }
+    },
+    series: [{
+        name: 'Series 1 - Test version',
+        data: [1, 3, 2, 4, 5]
+    }, {
+        name: 'Series 2 - Test version',
+        data: [2, 2, 3, 5, 4]
+    }, {
+        name: 'Series 3 - Test version',
+        data: [2, 12, 3, 15, 24]
+    }, {
+        name: 'Series 4 - Test version',
+        data: [2, 2, 13, 5, 14]
+    }, {
+        name: 'Series 5 - Test version',
+        data: [2, 2, 3, 25, 4]
+    }, {
+        name: 'Series 6 - Test version',
+        data: [2, 2, 3, 5, 14]
+    }, {
+        name: 'Series 7 - Test version',
+        data: [2, 22, 3, 5, 4]
+    }, {
+        name: 'Series 8 - Test version',
+        data: [12, 2, 13, 5, 4]
+    }, {
+        name: 'Series 9 - Test version',
+        data: [22, 2, 3, 5, 4]
+    }, {
+        name: 'Series 10 - Test version',
+        data: [12, 2, 3, 5, 4]
+    }]
+}, () => {
+    setTimeout(
+        () => window.scrollTo(0, document.body.scrollHeight),
+        50
+    );
+});

ts/Accessibility/ProxyElement.ts

@@ -39,7 +39,7 @@ type Nullable<T> = {
 export type NullableHTMLAttributes = Nullable<HTMLAttributes>;
 
 import H from '../Core/Globals.js';
-const { doc } = H;
+const { doc, win } = H;
 import U from '../Core/Utilities.js';
 const {
     attr,
@@ -309,12 +309,16 @@ class ProxyElement {
             pointer = this.chart.pointer;
 
         if (chartDiv && posElement?.getBoundingClientRect && pointer) {
-            const rectEl = posElement.getBoundingClientRect(),
+            const scrollTop = win.scrollY ||
+                doc.documentElement.scrollTop,
+                rectEl = posElement.getBoundingClientRect(),
                 chartPos = pointer.getChartPosition();
 
             return {
                 x: (rectEl.left - chartPos.left) / chartPos.scaleX,
-                y: (rectEl.top - chartPos.top) / chartPos.scaleY,
+                // #21994, Add scroll position as "getBoundingClientRect"
+                // returns the position from the viewport, not the document top.
+                y: ((rectEl.top + scrollTop) - chartPos.top) / chartPos.scaleY,
                 width: rectEl.right / chartPos.scaleX -
                     rectEl.left / chartPos.scaleX,
                 height: rectEl.bottom / chartPos.scaleY -