[Accessibility]: an auto generated id is included in the aria-label of the chart toolbar

[kadiryazgan]

Name

Kadir Yazgan

Are you an IBM employee?

• Yes

Environment

Browser

What happened? What did you expect to happen instead?

Toolbar of carbon charts displays a hardcoded aria-label which includes a random ID.
This ID makes no sense to screenreader users. Until there is a better way to provide a custom aria-label value, removing the ID from the aria-label could be a solution.

What WCAG 2.1 checkpoint does the issue violate?

1.1.1

Version

@carbon/charts@1.13.23

Data & options used

No response

Relevant log output

<div class="cds--cc--toolbar" width="100%" height="100%" role="toolbar" aria-label="chart-114b94d7d9477 toolbar"><div class="cds--overflow-menu-options cds--overflow-menu--flip cds--overflow-menu-options cds--overflow-menu--flip" tabindex="-1"><ul role="menu"></ul></div><div class="toolbar-control cds--overflow-menu" aria-disabled="false" aria-label="Show as table">
			<button class="cds--overflow-menu__trigger cds--overflow-menu__trigger" aria-haspopup="true" aria-expanded="false" id="chart-114b94d7d9477-control-toolbar-showasdatatable" aria-label="Show as table">
				<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="cds--overflow-menu__icon cds--overflow-menu__icon" viewBox="0 0 32 32" aria-hidden="true" style="will-change: transform; width: 20px; height: 20px;">
					<rect xmlns="http://www.w3.org/2000/svg" height="2" width="18" y="6" x="4"></rect><rect xmlns="http://www.w3.org/2000/svg" height="2" width="18" y="12" x="4"></rect><rect xmlns="http://www.w3.org/2000/svg" height="2" width="18" y="18" x="4"></rect><rect xmlns="http://www.w3.org/2000/svg" height="2" width="18" y="24" x="4"></rect><rect xmlns="http://www.w3.org/2000/svg" height="2" width="2" y="6" x="26"></rect><rect xmlns="http://www.w3.org/2000/svg" height="2" width="2" y="12" x="26"></rect><rect xmlns="http://www.w3.org/2000/svg" height="2" width="2" y="18" x="26"></rect><rect xmlns="http://www.w3.org/2000/svg" height="2" width="2" y="24" x="26"></rect>
				</svg>
			</button></div><div class="toolbar-control cds--overflow-menu" aria-disabled="false" aria-label="Make fullscreen">
			<button class="cds--overflow-menu__trigger cds--overflow-menu__trigger" aria-haspopup="true" aria-expanded="false" id="chart-114b94d7d9477-control-toolbar-makefullscreen" aria-label="Make fullscreen">
				<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="cds--overflow-menu__icon cds--overflow-menu__icon" viewBox="0 0 32 32" aria-hidden="true" style="will-change: transform; width: 15px; height: 15px;">
					<polygon xmlns="http://www.w3.org/2000/svg" points="21 2 21 4 26.59 4 17 13.58 18.41 15 28 5.41 28 11 30 11 30 2 21 2"></polygon><polygon xmlns="http://www.w3.org/2000/svg" points="15 18.42 13.59 17 4 26.59 4 21 2 21 2 30 11 30 11 28 5.41 28 15 18.42"></polygon>
				</svg>
			</button></div><div class="toolbar-control cds--overflow-menu" aria-disabled="false" aria-label="More options">
			<button class="cds--overflow-menu__trigger cds--overflow-menu__trigger" aria-haspopup="true" aria-expanded="false" id="chart-114b94d7d9477-control-toolbar-overflow-menu" aria-label="More options">
				<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="cds--overflow-menu__icon cds--overflow-menu__icon" viewBox="0 0 32 32" aria-hidden="true" style="will-change: transform; width: 20px; height: 20px;">
					<circle xmlns="http://www.w3.org/2000/svg" r="2" cy="8" cx="16"></circle>
				<circle xmlns="http://www.w3.org/2000/svg" r="2" cy="16" cx="16"></circle>
				<circle xmlns="http://www.w3.org/2000/svg" r="2" cy="24" cx="16"></circle>
				</svg>
			</button></div></div>

StackBlitz repro

No response

What priority level would this issue be in your opinion?

P0