Add comment to issue : Tooltip is missing appropriate role and attributes.

Issue Summary

The element appears and functions like a tooltip but is missing the required ARIA role(s) and/or attribute(s).

Elements name: Below tooltip contents.
1. Waiting for support This was auto-generated by the Jira service.......
2. Time to resolution within 1d -3w 4d sample 9-5 calendar
3. Waiting for approval
4. Yesterday 11:40 AM
5. The request typeset is not valid for this type of........

Location of the elements:
1. Tooltip content, on the "WAITING FOR SUPPORT" button, in the "Details" dropdown section.
2. Tooltip content, on the "-3w 4d" button, in the "SLAs" dropdown.
3. Tooltip content, on the "Waiting for approval" text, in the "Past approvals" dropdown section.
4. Tooltip content, on the "Down arrow" icon, just beside the "Admin admin" name, in the "Past approvals" dropdown section.
5. Tooltip content, on the "Question mark icon i.e. '?' icon", in the "Service project request" dropdown section.

Steps to Reproduce

1. Open the JSM homepage.
2. Navigate to the "Project" link in the header and activate it.
3. Select any project link and activate it.
4. Navigate to the main content and activate the present issue link
5. Navigate to mentioned instances 
6. Try to access the tooltip elements present on the page with the keyboard. Observe it is missing keyboard support.

Actual Results

The interactive elements (tooltips) present in "Details", "SLAs", "Past approvals" and so on sections are used to convey crucial information. These interactive elements are coded inappropriately in <div> and <svg> elements 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. Additionally, a label or accessible name is missing for the mentioned instances.

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. Replace the tooltip element with the native <button> element in the source code so that it receives keyboard focus on traversal.
2. Provide descriptive and unique labels or accessible names for the mentioned instances.
3. Place the tooltip content in an <div> element and provide a unique "ID" attribute to it. Additionally, add role="tooltip" to the <div> element.
4. Control the visibility of this <div> element using CSS depending on whether the button is in the focussed 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.
5. Lastly, provide "aria-labelledby" attribute to the <button> and pass the ID of the <div> element as its value. This will read out the content of the tooltip to the screen readers when the button is focused.

Follow this link for a working example of accessible tooltips → https://pauljadam.com/demos/tooltip.html

Screenshot

Workaround

Not Available

Bug Ref: 745888

Bulldog Ref: