How to set initial focus () on node in d3.js sun ray diagram?

Question

I'm working on making this sunray chart accessible / compatible with 508. Does anyone have an idea of ​​how I can tell if the center of the circle carries the default focus using the .focus () call? So, whenever a chart interacts with a user limited by keyboard navigation, does the starting point always highlight the center circle?

I am new to Accessibility Standards. But I'm trying to do two-way keyboard navigation. Any suggestions would be greatly appreciated!

Answer 1

In principle, the easiest way to achieve this is to set the identifier in the root element and select it (for example, using document.getElementById()), and then call .focus()on it.

When you use a library such as NVD3, it does not give you such flexibility, but for the root element in particular, it is still easy to make it work. A flash consists of a set of elements path, and the first represents the root. So, all you have to do is select the first child pathin the container, get the DOM node and call .focus():

d3.select(".nv-sunburst").select("path").node().focus();