Issue Summary

The accessible names for the “Pie Chart” contain unnecessary information.

Steps to Reproduce

1. Open the test URL- https://a11y.atlassian.net/jira/dashboards/10073.
2. Navigate to the “Pie Chart: Everything: All Products - Aggregate” section.
3. Using a screen reader, navigate to the “Disability Cohort” section and explore the mentioned instances.
4. Observe that the unnecessary information is announced. 

Screenshot

Screen Recording

Screen Recording 2024-10-08 at 10.16.30 AM.mov

Actual Results

When screen reader users navigate to the “Disability Cohort” section and interact with the “Pie Chart”, the accessible names for the links are announced as “Screen Reader User has 12,648 issues, which is 81 percent”, “Low Vision User has 2,620 issues, which is 16 percent”, and so on, unnecessarily. This occurs because the “aria-label” attribute has been specified with extra wording, such as "has", "issues", "which", and "is".

As a result, screen reader users have to listen to extra information unnecessarily.

Expected Results

Ensure that the labels are unique and descriptive.

In this scenario, remove the extra wording, such as "has", "issues", "which", and "is” which are specified unnecessarily within the “aria-label” attribute.

Provide the accessible names as “Screen Reader User: 81%, 12,648”, “Low Vision User: 16%, 2,620”, and so on for the mentioned instances.

Additionally, specify the aria-hidden="true" attribute for the <div> element containing raw numbers, such as "12,648", "2,620", and so on.

Code snippet :

<ul>
<li class="legend-item" data-piechartsector="0">
<div class="legend-content">
<div class="legend-item-wrapper">
<div aria-hidden="true" class="legend-item-value">12,648</div>
<div class="icon piechart-fill legend-icon piechart-bg-color-blue"></div>
<div class="legend-item-label-wrapper">
<a class="legend-item-label" href="/issues/?jql=project+%3D+Accessibility+AND+%22Disability+Cohort%5BCheckboxes%5D%22+%3D+%22Screen+Reader+User%22" aria-label="Screen Reader User: 81%, 12,648">Screen Reader User</a>
</div>
</div>
</div>
  </li>
(....)
</ul>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

 MacBook Pro (16-inch, 2021)
macOS Sonoma 14.7
Operations - Windows11
Chrome - Version 128.0.6613.120 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 125.0.2 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.1
VoiceOver - Version Latest