Chart legend labels are unstructured divs, so they arrive as loose text
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- typescript
- Domain
- accessibility, frontend
Research direction
Start by locating the chart legend renderer that produces the cxb-legend, cxe-legend-entry, and cxe-legend-entry-text elements, then inspect its HTML output. Update the legend labels or entries to use semantic structure while keeping the aria-hidden SVG swatches unchanged; done means screen readers and tagged PDFs receive each label as structured content belonging to the chart.
Written by the indexing model from the issue text.
Description
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.
- Dominant language
- TypeScript
- Stars
- 492
- Forks
- 71
- Avg merge
- 23h
- Merged PRs (30d)
- 5
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from codaxy/cxjs
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
-
feature request
Difficulty 3/5 1-2 days Newbie friendliness 35/100
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 25/100
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100