This isn’t a question about any of the FCC projects. I’m building an interactive SVG map for work. I have to ensure that it’s accessible so I’ve begun implementing keyboard navigation and focus features. I can navigate the map using the tab key and enter key in Chrome, Safari, and Edge, but it does not work at all in Firefox. Below is the relevant code for using the enter key to select a county on the map. I’ve tried googling and looking at docs and everything seems to indicate that onkeydown should work in Firefox. I’m hoping someone here might have some experience with this and can help me. I’ve tried it on two different computers and it won’t work in Firefox on either. This is the full project - it is still a work in progress.
<script>
function enterPress(event, item) {
if (event.key == "Enter") {
loadList(item);
}
}
</script>
<g id="Clarendon" class="county" tabindex="0" onkeydown="enterPress(event, 'Clarendon')" onclick="loadList('Clarendon')">
<title>Clarendon</title>
<path d="M 467.13 316.21 473.2 310.11 474.26 306.22 476.31 302.12 480.36 302.25 481.2 297.45 484.26 297.28 485.11 300.11 483.71 302.55 490.79 301.78 489.92 295.54 489.87 291.35 510.85 287.54 513.47 283.96 523.43 276.91 533.36 270.89 535.67 270.71 546.49 263.17 555.76 257.4 560.02 255.12 563.84 265.52 564.92 267.15 572.16 266.47 576.64 267.18 570.16 280.55 567.21 282.16 565.31 282.28 556.87 290.81 560.5 300.03 557.39 303.48 552.89 315.23 547.41 327.93 539.64 345.09 535.64 344.02 535.36 345.85 531.24 348.82 534.62 351.7 532.59 352.84 531.91 354.54 527.33 354.83 526.43 353.64 524.05 355.65 519.54 355.87 515.08 354.59 511.91 357.09 510.42 355.29 505.95 356.68 502.59 358.49 497.4 358.68 490.8 355.63 490.14 354.68 483.54 349.26 484.03 347.19 482.61 344.3 478.35 341.67 478.42 339.61 480.82 340.24 481.71 336.79 480.97 335.71 478.21 336.69 477.15 334.34 475.41 332.92 473.53 333.24 472.22 330.95 470.34 330.01 472.32 326.63 469.56 325.49 469.24 321.67 466.09 319.39 467.94 318.04 467.13 316.21 Z" id="ClarendonCounty" fill="#b3c4db" />
<text text-anchor="middle" x="100" y="500" font-family="Verdana" font-size="35" fill="blue" text-anchor="middle">Clarendon</text>
</g>