What is the current behavior?

When a <Legend> uses a formatter that returns a React element (JSX), and content renders a <DefaultLegendContent> with {...props} spread, the aria-label on each legend icon is "[object Object] legend icon" instead of the series name string.

This happens because DefaultLegendContent calls formatter(entry.value) and passes the return value directly into the aria-label string:

var finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
"aria-label": `${finalValue} legend icon`

When finalValue is a React element, the template literal stringifies it to [object Object].

What is the expected behavior?

aria-label should use the raw entry.value string — the same string passed into formatter — regardless of what formatter returns. The formatter controls visual rendering; it should not affect the accessible label. Expected output: aria-label="UV legend icon".

Please provide a demo of the problem in a sandbox

import { ComposedChart, Line, Legend, DefaultLegendContent } from 'recharts';

const data = [{ name: 'Page A', uv: 400 }, { name: 'Page B', uv: 300 }];

const App = () => {
  return (
    <ComposedChart width={500} height={300} data={data}>
      <Line dataKey="uv" name="UV" />
      <Legend
        formatter={value => <strong>{value}</strong>}
        content={props => (
          <DefaultLegendContent {...props} />
        )}
      />
    </ComposedChart>
  );
};

export default App;

Inspect the rendered legend icon <svg> — it will have aria-label="[object Object] legend icon".

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

• Affected: [email protected]
• Not affected: [email protected] — in v2, aria-label used entry.value directly and the formatter output did not affect it. This is a breaking behavioral change introduced in v3.
• Browser/OS: All (this is a rendering logic issue, not browser-specific)