Add comment to issue : Button is missing both a role and a name.

Issue Summary

The interactive element "WAITING FOR SUPPORT", "-3w 4d", "I", "WAITING FOR APPROVAL" and so on do not have keyboard support. Additionally, accessible name is missing 

Elements name:
1. WAITING FOR SUPPORT
2. -3w 4d
3. "Down arrow" icon
4. WAITING FOR APPROVAL
5. "Question mark icon" i.e. '?' icon

Location of the elements: Tooltip triggering buttons, in the below sections.
1. Details
2. SLAs
3. Past approvals
4. Service project request

Additional details: While hovering on the above-mentioned buttons, display the tooltip contents.

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> element 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, 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 label or accessible name for the mentioned insances.
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: 745896

Bulldog Ref: