-
Type:
Bug
-
Resolution: Fixed
-
Priority:
High
-
Affects Version/s: 9.12.22, 10.6.1
-
Component/s: Accessibility
-
9.12
-
Severity 3 - Minor
-
Accessibility
Issue Summary
The labels are missing for the "Select All Current Watchers", "Select Admin", "Select Chirag Goyal", etc., checkboxes.
Steps to Reproduce
- Open the Jira DC instance.
- Navigate to the header section, expand the "Projects" control, and open any project.
- Navigate to the header section, expand the "Issues" control, and open the issue that has watchers.
- Navigate to the main content area, activate the "More options" control, and select the "Watchers" option.
- Using a screen reader, navigate through the checkboxes in the "Watchers" table.
- Observe that the checkboxes are missing associated labels.
Screen Recording
Actual Results
When screen reader users navigate through the "Select All Current Watchers", "Select Admin", "Select Chirag Goyal", etc., checkboxes in the "Watchers" table, they observe that these checkboxes are missing associated labels.
These checkboxes are announced by the screen reader as unlabeled, for example, simply as "checkbox, not checked".
This issue occurs because labels are not defined for these checkboxes using the HTML <label> element or the "aria-label" attribute in the source code.
As a result, screen reader users are unable to understand the purpose of these checkboxes.
Expected Results
The screen reader should announce the label for the checkboxes correctly.
In this case, provide the labels as "Select All Current Watchers", "Select Admin", "Select Chirag Goyal", etc., checkboxes using the "aria-label" attribute.
Note: Before implementing labels for the checkboxes, please consult with the content design team to confirm the appropriate business logic.
Code Snippet:
<table>
<thead>
<tr>
<th><input type="checkbox" aria-label="Select All Current Watchers"></th>
<th>Current Watchers</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" aria-label="Select Admin Admin"></td>
<td><a href="#">Admin Admin</a></td>
</tr>
<tr>
<td><input type="checkbox" aria-label="Select Chirag Goyal"></td>
<td><a href="#">Chirag Goyal</a></td>
</tr>
</tbody>
</table>
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 137.0.7151.41 (Official Build) (64-bit)
Safari- Version 18.4
Firefox- Version 138.0.1 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest