Backlog: Tooltip content not accessible using keyboard

XMLWordPrintable

    • 10.03
    • Severity 2 - Major

      Issue Summary

      The tooltip content "Displays issues which are currently assigned to the current user" and "Displays issues which have been updated in the last day" is available on hovering the "Only my issues" and "Recently updated" buttons is not accessible using the keyboard.

      Steps to Reproduce

      1. Open DC project.
      2. Activate the "Backlog" link from side navigation. 
      3. Navigate through mentioned buttons using the keyboard. 
      4. Observe that the tooltip content is not accessible using the keyboard. 

      Screen Recording 

      Screen Recording 2025-01-21 at 5.45.59 PM.mov

      Screenshot

      Actual Results

      Tooltip content that becomes available when users hover with a mouse on the "Only my issues" and "Recently updated" buttons is not accessible with a keyboard.

      The tooltip content is defined using the title="" attribute. 

      As a result, keyboard-only and screen readers will miss out on important information.

      Expected Results

      The mentioned tooltip should be accessible for keyboard-only and screen reader users.

      Make the tooltip accessible by performing the following steps →

      1. Provide the tooltip content in the <div> element with role="tooltip" and id="" attributes.
      2. Control the visibility of this <div> element using CSS depending on whether the button is in the focused state or not. Ensure that this <div> element does not get dismissed when hovered with mouse. However, the tooltip content can be dismissed on activating "Esc" key or when it loses focus.
      3. Modify scripts to make the tooltip information available on hover as well as on focus. In addition along with mouse specific event handlers, use keyboard specific event handlers, such as "onfocus", "onblur" and so on to make the functionality accessible for keyboard-only users.

      Follow this link for working example of accessible tooltips → ARIA Tooltip

      Note: Feel free to discuss the issue with ADS team.

      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 Sonoma Version 14.1

      Chrome - Version 131.0.6778.265 (Official Build) (arm64)

      Firefox- 134.0.1 (64-bit)

      Safari- Version 18.2 (19620.1.16.111.6, 19620)

      JAWS- Version 2023

      NVDA- Version 2023.2

      Voiceover - Version Latest

            Assignee:
            Unassigned
            Reporter:
            Shruti Chabukswar (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated: