Issue Summary

The screen reader reads the incorrect link texts.

Steps to Reproduce

1. Open the Homepage of the Jira.
2. Navigate to the header section > activate "Dashboards" > open any dashboard.
3. Using a screen reader, navigate to the "Filter results" section and interact with the links.
4. Observe that screen reader reads the incorrect link texts.

Screenshot

Screen Recording

Actual Results

When screen reader users navigate to the "Filter Results: DC A11y Bitbucket under SLO", "Filter Results: DC A11y Crowd under SLO", and similar sections, and interact with the filter results link, the links are announced as "5 tickets tickets tickets Filter Results: DC A11y Bitbucket under SLO" instead of "5 Tickets Filter Results: DC A11y Bitbucket under SLO", "12 tickets Filter Results: DC A11y Crowd under SLO", and so on for these links. This issue occurs because the "id" values for all the <a> elements are identical, and the "id" value for the <h2> element containing the "Filter Results: DC A11y Bitbucket under SLO" heading text is also specified in the "aria-labelledby" attribute inappropriately.
As a result, screen reader users are unable to access the links effectively.

Expected Results

Ensure that the screen reader reads the correct link texts for users.

In this scenario, make sure the screen reader reads the link texts as "5 Tickets Filter Results: DC A11y Bitbucket under SLO", "12 tickets Filter Results: DC A11y Crowd under SLO", and so on for the mentioned links.

Apply the following changes:

1. Specify the "id" attribute with a unique value to the <h2> elements.
2. Specify "aria-labelledby" attribute to <a> elements.
3. Reference both the "id" attribute values (of <a> and <h2> elements) via "aria-labelledby" attribute.

Code Snippet:

<h2 id="gadget-180009-title" class="dashboard-item-title">Filter Results: DC A11y Bitbucket under SLO</h2>
  <a href="/issues/?filter=119498" title="DC A11y Bitbucket under SLO" id="total-tickets" aria-labelledby="total-tickets gadget-180009-title">5<span class="assistive"> tickets</span></a>
  <h2 id="gadget-180008-title" class="dashboard-item-title">Filter Results: DC A11y Crowd under SLO</h2>
  <a href="/issues/?filter=119500" title="DC A11y Crowd under SLO" id="total-tickets-crowd" aria-labelledby="total-tickets-crowd gadget-180008-title">12<span class="assistive"> tickets</span></a>

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 130.0.6723.59 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 131.0.3 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.3.1
VoiceOver - Version Latest