Highcharts test tool

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

 <b>Steps to reproduce:</b>
  <ul>
    <li>Press the "load" button.</li>
    <li>Press tab twice so that the legend is focused.</li>
    <li style="color:red">You will notice that the entire chart scrolled upwards and there is no way to scroll back to see the title again. From what I can tell, its because there is a "highcharts-a11y-proxy-button" button that is usually positioned exactly over the legend label. However, when a scaling transform is applied, the coordinates for this button is calculated incorrectly.</li>
  </ul>
 
  <button type="button" onclick="load()" tabIndex="-1">load</button>
  <div id="container" style="height: 200px; width: 200px; margin-top:150px; background: red; transform: scale(1.5)"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

function load(){
  Highcharts.chart('container', {
      xAxis: {
        categories: ['Apples', 'Pears', 'Bananas', 'Oranges']
      },
      series: [{
          data: [1, 4, 3, 5],
          type: 'column'
      }]
  });
}