A focus event fires when an element receives keyboard or other input focus. In an accessible SVG scatterplot, pair it with blur: focus reveals a tooltip, while blur hides it. section 10.2.4
innerChart
.selectAll(".cetacean")
.data(data.sort((a, b) => a.global_population_estimate -
b.global_population_estimate))
.join("circle")
.attr("class", d => `cetacean cetacean-${d.status}`)
...
.attr("tabindex", 0)
.on("mouseenter focus", showTooltip)
.on("mouseleave blur", hideTooltip);
Attach focus alongside mouseenter and blur alongside mouseleave so the same tooltip works for pointer and keyboard users. section 10.2.4
Make focus events useful in an SVG visualization by:
- Adding tabindex="0" to SVG circles so users can reach them with the Tab key. section 10.2.4
- Sorting bound data when DOM order should determine the keyboard focus order. section 10.2.4
- Repeating tabindex and focus/blur handlers when filtered data creates new circles. section 10.2.4
