Issue Summary

The non-modal dialog which will appear on dates with events is not programmatically identified

Steps to Reproduce

1. Navigate to the header and activate the "Calendar" link
2. Using a screen reader, activate the dates with events.
3. Observe a dialog appears.
4. Listen that there is no indication regarding the presence of a dialog.

Screenshots

Actual Results

The non-modal dialog which will appear on dates with events 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. Additionally, Decorative images have been given descriptive alternate text such as "Rahil Shaikh", "Meet-ups", and so on which was found to be unnecessary. 

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 "Rahil Shaikh", "Meet-up" and so on headings and reference it via the 'aria-labelledby' attribute.
• Provide an empty alt attribute i.e., alt="" for all the decorative images.
• 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