如何在元素上设置默认的focus（）

Question

I'm trying to make an Angular Application (uses D3.js) Web Accessible.

Goal: When a user calls for a particular chart (in this case a sunburst), the chart expands into view. My intention is to create a default focus on a specific element of the chart so once the user calls/selects the chart, the chart will automatically have focus.

Problem: Once I expand the sunburst chart into view, the Tabbing order resets from the start of the page (there is no page load as its a Single Page Application). Then the user would have to TAB through the whole page to navigate to the sunburst chart. I have already set the center node to have an attribute of Tabindex:0 . So now the center node can be accessed via keyboard navigation (tabbing).

var defaultNode = d3.select(sunburstChartdetail").select("path").attr("tabindex", 0);

I have tried:

  defaultNode.focus(); 

but I get a console error suggesting 'focus' is not a function

NOTE: Unfortunately I cannot post the code for NDA reasons.

Answer 1

To focus on an element, you need to get a reference to the underlying DOM element:

d3.select("foobar").node().focus()

Or in your case:

defaultNode.node().focus()

Documentation on selection.node()