Watchers: Missing label for checkboxes

XMLWordPrintable

    • 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

      1. Open the Jira DC instance.
      2. Navigate to the header section, expand the "Projects" control, and open any project.
      3. Navigate to the header section, expand the "Issues" control, and open the issue that has watchers.
      4. Navigate to the main content area, activate the "More options" control, and select the "Watchers" option.
      5. Using a screen reader, navigate through the checkboxes in the "Watchers" table.
      6. Observe that the checkboxes are missing associated labels.

      Screen Recording

      Checkbox Issue.mp4

      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

        1. Checkbox bug fixed.mp4
          11.77 MB
        2. Checkbox Issue.mp4
          20.47 MB

            Assignee:
            Pavlo Samchuk
            Reporter:
            Chirag Goyal
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: