Issue Summary

The role and state are not defined for the “Edit layout" modal dialog.

Steps to Reproduce

1. Navigate to the “Dasboards” menu pop-up link and activate it.
2. Navigate to the “Manage Dashboards" link and activate it.
3. Navigate to “Create new dasboards” link and activate it. and Create a new dasboard
4. Open "Edit dashboard" page.
5. Using a screen reader, activate the "Edit layout" link.
6. Observe a dialog appears.
7. Listen that there is no indication regarding the presence of a dialog.

Actual Result

• The "Edit layout" modal dialog is not specified with a programmatic role and accessible name.
• The focus is set to "cancel" button first inappropriately.
• The focus goes to the background content while navigating with keyboard.

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

Expected Result

Apply the following changes:

• Provide role="dialog", aria-modal="true" and 'aria-labelledby' attribute to the <div> tag containing the modal dialog content.
• Specify 'id' attribute with unique value to the <div> tag containing the "Edit layout" heading and reference it via 'aria-labelledby' attribute.
• Set the focus to "Edit layout" heading element.
• Ensure focus doesn’t go to background content with keyboard until the modal is closed.

For information on creating accessible modal dialog refer !https://www.w3.org/favicon.ico!Modal Dialog Example 

Screenshot 1

Workaround

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

Environment

MacBook Pro (13-inch, 2020)
macOs Ventura  13.3.1
Chrome - Version 108.0.5359.124 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.2 (18614.3.7.1.5)
JAWS- Version 2021
NVDA- Version 2021.2
Voiceover - Version Latest