Issue Summary

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

Element name:
1. It is the base branch in your repository, against which all pull requests and commits are made, and the plan, which contains the base build configuration.
2. Plan cannot currently run because it is disabled.

Location of the elements:
1. Tooltip content, on the "DEFAULT BRANCH" button, just beside the "Plan configuration" heading link, in the main content.
2. Tooltip content, on the " Run" menu button, just beside the " Actions" menu button, in the main content.

Steps to reproduce:
1. Hover on the "DEFAULT BRANCH" button, then the above-mentioned tooltip content will display.
2. Hover on the " Run" menu button, then the above-mentioned tooltip content will display.

Note: This issue applicable in the "Plan configuration" section, in the below pages.
1. Plan configuration - Stages - Plan contents
2. Plan configuration - Stage details - Tasks

Steps to Reproduce

1. Open the home page.
2. Navigate to the "Deployment" link in the header and activate it.
3. Navigate to the main content and activate the project link present in the "Deployment project" column.
4. Navigate to the "Edit environment" link and activate it.
5. Navigate to the "Configure the build plan" link and activate it.
6. Try to access the tooltip elements present on the page with the keyboard and observe it is missing keyboard support.

Actual Results

The interactive elements (tooltips) are present on the "Default Branch"  and "Run" are used to convey crucial information. These interactive elements are coded inappropriately in <div>  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.

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 <span> 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 the "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: 460104