Chart legend labels are unstructured divs, so they arrive as loose text

[mstijak]

A chart legend renders each entry's label in a bare <div>:

<div class="cxb-legend">
  <div class="cxe-legend-entry cxs-color-root">
    <svg class="cxe-legend-svg" aria-hidden="true">…</svg>
    <div class="cxe-legend-entry-text">Serie 1</div>
  </div>
  …
</div>

A <div> carries no semantics, so in a tagged PDF the label becomes content with nothing containing it — Chrome maps a bare div to /NonStruct, which is defined as having no structural significance. Read back through a screen reader the labels arrive as loose text with no block around them and no relationship to the chart they belong to:

/Document > /NonStruct > /NonStruct > … > /NonStruct   "Electronics"
/Document > /NonStruct > /NonStruct > … > /NonStruct   "Clothing"

The same is true in HTML, where the legend is a sequence of unstructured divs rather than anything a reader can navigate as a group.

The swatch beside each label is already handled well — aria-hidden on the <svg> is exactly right, since the shape carries nothing a reader needs.

Expected

A legend entry's label sits in an element that carries meaning — a list of entries, or at minimum a block-level element per label — so that assistive technology receives it as structured content belonging to the chart rather than as loose text.

[mishs]

Hi @mstijak I reviewed #1330 and would like to work on it if external contributions are welcome.

My proposed scope is to give chart legend entries an appropriate semantic group and item relationship while preserving the existing layout, styling and public API.
I would verify keyboard and screen-reader output and add focused accessibility regression coverage around the generated legend markup.

I would keep the change inside the shared legend implementation and avoid chart-specific workarounds.

Is the issue still available, and does this approach align with the structure you want CxJS to generate?