Issue Summary

On the “View pull request” page, the content associated with the “More action” expandable button does not have an appropriate reading order.

Note: Similar issue has been observed on "Reviewer Groups" page.

Steps to Reproduce

1. Navigate to the "View pull request" page.
2. Navigate to the mentioned button with a screen reader and activate it.
3. Arrow down on the expandable content from the button.
4. Note that the content associated with it is available in the main content area.

Screenshot 1

Screenshot 2

Actual Results

When the “Show more pull request actions” button is expanded, the expanded content of this button is available at the end of the page for screen reader users. This is because this content is not coded directly after the button 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 that gets available on expanding the button 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.

Code Snippet

<button aria-expanded="false" aria-haspopup="true" class="css-11xu0u3" data-testid="more-actions--trigger" type="button" tabindex="0">
<button role="menuitem" class="css-f6nuwn" type="button"><span class="css-1gly9cj"><span class="css-542wex" data-item-title="true">Edit</span></span></button>
(...)
<button role="menuitem" class="css-f6nuwn" type="button"><span class="css-1gly9cj"><span class="css-542wex" data-item-title="true"><span role="presentation"><span>Rebase</span></span></span></span></button>

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.5.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest