Issue Summary

The text elements present in the "Emoji" modal dialog are not defined using heading mark-up.

Steps to Reproduce

1. Navigate to "Create" button present in the header section.
2. After activating "Create" blank page template will appear on the screen.
3. Navigate to the "Insert emoji" button element and activate that.
4. Observe that a modal dialog has appeared on the screen.
5. Inspect the text elements and check that the heading is not defined.

Screenshot

Actual Results

Text such as "Frequent", "People" and "Search Results" (this becomes available when user search for the emoji from input field) visually appears to be heading on the page. This text is not marked-up using HTML heading.
This resulted in screen reader users finding it difficult to understand the page content structure.

Expected Results

Mark-up the mentioned text using appropriate HTML headings. In addition, use heading levels as per specification such as <h1> should be followed by <h2>, <h3> and so on.

Code Snippet

<h2 class="css-12nx786">Frequent</h2>
<h2 class="css-12nx786">People</h2>
<h2 class="css-12nx786">Search results</h2>

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 114.0.5735.198 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest