Issue Summary
The non-modal dialog which will appear on dates with events is not programmatically identified
Steps to Reproduce
- Navigate to the header and activate the "Calendar" link
- Using a screen reader, activate the dates with events.
- Observe a dialog appears.
- 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
Bug
Low
