click of any key using the keyboard does not work on zoom button in highchart map

[pdaryamane]

Hi team,
I have added a highchart map and with following options:
chartOptions = {
chart: {
map: worldMap,
proj4: proj4,
style: {
fontFamily: 'Open Sans',
},
events: {
drilldown: e => {
},
drillupall: e => {
},
drillup: e => {
},
render: e => {

},
},
},
exporting: {
enabled: false,
},
tooltip: {
enabled: true,
headerFormat: '',
pointFormat:
`<div class='px-2 py-1'><span><strong>{point.name}<strong></span><br/>` +
`<span>Viewers: <strong>{point.value}</strong></span></div>`,
backgroundColor: '#101c28',
borderWidth: 2,
style: {
color: '#ffffff',
},
useHTML: true,
},
credits: {
enabled: false,
},
title: {
text: '',
},
mapNavigation: {
enabled: true,
enableMouseWheelZoom: false,
buttonOptions: {
verticalAlign: 'bottom',
style: {
fill: '#FCFCFC',
color: '#FCFCFC',
cursor: 'pointer',
},
theme: {
fill: '#4A4B54',
r: 1,
stroke: '#1E1F21',
'stroke-width': 1,
states: {
hover: { fill: '#37373E', stroke: '#1E1F21' },
select: { fill: '#37373E', stroke: '#1E1F21' },
},
},
},
},
colorAxis: {
maxColor: 'rgba(35, 183, 229, 1)',
min: 1,
minColor: 'rgba(35, 183, 229, 0.1)',
type: 'logarithmic',
allowNegativeLog: true,
},
plotOptions: {
mapbubble: {
showInLegend: false,
colorAxis: false,
dataLabels: { enabled: true, format: '{point.name}' },
tooltip: {
enabled: true,
headerFormat: '',
pointFormat:
`<div class='px-2 py-1'><span><strong>{point.name}<strong></span><br/>` +
`<span>Viewers: <strong>{point.z}</strong></span></div>`,
},
},
mappoint: {
showInLegend: false,
marker: {
symbol: 'circle',
fillColor: 'white',
lineColor: '#ff6600',
radius: 4,
lineWidth: 2,
},
zIndex: 1000,
},
map: {
nullColor: 'none',
showInLegend: false,
},
series: {
borderColor: '#23b7e5',
cursor: 'pointer',
turboThreshold: 10000,
states: {
hover: {
borderWidth: 3,
color: 'rgba(5, 92, 167, 0.7)',
borderColor: '#055ca7',
},
},
dataLabels: {
color: 'white',
enabled: true,
formatter: function () {
if (this.point.value) {
return this.point.name;
}
},
style: { textShadow: 'none' },
},
},
},
legend: {
enabled: false,
useHTML: false,
},
drilldown: {
animation: {
duration: 0,
},
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000',
},
drillUpButton: {
position: {
x: -18,
y: -18,
align: 'left',
verticalAlign: 'top',
},
},
},
series: this.mapData,
};
The variable this.mapData has the required data, the map shows up correctly with zoom button. And the zoom button is clickable through the mouse click. But if keyboard is used to go through the map, once the focus come to zoom + or - , pressing enter key/space key does not trigger the click on zoom button, hence not zooming in or out the graph does not work only with keyboard . can you please suggest what needs to be added?

[kamil.k]

Hello pdaryamane!

Welcome to our forum and thanks for contacting us with your question.

The keyboard navigation through the zooming buttons is a built-in feature in the accessibility module for maps. Please, take a look at this example: https://jsfiddle.net/BlackLabel/nd687eqL/. Let's start the focus on input and stop it on the zooming buttons. I see no issues there, the functionality works fine for both enter and space keys. I also tried it with your shared config.

May I ask what HC Maps version you use?

Looking forward to your response,
Kind Regards!

[pdaryamane]

I am using the version
"highcharts": "^10.2.1",
"highcharts-angular": "^3.0.0",
"highcharts-multicolor-series": "^2.4.0",
"@highcharts/map-collection": "^2.0.1",

Can you let me know if these are the correct versions to be used? I tried various ways but keyboard navigation to the zoom button and then click on the zoom + or - button with enter or space key does not show any response.

[pdaryamane]

I checked the jsfiddle link you shared , I can see keyboard navigation and clicks of keys work. Did it work for you with the configuration I shared?

[kamil.k]

Yes, it also works for me with your config.

Thanks for sharing your versions, it may be helpful. I see there's a bug with v10.2.1 of Highcharts, can you try updating it to the newest one and see if it works (v11.1.0)?

Also, remember to apply the accessibility module to your code (assuming you use Angular):

Code: Select all

import Accessibility from 'highcharts/modules/accessibility';
Accessibility(Highcharts);

What's more, remember to use the highmaps instead of regular highcharts:

Code: Select all

import Highcharts from "highcharts/highmaps";

Let me know if you see any changes,
Regards!

[pdaryamane]

Hey , thank you for the quick reply. Upgrading the version did resolve the issue . Thanks a lot , was debugging the issue for 2 days.

[pdaryamane]

Hey can you please list down the changes as part of the major version change from 10 to 11 in highcharts module?

[kamil.k]

I'm glad to hear it works for you!

Here is a list of all changes for every released version (I marked you the v11.1.0): https://www.highcharts.com/changelog/#h ... ts-v11.1.0.

If any questions arise in the future, feel free to reach out to me!