Issue Summary

On activating the "Edit Event" links, the content gets dynamically updated to display new content. Additionally, The mentioned interactive elements are implemented as a link in the source code. 

Steps to Reproduce

1. Navigate to the header and activate the "Calendar" link
2. Navigate to the dates and activate it 
3. Navigate to the "Add Reminder" link and activate it 
4. Using a screen reader, navigate to the mentioned link
5. Activate the mentioned link using Enter key.
6. Observe that the content gets updated with new content.
7. Try navigating through the new content and observe that the keyboard focus has moved to the beginning of the page in the background.

Screen Recording

Screen Recording 2023-08-07 at 4.13.45 PM.mov

Screenshot

Actual Results

The functionality associated with the"Edit Event" link is unclear for all the users

The following problems were found with mentioned links →

• Visually, on activating the "Edit Event" link, the content gets dynamically updated to display a new content. The keyboard focus moves to the beginning of the page instead of moving to the beginning of the updated content. 
• The "Edit Event" functionality is implemented as a link inappropriately. As a result, screen reader users are communicated with inappropriate role information.
• Identical and inappropriate labels "mycalendar.action" are announced for the links.
• The "Edit Event" links do not have textual descriptions. Moreover, the images used for these links are defined using the CSS background property.

Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users. This made it difficult for screen reader users to access the functionality associated with it.

Expected Results

Apply the following changes:

• Provide a hidden instruction such as "On activating this button, the content will update below" before the mentioned buttons on the page to orient screen reader users about dynamically updating content. Position this text off-screen via CSS.
• Set the keyboard focus to the beginning of the updated content using JavaScript .focus() method when users activate the link.
• Mark-up the mentioned interactive element using the native <button> element. If the implementation is not possible, use custom role="button" and tabindex="0" to make sure that this button receives keyboard focus and has an interactive role.
• Provide unique and descriptive labels such as “Edit Event- Birthdays”, “Edit Event-Leaves” and so on for the buttons using aria-label attribute. Ensure that the value of the “aria-label” attribute changes on user interaction.
• Implement the image buttons using <img> element and provide empty "alt" attribute (alt="") in its source code

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