Issue Summary

The "React with :thumbs up: emoji", "React with :thumbs down: emoji", "React with : Fire: emoji", and so on, toggle buttons do not have programmatically defined pressed state.

Steps to Reproduce

1. Open the "Home" page.
2. From the header section, activate "Projects" button > choose any project > navigate to side navigation and click "Backlog" link > Opens the page.
3. Navigate to the main content area and activate any issue key button (i.e. SSP-4) and activate it > Issue details panel" appears.
4. In the comment section, add a comment and click on "Add reaction" button.
5. Navigate onto the any reaction emoji elements and activate any one of them.
6. Inspect the code of reacted/pressed instance.
7. Observe that the pressed state is not programmatically determined.

Screenshot

Actual Result

The visually pressed toggle buttons do not have a programmatically defined pressed state. This might disorient the users of assistive technologies, that the pressed state is not programmatically determined may confuse or mislead them.

Expected Result

When an element is visually pressed, make sure that this information is indicated programmatically as well. Use “aria-pressed” attribute on the button and update the “true” and “false” values appropriately. The value should be set to “true” when the button is pressed and “false” when the button is not pressed.

Code Snippet

<button aria-label="React with :thumbsup: emoji" aria-pressed="false" type="button" ...></button> 

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs SEQUOIA 15.2
Chrome - Version 132.0.6834.84 (Official Build) (64-bit)
Firefox- Version 128.6.0esr (64-bit)
Safari- Version - 18.2 (206220.1.16.11.8)
JAWS- Version 2023
NVDA- Version 2023.2
Voiceover - Version Latest