Issue Summary

On "Find an issue" page, the "Details" non-modal dialog is inaccessible for screen reader users. 

Steps to Reproduce

1. Open above page.
2. Save any filter. 
3. Activate "Details" link. 
4. Observe that the newly added content has inaccurate reading order. 

Screen recording 

Screen Recording 2024-02-16 at 1.28.48 PM.mov

Actual Results

The "Details" non modal dialog is inaccessible for screen reader users. 

This non-modal dialog has following issues: 

1. The role="dialog" and  aria-modal="false" is not defined for modal.
2. The modal content is defined at the end of the DOM. 
3. Keyboard and screen reader focus is not set at the top of the modal. 

Expected Results

Non-modal dialogs should be accessible for screen reader users.

Apply the following changes:

• When the Non-modal dialog is displayed, set the keyboard focus to the beginning of its content (tabindex="-1" can be used for this purpose).
• Provide role="dialog" and  aria-modal="false" for the <div> element containing the non-modal content.
• In the page source code, move the Non-modal dialog content immediately after the "Details" link that triggers it.

Workaround

Not available

Environment

MacBook Pro (16-inch, 2021)

macOS Sonoma Version 14.1

Chrome - Version 119.0.6045.159 (Official Build) (arm64)

Firefox- Version 93.0 (32-bit) Safari- Version 17.1 (19616.2.9.11.7)

JAWS- Version 2023

NVDA- Version 2020.3

Voiceover - Version Latest