Backlog Page : Story Points(tooltips) are not accessible for screen reader and keyboard only users

Issue Description

On "Backlog" page interactive elements i.e Story points (tooltips) are inaccessible for keyboard only and screen reader users.

Steps to Reproduce

1. Launch URL 
2. Navigate to "Backlog" link present in main content area and activate it.
3. Navigate to Story points present in "Sprint" section and activate it.

Screenshot

Actual Behaviour

On "Backlog" page interactive elements (tooltips) are used to convey crucial information of story points. 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 Behaviour

Story points(tooltips) should be accessible for keyboard only and screen reader users.

Make the tooltips accessible by performing following steps:

1. Replace the <span> element with native <button> element in the source code so that it receives keyboard focus on traversal.

2. Provide "aria-expanded" attribute to the button and toggle its state programmatically to "true" when it receives focus and toggle it back to "false" once the button looses focus.

3. Place the tooltip content in a <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 whether the button is in focussed state or not. Ensure that this <div> element does not get dismissed when hovered with mouse. However, the tooltip content can be dismissed on activating "Esc" key or when it looses 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 tooltip to the screen readers when the button is focussed.

AXQA Ref:AXQA-284