Editor macro: Screen reader and keyboard-only users cannot access the macro in the editor.

Issue Summary

In confluence, when users inserts macros such as "Recently updated", "Status" etc, there is no way by which the screen reader and keyboard-only users can access the functionality & toolbar associated with them.

Currently, only when user click on the macro with mouse the toolbar is displayed.

Steps to Reproduce

1. Edit the page.
2. Navigate to "Insert more content" and activate the link, dropdown gets displayed and then activate the "Status" option in the dropdown.
3. Add the details and activate the "insert" button.
4. "Status" macro will appear on the editor.
5. Try to navigate to the macro with screen reader & Keyboard.

Actual Results

When the user navigates to the macros which is present in the editor section with the help of the screen reader, the macros are not getting announced correctly for the screen reader users. Thus the screen reader user will not be able to understand the functionality of the inline macros.

Similarly, keyboard-only users cannot interact with the macros while navigating through the editor.

Expected Results

Following is the expected behaviour of macros with the keyboard:

• When the user navigates via keyboard, with tab key or shift-tab key, the macro elements in the editor should receive keyboard focus.
• When user press the enter key then the macro element should be activated and the toolbar of the macro should be displayed.
• Mark the macro element as native button element with <button> or ARIA role=”button” and use tabindex="0"on  <div> or <span> and move the macro <img> element inside it.
• Use scripting to capture and respond to a keyboard event.

 Following is the expected behaviour of macros with a screen reader:

• When the user navigates with the screen reader the label of the macro should be announced when the focus goes to the macro.
• Fix this issue by providing an accessible name via the aria-label attribute along with role="region" in <button>.
• Users should be notified about the information that the button would trigger a dialog.
• To implement this make sure to provide aria-haspopup="true/false" to the <button> element.

Screenshot

Screen Recording

Screen Recording 2022-06-24 at 5.39.39 PM.mov

Workaround

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