Create issue: Custom checkbox not accessible for keyboard-only and screen reader users

XMLWordPrintable

    • 10.03
    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      Custom “Show all” checkbox not accessible for keyboard-only and screen reader users.

      Test URL

      https://instenv-652124-fvds.instenv.internal.atlassian.com/secure/Dashboard.jspa

      Steps to Reproduce

      1. Open the Jira Data Center home page.
      2. Navigate to the "Create" menu button in the header section & activate it.
      3. In the Create Issue dialog, navigate to the "Sprint" combobox and expand it.
      4. Now, try to toggle the checkbox state using the keyboard only (e.g. Spacebar, Enter).
      5. Observe that "Show all" checkbox is not operable with the keyboard.

      Screen Recording

      Screen Recording 2026-02-04 at 4.16.09 PM.mov

      Actual Results

      The “Show all” custom checkbox in the Sprint combobox within the Create issue modal dialog is not accessible for keyboard-only and screen reader users. The checkbox cannot be toggled using the keyboard (e.g. Tab, Space, Enter). 

      As a result, keyboard-only and screen reader users may be unable to change the checkbox state and therefore cannot accurately set the Sprint value for an issue.

      Expected Results

      The custom checkboxes must be identified with role and state using screen reader for its users. Also, the custom checkboxes must be operable with a keyboard for its users.

      Apply the following changes ->

      • Replace the custom checkbox with the standard checkbox by using the <input type="checkbox"> element.
      • Alternatively, use appropriate ARIA roles and attributes to code the custom checkbox. Additionally, modify the scripts to ensure it's operable with the keyboard.

      Code Snippet:

      <div class="sprint-show-all">
        <input
          type="checkbox"
          id="sprint-show-all"
          class="sprint-show-all__checkbox"
        />
        <label for="sprint-show-all" class="sprint-show-all__label">
          Show all
        </label>
      </div> 

      Note: This code example is intended only as a general illustration of how to address the violation and should not be considered a complete or production-ready solution. If you have any questions, please attach this ticket to a #help-accessibility request.

      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 26.2 (25C56)
      Windows - 11 pro
      Chrome - Version 144.0.7559.97 (Official Build) (arm64)
      Safari - Version 26.2 (21623.1.14.11.9)
      JAWS - Version 2025
      NVDA - Version 2024.4.2.35031
      Voiceover - Version Latest

              Assignee:
              Bilal Cinarli
              Reporter:
              Anusooya .
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated:
                Resolved: