Issue View: Inappropriate label for button

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The “4 minutes ago” button lacks a descriptive accessible name that indicates its action.

      Steps to Reproduce

      1. Open the Jira Cloud home page.
      2. Navigate to the Sidebar, expand "Spaces", and open any space.
      3. Navigate to the "List" link, activate it, and open any work item from the data table.
      4. Navigate to the "Add a comment" button and activate it.
      5. Navigate and activate the "Save" button.
      6. Using a screen reader, navigate to the "4 minutes ago" button.
      7. Press "Enter" or "Space "to activate the button.
      8. Observe that the newly displayed date and time is not communicated to the screen reader.

      Screen Recording

      https://www.loom.com/share/7db288a413594904806720f13e32eabd

      Actual Results

      The “4 minutes ago” button, which currently displays a relative time such as “4 minutes ago,” does not convey its purpose to screen reader users when it receives focus or is activated. When activated, the button changes the displayed value to the absolute date and time (“September 28, 2026 at 3:42 PM”). However, assistive technology users are not informed about what activating the control will do or that the time representation has changed.

      Screen reader users hear only the time string without context indicating that it is an interactive control that toggles between relative and absolute time representations. Without a descriptive accessible name or an appropriate announcement, users cannot understand what the control does or anticipate the result of activating it.

      Expected Results

      The control should have a descriptive, accessible name that clearly communicates its purpose and behavior to screen reader users.

      Apply the following changes:

      • Default state: The button should have an accessible name that clearly communicates the action to display the date and time, for example: 4 minutes ago - Show date and time.
      • Activated state: The button should have an accessible name that clearly communicates the action to collapse the date and time and return to the relative-time format, for example: September 28, 2026 at 3:42 PM - Hide date and time.
      • Visually hidden instructions: The phrases “Show date and time” and “Hide date and time” should be visually hidden using the dedicated screen-reader utility class sr-only, so the existing visual presentation remains unchanged.

      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.

      Note: Please consult the Content Design team and incorporate their guidance on the exact accessible labels before implementing the change.

      Code Snippet:

      <span aria-hidden="false" tabindex="0" role="button" class="_80omtlke">
       <span role="presentation">
       <span>4 minutes ago</span>
       <span class="sr-only"> - Show date and time</span>
      </span>
      </span>
      (...)
      <span aria-hidden="false" tabindex="0" role="button" class="_80omtlke">
       <span role="presentation">
       <span>September 28, 2026 at 3:42 PM</span>
       <span class="sr-only"> - Hide date and time</span>
      </span>
      </span>
      .sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border: 0;  clip-path: inset(50%);}

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when availableEnvironment

      Environment

      MacBook Pro (16-inch, 2023)
      macOs - Sequoia 15.7.9
      Chrome - Version 154.0.8037.58 (Official Build) (arm64)
      Safari- Version 27.0 (20625.1.29.18.28)
      JAWS- Version 2026
      NVDA- Version 2026.1
      Voiceover - Version Latest

              Assignee:
              Rituraj Seal
              Reporter:
              Gourishankar Bhadade
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated: