Issue Summary

The Comment's “Reactions (emojis)“ present for the comment lacks the unordered list semantics.

Steps to Reproduce

1. Open the "Scrum board" page.
2. Navigate to any issue on the board and activate it.
3. Observe that the issue will open in the non-modal dialog.
4. Navigate to the "Add reaction" button in the comment section and activate it.
5. Navigate to the mentioned instances and inspect the code.
6. Observe that the list structure is not programmed for the emojis that are interrelated with each other.

Screenshot

Actual Results

List markup is not used for the “Emojis“ present in the “Add reaction“ programmatically after activating it. For example, Emojis such as ":thumbs-up:", ":thumbs-down:", ":Fire:", and so on are not marked as an unordered list that visually looks like a list of related items.

As a result, screen reader users will find it difficult to navigate to the list and different list items quickly.

Expected Results

The Emojis should be structured using unordered list markup so that screen reader can identify the list and list items effectively for their users.

Use appropriate list markup, such as <ul> and <li> to identify related information. In addition, consider applying styles to maintain the visual presentation of a web page.

Code Example:

<ul>
    <li><button aria-pressed="false">:thumbsup:</button></li>
    <li><button aria-pressed="true">:thumbsdown:</button></li>
    ...
</ul>

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest