-
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
The decorative images provided for "Dropdown" and "Search" icons with textual descriptions are unnecessary.
Steps to Reproduce
- Open the "Refine Issues Displayed" page.
- Navigate and activate the "View releases" button.
- Observe that a modal dialog appears on the page.
- Navigate to the mentioned instance.
- Inspect the code and observe that textual description is provided by using the aria-label attribute.
Screenshot 1
Screenshot 2
Actual Results
The "dropdown" icons present in the main content and the "Search" icon present within the "Releases" modal dialog are provided with an unnecessary textual description such as “Search for release...”, "exclude issue types", and so on, via the aria-label attribute.
As a result, screen reader users are presented with repeated information which can lead to frustration and poor experience
Expected Results
Remove the aria-label attribute and hide the mentioned image using the aria-hidden="true' attribute so that they can be ignored by assistive technologies, such as screen readers.
Code snippet
<div data-ds--text-field--container="true" class="css-13fq05f"> <input placeholder="Search for release..." data-compact="true" data-ds--text-field--input="true" class="css-16kwnwk"> <span aria-hidden="true" role="img" class="css-pxzk9z" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--background-default, #FFFFFF);"> (...) </span> </div>
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
