-
Bug
-
Resolution: Fixed
-
High
-
9.4.0, 8.5.20
-
Severity 3 - Minor
-
-
CtB - Improve Existing
-
Accessibility
Issue Summary
The "Preview" interactive element is implemented as a link instead of a button and is incorrectly labeled as "Refresh".
Steps to Reproduce
- Open the Confluence DC instance.
- Navigate to the header section, activate the "Spaces" control, and open any space.
- In the main content area, open any existing page and activate the "Edit" control.
- In the Toolbar, select "Insert more content" and then click on "Other macros".
- In the Search form field, type "Redirect", then activate the "Redirect" control to open the modal dialog.
- Navigate to the mentioned interactive element and inspect the code.
- Notice that it is implemented using the <a> instead of a <button> and labeled "Refresh".
Screen Recording
Actual Results
When screen reader users navigate through the "Insert Redirect Macro" dialog, the "Preview" interactive element is detected as a link (<a> element) instead of a button (<button> element), and it is incorrectly labeled as "Refresh".
This issue occurs because the interactive element is implemented using the <a> tag instead of a <button>, and the label is incorrectly set to "Refresh".
As a result, this causes confusion for screen reader users regarding the element's role and label.
Expected Results
Ensure that the appropriate role and label are conveyed to screen reader users.
In this case, the interactive element should be conveyed as a button and labeled as "Preview".
Apply the following changes:
- Replace the <a> element with a <button> element.
- Add the "aria-labelledby" attribute with a unique value to the <button> element.
- Add the "id" attribute to the <span> element containing the "Preview" text.
- Reference the value of the "aria-labelledby" attribute to the "id" attribute.
- Ensure that the values of both the "aria-labelledby" and "id" attributes match.
- Modify the scripts to ensure that the button functions correctly.
Code Snippet:
<button aria-labelledby="testLabel"></button>
(....)
<span id="testLabel">Preview</span>
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 Sequoia 15.4.1
Operations - Windows11
Chrome - Version 135.0.7049.42 (Official Build) (64-bit)
Safari- Version 18.4
Firefox- Version 135.0 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest