Edit/Remove Macro toolbar : Missing role for the element as button

Issue Summary

The Edit and Remove elements available on the inline macro are missing roles and properties.

Steps to Reproduce

1. Edit the page.
2. Add any macro to the page via. adding details into the appears modal for the selected macro.
3. Insert the macro and navigate to it on the page in the available edit mode itself.
4. Try to interact with the "Edit" and "Remove" elements with the screen reader.

Screenshot

Actual Results

In the Edit mode for the pages, when the user adds an inline macro element and clicks on the element, the "Edit" and "Remove" toolbar interactive elements appear near the macro element. These interactive elements are missing roles and attributes. Though the functionality is moreover like a button its is not been defined programmatically. This makes it the assistive technology user difficult to understand the functionality associated with it and difficult to access it.

Expected Results

The following changes could be implemented to make the "Edit" and "Remove" toolbar elements more accessible:

• Add a role="button" to the <a> link attribute in order to make the element function as a button.
• Ensure the elements receive keyboard and screen reader focus when they are available on event click.
• The screen reader should announce them as the "Edit button" and "Remove button".

Refer to the following code snippet:

<a href="#" role="button" class="aui-button macro-placeholder-property-panel-edit-button first" resolved=""><span class="icon  "></span><span class="panel-button-text">Edit</span></a>

Workaround

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