Issue Summary

The non-modal dialog which will appear on the "Invite people to edit with you" button is not programmatically identified

Steps to Reproduce

1. Navigate to the header and activate the "Create" link.
2. Using a screen reader, navigate to the "Invite people to edit with you" button and activate it.
3. Observe a dialog appears.
4. Listen that there is no indication regarding the presence of a dialog.

Screenshot

Actual Results

The non-modal dialog which will appear on the "Invite people to edit with you" button is not specified with a programmatic role and accessible name. This resulted in difficulty for screen reader users to understand the presence of a dialog

Expected Results

Apply the following changes: 

• Add role="dialog", aria-modal="false" and "aria-labelledby" attributes to the <div> tag containing the dialog content.
• Specify the 'id' attribute with a unique value to the <div> tag containing the "Invite people to edit" heading and reference it via the 'aria-labelledby' attribute.
• Provide aria-haspopup="dialog" aria attribute to the <button> element of the triggering element. 

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

Workaround

Not available

Environment 

MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest