Issue Summary

The expanded content of "More actions for SSP-10" button is coded at the end of the DOM.

Steps to Reproduce

1. Open DC project.
2. Activate the "Backlog" link from side navigation. 
3. Navigate through page using TAB using the keyboard. 
4. Navigate through the modal using the down arrow (JAWS/NVDA) and Control+Option+left/right arrow (VoiceOver).
5. Open the Issue detail view (hint: "T" for displaying Issue details drawer. 
6. Activate the “More actions for SSP-10” button.
7. Observe that options will appear.
8. Navigate to the mentioned button with a screen reader using VO+left/right arrow keys (up/down in Windows).
9. Note that the content associated with it is available at the end of the DOM.

Screenshot

Actual Results

When the “More actions for SSP-10” interactive element is expanded, the expanded content is available at the end of the page for screen reader users. This is because this content is not coded directly after the mentioned interactive element in the DOM.

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 to provide an appropriate reading order to assistive technology users.

Make sure that the content that gets available on expanding the mentioned interactive elements is coded directly after the expandable button in the DOM. This will create an appropriate reading order for the users of assistive technologies. For instance, this will enable them to arrow down onto the expanded content when the button is expanded.

<button aria-label="More actions for SSP-10" ....>
</button>
<ul> 
<li>
<a title="Edit this issue" class="aui-list-item-link js-issueaction issueaction-edit-issue" href="/secure/EditIssue!default.jspa?id=10309&amp;returnUrl=%2Fsecure%2FRapidBoard.jspa%3FrapidView%3D6%26projectKey%3DSSP%26view%3Dplanning%26selectedIssue%3DSSP-10%26epics%3Dvisible%26issueLimit%3D100" tabindex="0" role="menuitem">Edit</a>
</li> 
...
</ul>

Workaround

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

Environment

MacBook Pro (16-inch, 2021)

macOS Sonoma Version 14.1

Chrome - Version 131.0.6778.265 (Official Build) (arm64)

Firefox- 134.0.1 (64-bit)

Safari- Version 18.2 (19620.1.16.111.6, 19620)

JAWS- Version 2023

NVDA- Version 2023.2

Voiceover - Version Latest