Screen reader does not announce the "Macro suggestions" when appears on the editor.

Issue Summary

The screen reader does not render when the "Macro Suggestion" non-modal dialog appears on the editor which becomes available when the user activates the "{" key. The non-modal dialog is missing role and attributes due to which their presence is not exposed by screen reader software.

Steps to Reproduce

1. Turn on screen reader.
2. Navigate to the "create" button in the header & activate it.
3. Navigate to the main content edit input field
4. Press the keyboard shortcut "{", then observe that the "Macro suggestion" dialog pops appears.
5. When using up/down arrow keys user is able to navigate through options but screen reader doesn’t announce them.

Actual Results

While navigating with screen reader, when user press "{" key, a popup with macro suggestions is displayed on the page. But when user press up/down arrow keys it is not announced by the screen reader. Visually it looks like a listbox popup with options but it is not conveyed programatically to screen reader users. 

Also when user start typing the macro name the number of suggestions are updated but it is not announced by the screen reader effectively.

This makes screen reader users difficult to access the functionality associated with the macro suggestions effectively.

Expected Results

When user presses the { key the list of macro suggestions appears on the page. Following is the expected keyboard & screen reader behaviour.

• As soon as the list of suggestions appears focus should be set to the first option element.
• User should be able to navigate through options via up/down arrow keys.
• As soon as user start typing any macro name, the number of suggestions update. This should be announced by screen reader.
• This can be achieved by creating an off-screen ARIA live region instruction.

Make Following fixes in the code to achieve the expected behaviour

• Remove the "Macro suggestions" element from the <ol> element & mark it as <h2> element and provide an unique ID.
• Provide role="listbox" to the <ol> element & aria-labelledby="ID of H2 element".
• Provide role="option" to the <a> elements.
• Group all the options inside single <ol> element.
• Provide role="presentation" to all the <li> elements.
• Use ARIA live region to announce the number of suggestions available.
  • <div role="status" aria-atomic="true" aria-live="assertive">5 results available</div>

Screenshot

Screen Recording

Screen Recording 2022-08-12 at 11.12.02 AM.mov

Workaround

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