Viewing an Issue: Expandable content associated with the button has inappropriate reading order.

Issue Summary

The non-modal dialog content associated with "Share this issue" has inappropriate reading order.

Steps to Reproduce

1. Navigate to "Issues" dropdown and activate it.
2. Select any issue from "Recent Issues" section.
3. Observe that "Viewing an Issue" page has been appeared on the page.
4. Navigate to the "Share this issue" image button and activate it.
5. Try to access the available content using screen reader.
6. Observe that content available at the end of the page.

Screen Recording

Actual Results

When the “Share this issue” button gets 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 buttons 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 buttons is coded directly after the expandable buttons 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 buttons are expanded.

Workaround

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