ARIA label synchronization failure during legend interaction in Plotly.js

Answer

Plotly.js does not automatically update ARIA labels when a legend toggle hides or shows a trace. The legend interaction triggers a full redraw (via Plotly.restyle) that recreates the SVG nodes, discarding any ARIA attributes you added manually. Consequently the accessibility tree still reflects the initial state unless you re‑apply the labels after each redraw. The same behavior occurs for WebGL‑based traces (scattergl, etc.) because the SVG overlay that contains the legend is rebuilt in the same way.

Likely explanation

• Legend clicks call Plotly.restyle, which regenerates the entire SVG subtree (including the legend group).
• Any ARIA attributes set on those SVG elements after the initial render are lost when the old nodes are replaced.
• Plotly’s built‑in accessibility support does not provide dynamic aria‑label updates for legend items.

Confirmed behavior

1. Inspecting the legend element before and after a click shows a new g element with a different id and no custom attributes.
2. Plotly emits plotly_legendclick and plotly_afterplot events after each interaction.
3. Screen‑reader announcements only reflect the current visibility when ARIA labels are reapplied after the redraw.

Practical steps for this case

1. Listen for the redraw events on the plot container:

const plotDiv = document.getElementById('myPlot');
plotDiv.addEventListener('plotly_afterplot', reapplyLegendAria);
plotDiv.addEventListener('plotly_legendclick', reapplyLegendAria); // optional, ensures immediate update

2. In the handler, re‑apply the desired ARIA labels to the legend items:

function reapplyLegendAria(event) {
  const legendItems = event.plotDiv.querySelectorAll('.legendtext');
  legendItems.forEach((item, idx) => {
    const trace = event.plotDiv.data[idx];
    const name = trace.name || `Trace ${idx+1}`;
    const visible = trace.visible !== 'legendonly';
    item.setAttribute('aria-label', `${name} ${visible ? 'visible' : 'hidden'}`);
  });
}

3. Keep the handler lightweight – only touch the legend nodes and avoid heavy DOM work.
4. If you prefer not to touch Plotly’s internal SVG, add a visually hidden live region elsewhere and update its textContent in the legend‑click handler:

// JavaScript
function onLegendClick(evt) {
  const traceIdx = evt.target.getAttribute('data-trace');
  const trace = Plotly.d3.select('#myPlot').datum().data[traceIdx];
  const msg = `${trace.name} is now ${trace.visible === 'legendonly' ? 'hidden' : 'visible'}`;
  document.getElementById('plotLive').textContent = msg;
}

Diagnostic detail

To confirm that the above approach matches your setup, let me know which version of Plotly.js you are using and whether you are adding custom ARIA attributes after the initial Plotly.newPlot call. This information helps verify that the event names and SVG structure assumed here are correct for your environment.