View issue: Non-modal dialog is not programmatically defined

Issue Summary

The non-modal dialog that becomes available when user activates the "View voters" link.

Steps to Reproduce

1. Navigate to the "Issue" dropdown in the header.
2. Select any issue from the dropdown.
3. For example, select the "JSM-1 What am i looking at?" issue.
4. Observe that "View issue in queue view & comments" page has been appeared on the screen.
5. Navigate to the above mentioned link and activate it.
6. Verify that the appearance of the non-modal dialog is not announcing.

Screen Recording

https://jira.atlassian.com/secure/attachment/444241/Screen%20Recording%202023-09-15%20at%204.32.15%20PM.mov

Actual Results

Following issue are found for the "View voters" non-modal dialog

• "View voters" non-modal dialog is not specified with a programmatic role and accessible name.
• This non-modal dialog content is placed at the end of the page. Which causes user to navigate the additional content unnecessarily.

This resulted in difficulty for screen reader users to understand the presence of a dialog and traverse additional content.

Expected Results

Apply the following changes: * Add role="dialog", aria-modal="false" and "aria-labelledby" attribute to the <div> tag containing the dialog content.

• Specify aria-label attribute containing the short description.
• Change the order of the content in DOM, place the content right after the triggering element i.e. "View voters" link.

 
For information on creating accessible modal dialog refer https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog.html

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 114.0.5735.198 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest