Kanban Board Issues : Tooltip: Tooltip is missing appropriate role and/or attributes

Issue Summary

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

Element: Quick filter tooltip

Location: Below Kanban board

Note: Tooltip content should be exposed to the screen reader users once the element gets focused.

Steps to Reproduce

1. Step 1

Actual Results

Actual results

Expected Results

Expected Results

Fix Information
RULE :
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

HOW TO FIX:
A tooltip is a popup that displays information related to an element. There are several common patterns for tooltips including tooltips that appear on mouse or keyboard focus of the tooltip trigger and tooltips that appear on activation of the tooltip trigger. Tooltips may contain only static text or they may contain functional elements.

Fix this issue by ensuring all of the following are true:
1. The tooltip trigger must be focusable and operable with a keyboard.
2. If the tooltip content contains functional elements - such as links, buttons or form fields - they must be focusable and operable with a keyboard.
3. The content of the tooltip must be readable with a screen reader.
4. The keyboard focus (Tab key) order and screen reader reading order must be logical. The simplest way to ensure this is to insert the tooltip content immediately after the tooltip trigger in the DOM.

REFERENCE:
Deque University: https://dequeuniversity.com/class/custom-widgets2/examples/tooltip
Deque University: https://dequeuniversity.com/class/custom-widgets2/examples/tooltip-dialog
WAI-ARIA Authoring Practices: https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip

BACKGROUND:
Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.

Screenshot

Screen Recording

screen recording

Workaround

workaround

Bug Ref: 731852