-
Type:
Bug
-
Resolution: Unresolved
-
Priority:
Low
-
None
-
Affects Version/s: 7.2.0, 9.0.1
-
Component/s: Accessibility
-
Severity 3 - Minor
Issue Summary
The element appears and functions like a tooltip but is missing the required ARIA role(s) and/or attribute(s).
Name of the element: Comments tooltip
Location of the element: In the summary table, relevant to the "#1"
Additional details: Currently, the tooltip content is not exposed to screen reader users. It needs appropriate roles and/or attributes.
Steps to Reproduce
- Open the home page.
- Navigate to the "Build" link in the header and activate it.
- Navigate to the "All build plans" link and activate it.
- Navigate to any plan link present in the "Plan" column and activate it.
- Navigate to the "Commented" link and activate it.
- Try to access the tooltip content and observe that the content is inaccessible.
Actual Results
On the “Commented" links, the interactive element (tooltip) is used to convey crucial information. This interactive element is coded inappropriately which makes tooltip functionality inaccessible for keyboard-only and screen reader users as the elements do not receive keyboard focus on traversal thereby missing the crucial information.
Moreover, the information is only present on mouse hover.
Expected Results
Apply the following changes:
- Place the tooltip content in an <div> element and provide a unique "ID" attribute to it and associate using aria-described by attribute. Additionally add role="tooltip" to the <div> element.
- 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 the mouse. However, the tooltip content can be dismissed on activating the "Esc" key or when it loses focus.
- Modify the script 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", etc. to make the functionality accessible for keyboard-only users.
Follow this link for a working example of accessible tooltips → ARIA Tooltip
Screenshot
Workaround
Not Available
Bug Ref: 463278