A blur event fires when an element loses input focus. Pair it with focus to make interactive visualization elements respond to keyboard navigation: reveal a tooltip when a circle receives focus, then hide it when focus moves away. 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 and blur alongside mouse events so the same tooltip works for keyboard and pointer users. section 10.2.4
Use the event as part of an accessible interaction pattern:
- Give SVG shapes a tabindex value so keyboard users can focus them. section 10.2.4
- Combine mouseenter with focus to show the tooltip, and mouseleave with blur to hide it. section 10.2.4
- Reapply the tabindex and listeners when filtering creates new DOM elements. section 10.2.4
