How to make an SVG element focusable? Works in Chrome but not IE/Firefox?

时间:2016-07-11 19:11:55

标签: javascript angularjs svg charts nvd3.js

I have a simple pie chart that is rendered using the svg and its sub elements. My intent is to make each wedge of the pie chart to have keyboard focus. This is commonly done by simply adding a tabindex="0" attribute to the targeted element.

set pie slices to be focusable:

d3.selectAll('.nv-slice > path').attr("tabindex", "0");

If you try "tabbing" to the pie chart using Chrome, it works how I expect it.

The problem is that the pie chart will not get focus in IE or Firefox. Any idea why that is? How can I make these pie chart wedges have focus? If there is no way to author this, perhaps there is a workaround? The endgoal here is to find a solution where I can use a key event to trigger a tooltip.

  1. Get focus on a pie wedge
  2. Display the tooltip after a keyevent is triggered

0 个答案:

没有答案