Highcharts accessibility / VUE.js

we have a client wanting full screen read and keybaord navigation for their site (hosted on squarespace and we made a vue plugin for them)

I got all areas of their site to work including leaflet but high charts i am having no luck with keyboard navigation html line in vue

    <highcharts
      :options="overTimeChartOptions"
      id="splineChat"
      style="display: block"
    ></highcharts>

use this in the JS section for options of the chart

  this.overTimeChartOptions = {
    accessibility: {
      keyboardNavigation: {
        enabled: true,
        focusBorder: {
          enabled: true,
          hideBrowserFocusOutline: true,
          margin: 2,
          style: {
            borderRadius: 3,
            color: "#335cad",
            lineWidth: 2,
          },
        },
      },
    },
    chart: {
      type: "areaspline",
      style: {
        fontFamily: "sans-serif",
        color: "#333333",
      },
    },
    title: {
      text: "",
      align: "left",
    },
    subtitle: {
      text: "",
      align: "left",
      style: {
        fontSize: "15px",
      },
    },
    legend: {
      layout: "horizontal",
      align: "center",
      verticalAlign: "bottom",
      fontweight: "bold",
      itemStyle: {
        fontWeight: "500",
        fontfontSize: "14px",
      },
      symbolRadius: 0,
      symbolHeight: 9,
    },
    xAxis: {
      categories: data.xxx.xxx,
    },
    yAxis: {
      title: {
        text: "xxxx",
      },
    },
    credits: {
      enabled: false,
    },
    plotOptions: {
      areaspline: {
        fillOpacity: 0,
        lineWidth: 5,
      },
    },
    series: [
      {
        name: "xxxxxx",
        data: data.xxx.xxx,
        color: "#0070c0",
      },
     ,
    ],
  };

for good measure added the script line for the accessibiliy module with highcharts

 head() {
   return {
    script: {
    src: "https://code.highcharts.com/modules/accessibility.js",
    },
  };
},

once we are one the screen though the tabs and arrows completely bounce over the chart section

added the main js file as below

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import VueHighcharts from "vue-highcharts";
import Highcharts from "highcharts/highmaps";
import HighchartsVue from "highcharts-vue";

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

Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");

Vue.use(VueHighcharts, { Highcharts });

Vue.use(HighchartsVue);

Highcharts.setOptions({
accessibility: {
keyboardNavigation: {
  enabled: true,
},
},
});