Issue Summary

The content associated with the “# days remaining“ does not have an appropriate reading order.

Steps to Reproduce

1. Open the "Scrum board" page.
2. Navigate to the mentioned button with a screen reader and activate it.
3. Arrow down to the content from the button.
4. Note that the content associated with it is available in the main content area.

Screenshot

Actual Results

The content such as "Start date:...“ available on hovering the "# days remaining" text, is available at the end of the page for screen reader users. This is because this content is not coded directly after the interactive element in the DOM. It is instead coded at the end of the page.

This inappropriate reading order might disorient the users of screen readers. That the content is available at the end might confuse or mislead them.

Expected Results

Content must have an appropriate reading order. Assistive technologies navigate content using the order in which elements appear in the DOM. Hence, make sure that the content is programmatically ordered in such a way that it provides an appropriate reading order to the users of assistive technologies.

Make sure that the content is announced when the "# days remaining" receives keyboard focus and is coded directly after it in the DOM. This will create an appropriate reading order for the users of assistive technologies.

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest