-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Issue Summary
On the "Refine Issues Displayed" page, similar labels such as “Close” are provided for the multiple buttons.
Steps to Reproduce
- Open the "Refine Issues Displayed" page.
- Navigate and activate the "Type" button.
- Navigate and select any option from the "Choose issue type" combobox.
- Navigate to the mentioned instance.
- Inspect the code.
- Observe that identical and non-descriptive label is given to the multiple buttons.
Screenshot 1
Screenshot 2
Actual Results
The identical and non-descriptive labels such as "Close” are provided for multiple buttons which are available by selecting any options from the "Choose issue type" and "Choose issue status" comboboxes.
As a result, screen reader users will not understand the purpose of these buttons.
Also, screen reader users tend to pull a list of buttons for faster navigation, thus the buttons with similar labels appearing multiple times in their list will create confusion for them.
Expected Results
Unique and descriptive labels should be provided for the “Close” buttons.
This can be achieved by linking the id of "Story", “Epic”, and so on, texts with respective "Close” buttons by using the aria-labelledby attribute. Reference the id attributes of both via aria-labelledby attribute respectively.
Code snippet
<div id="two" class="sc-cBrjTV gIHTxC"><img src="/images/icons/issuetypes/epic.svg"> Epic</div> <button aria-labelledby="one two" class="css-fbv3aj" data-testid="exclude-issue-type_remove_1" type="button" tabindex="0"> <span id="one" role="img" aria-label="close" class="css-pxzk9z" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--background-default, #FFFFFF);"> (...) </span> </button>
Workaround
Currently, there is no known workaround for this behavior. A workaround will be added here when available.
Environment
MacBook Pro (13-inch, 2018)
macOs Ventura 13.3.1
Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest
- links to
