Scrum Board | Development: Link not operable with a keyboard

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The "Work items" card component is not operable with a keyboard.

      Steps to Reproduce

      1. Open the Jira Cloud home page.
      2. Select any Scrum project and navigate to Space navigation.
      3. Navigate to the "Development" tab and activate it.
      4. Use Tab key to focus the "Work items" card in the "Key metrics" section.
      5. Observe that the entire card displays a focus outline and the "More Information" button shows a focus indicator simultaneously.
      6. Activate the link using the Enter key.
      7. Observe that the "More Information" help section is activated.
      8. The card's primary link (opens in a new tab) is not operable via keyboard.

      Screenshot

      Screen Recording

      Screen Recording 2026-06-03 at 3.33.26 PM.mov

      Actual Results

      The "Work items" card element, which opens in a new tab, is not accessible via keyboard navigation. The card's primary link action lacks keyboard operability, and there is a misleading visual focus indicator applied to the entire card when the "More Information" button receives focus. This issue occurs because the anchor tag has tabindex="-1", removing it from the keyboard tab order, and aria-hidden="true", which hides it from screen readers.

      This makes it difficult for keyboard-only and screen reader users to access the functionality associated with this card component.

      Expected Results

      The link must be accessible using keyboard-only navigation and screen readers, ensuring it is operable via keyboard controls for all users.

      Apply the following changes ->

      • Remove the attribute tabindex="-1" from the <a> tag to ensure it is focusable and operable via keyboard navigation.
      • Remove the aria-hidden="true" attribute from the anchor tag to ensure it is accessible to screen readers.
      • Provide an appropriate accessible name using the aria-label attribute.
      • Ensure the card link and "More Information" button receive focus independently, with only one focus indicator visible at a time.

      For more information, refer to the following link: Link Pattern 

      Code Snippet:

      <a href="/page" target="_blank" aria-label="View work items completed this week, opens in new tab" ...>
      (...)
      </a>
      <button aria-label="More information" tabindex="0" type="button" ...>
      (...)
      </button>

      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.5
      Windows - 11 pro
      Chrome - Version 148.0.7778.97 (Official Build) (arm64)
      Safari - Version 26.5 (21624.2.5.11.4)
      JAWS - Version 2026
      NVDA - Version 2024.4.2.35031
      Voiceover - Version Latest

              Assignee:
              Unassigned
              Reporter:
              Anusooya .
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated: