Expand macro : Expand/ collapse element has a missing role and properties

Issue Summary

The expand/collapse element for Expand Macro has missing roles and properties, which makes the assistive technology user unaware of its functionality.

Steps to Reproduce

1. Launch the URL
2. Edit the page, add and expand macro and update the page.
3. On the page, in the main content area where the expand/collapse macro is present, try to interact with the element with keeping the screen reader on.

Screenshot

Screen recording

Screen Recording 2023-05-22 at 3.53.08 PM.mov

Actual Results

When the screen reader navigates over the “Expand" and "Collapse" Expand title interactive elements in the main content area for the page for Expand macro, these interactive elements are read as plain text for the screen reader users. 
This made it difficult for keyboard-only and screen reader users to understand the functionality associated with the links.

Expected Results

Apply the following changes to make the Expand/Collapse button more accessible:

• Code the mentioned interactive element  using <button> tag.
• If this is not possible, use custom role="button" and tabindex="0" to make sure that the button receives keyboard focus and has an interactive role.
• Set the aria-expanded attribute to false for the button when the button is in the collapsed state.
• Ensure that the value of the aria-expanded attribute changes on user interaction via scripting.

Refer to the following code snippet:

<div role="button" tabindex="0"id="expander-control-723013259" class="expand-control" aria-expanded="true"><span class="expand-icon aui-icon aui-icon-small aui-iconfont-chevron-down">&nbsp;</span><span class="expand-control-text">Question 1</span></div>

Refer to this page for more details: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ 

Workaround

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