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