1

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,
},
},
});

1 Answer 1

3

Try to load accessibility module like import inside Chart.vue component.

More information on how to set up Vue and Highcharts you will find at our wrapper https://github.com/highcharts/highcharts-vue#using

import accessibility from "highcharts/modules/accessibility";

Live demo: https://codesandbox.io/s/highcharts-vue-demo-forked-hmv3h

2
  • thanks this hasnt made a difference for me. waiting for a reply on the packages forum as well. :/ Commented Jan 24, 2022 at 14:45
  • Ok I re looked at this example you provided and missed one line! it works!! THANK YOU! Commented Jan 24, 2022 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.