Issue Summary

General - There is no way to perform the function using only the keyboard.

Element Name: Last deployment status icons.
Location of the element: Located inside the "Deployment projects" data table.

Make sure to associate tooltips with these buttons while fixing this issue.

Steps to Reproduce

1. Open the home page.
2. Navigate to the "Deploy" link in the header and activate it.
3. Navigate to "All Deployment projects" and activate it.
4. Navigate to mentioned instances present in the "Result" column.
5. Try to access the tooltip elements with the keyboard. Observe it is missing keyboard support.

Actual Results

The interactive elements (tooltips) are used to convey crucial information such as deployment successful and failed deployment. These interactive elements are 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

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. Place the tooltip content in a <div> element and provide a unique "ID" attribute to it. Additionally, add role="tooltip" to the <div> element.
3. 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 "Esc" key or when it loses focus.
4. 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 → ARIA Tooltip

Screenshot

Workaround

Not Available

Bug Ref: 462590