Issue Summary

The Macro options available in the modal do not receive keyboard or screen reader focus, which makes it difficult for the assistive technology user to interact with the elements.

Steps to Reproduce

1. Launch the URL
2. Edit the confluence page
3. Open the Select macros modal.
4. In the Select macros modal, with the keyboard and screen reader on, try to navigate into the macros options such as "Anchor", "Blog post" , etc.

Screenshot

Screen recording

Screen Recording 2022-06-07 at 4.03.08 PM.mov

Actual Results

In the Select Macros modal, the list items of macros such as "Anchor", "Attachment", "Blog post", etc. do not receive keyboard and screen reader focus. This makes them difficult for the assistive technology used to access the macros. The macro items are accessible with a mouse click. 

Additionally, roles and labels are missing for the interactive elements.

Expected Results

Ensure that all the page functionality is available for all users irrespective of the device being used.  
Apply the following changes:

• Code the links using the <a> element and include the “href” attribute in the source code.
•  Modify the scripts associated with the mentioned links to ensure that it is accessible for keyboard-only as well as mouse users.
• Provide an aria-label, where the label should be identical to the macro name, eg. aria-label="Blog post".

Workaround

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