Details
-
Bug
-
Resolution: Unresolved
-
High
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Description
Issue Summary
On the "Refine issues displayed" page, the "Back to create plan" button has a verbose accessible name.
Steps to Reproduce
- Navigate onto the above mentioned page.
- Navigate onto the mentioned button and inspect the code.
- Observe that the accessible name is programmatically defined.
- Observe that the name is verbose.
Screenshot
Actual Results
There is a "Back to create plan" button that has a verbose accessible name as "Back to create plan, Back to create plan". The aria-label that is defined on the <span> element within the <button> element inappropriately uses the inner text of the button as its value. As a result, it is announced twice. This might disadvantage the users of a screen reader. That the accessible name is verbose may confuse or mislead them.
Expected Results
Make sure that interactive elements have an appropriate name. In this scenario, remove the aria-label attribute from the <span> element to provide an appropriate accessible name for the button.
Code Snippet
<button class="css-1cxo99q" type="submit" tabindex="0" style="padding: 0px; margin-left: -10px; position: absolute; top: 0px;"><span class="css-1ujqpe8"> <span role="img"class="css-pxzk9z" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--background-default, #FFFFFF);"></span> (...) <span class="css-19r5em7">Back to create plan</span> </button>
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 Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2023
NVDA- Version 2023.3
Voiceover - Version Latest