[Bug] aria: { show: true} generates invalid ARIA attribute on div

[ViniciusCestarii]

Version

5.5.0

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/gallant-mopsa-s8spth?file=%2Fsrc%2Findex.js%3A14%2C10&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxerlqwp0006356kr4oc9bgh%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxerlqwp0002356kxg441557%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxerlqwp0003356kci9m75ro%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxerlqwp0005356kt30s0ne0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B66.29742806213395%252C33.702571937866054%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxerlqwp0002356kxg441557%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxerlqwo0001356kyap7wzlr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A14%252C%2522startColumn%2522%253A10%252C%2522endLineNumber%2522%253A14%252C%2522endColumn%2522%253A10%257D%255D%257D%255D%252C%2522id%2522%253A%2522clxerlqwp0002356kxg441557%2522%252C%2522activeTabId%2522%253A%2522clxerlqwo0001356kyap7wzlr%2522%257D%252C%2522clxerlqwp0005356kt30s0ne0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxerlqwp0004356kyv818acb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clxerlqwp0005356kt30s0ne0%2522%252C%2522activeTabId%2522%253A%2522clxerlqwp0004356kyv818acb%2522%257D%252C%2522clxerlqwp0003356kci9m75ro%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clxerlqwp0003356kci9m75ro%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to Reproduce

To reproduce create a echart element and add the option:

aria: {
  show: true,
},

Current Behavior

<div id="app" _echarts_instance_="ec_1718374282536" aria-label="This is a chart with type Bar chart.The data is as follows: the data for Mon is 0, 120, the data for Tue is 1, 200, the data for Wed is 2, 150, the data for Thu is 3, 80, the data for Fri is 4, 70, the data for Sat is 5, 110, the data for Sun is 6, 130. " style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div style="position: relative; width: 400px; height: 300px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
<canvas data-zr-dom-id="zr_0" width="400" height="300" style="position: absolute; left: 0px; top: 0px; width: 400px; height: 300px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div>
</div>

It's said that it's not good practice to add aria-label attribute to a non-interative element (like tag div without a role).

To be honest I don't know if this a real issue for accesbility.

I used lighthouse to check. The div with the aria-label shows this warning:

Expected Behavior

To not fail ARIA test like lighthouse's

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

Solution could be:

Add a role to the div that receives the attribute aria-label.

Or maybe add the aria-label on the canvas or the svg?

To be honest I don't know if this a real issue for accesbility.

[Ovilia]

It seems that this can be easily fixed by adding role="img" to it. Are you interested in making a pull request?

Can you provide the link of the tool you use?

[echarts-bot]

This issue is labeled with difficulty: easy.
@ViniciusCestarii Would you like to debug it by yourself? This is a quicker way to get your problem fixed. Or you may wait for the community to fix.

Please have a look at How to debug ECharts if you'd like to give a try. 🤓