ViniciusCestarii opened a new issue, #20034: URL: https://github.com/apache/echarts/issues/20034
### 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%2522clxerl qwp0002356kxg441557%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%2522ac tiveTabId%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: ```ts aria: { show: true, }, ``` ### Current Behavior ```html <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 ```markdown - 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. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
