Issue Summary

In the create new page-editor, when the user tries to add an emoji using the “:“ a Listbox appears which has a missing list markup.

Steps to Reproduce

1. Navigate to "Create new page - editor" & activate it.
2. In the Editor input area, keep the screen reader on type “:”
3. A Listbox containing all the emojis will appear.
4. Inspect the available Listbox containing the emojis.

Screenrecording 

Screen Recording 2023-08-24 at 4.45.16 PM.mov

Actual Results

In the editor when the user tries to add an emoji using the “:“ a list box appears which has a missing list markup. List mark-up enables screen reader users to identify a number of list items. On the basis of the appropriate list markup, the screen reader announces the beginning and end of a list.
This helps users to navigate and interpret the information effectively.

Expected Results

Ensure the screen reader is able to receive the focus and the list of options is announced appropriately to the user. Use appropriate list mark-up, such as <li>, <ul> and <ol> to identify related information.

Refer to the following implementation: !https://www.w3.org/favicon.ico!Scrollable Listbox Example 

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.5.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest