Issue Summary

The "Star/Unstar" buttons are not programmatically defined.

Steps to Reproduce

1. Open the home page.
2. Navigate to the mentioned button present in the side navigation.
3. Inspect the code and Observe that the pressed state is not programmatically determined.

Screenshot 

Screen Recording

Screen Recording 2024-09-10 at 3.59.02 PM.mov

Actual Result

The following issues were found for the mentioned interactive element :

• The visually pressed the mentioned buttons do not have programmatically defined pressed state.
•  The mentioned button is only available on hover.
• The accessible name for the mentioned button is missing

This might disorient the users of assistive technologies, that the pressed state is not programmatically determined may confuse or mislead them.

Expected Result

Apply the following changes to fix this issue :

• 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.
• Ensure that the mentioned button should be available on hover, and on focus.
• Provide the accessible name such as "Star test space", "Star Demonstration Space", and so on using the aria-label attribute.
• Remove the title attribute from the source code of the mentioned button.

Code Snippet

<button aria-pressed="true" aria-label="Star test Space" class="remove toggle-favourite aui-icon aui-icon-small aui-iconfont-star">
(...)
</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 Sonoma 14.6.1
Chrome - Version 128.0.6613.120 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.6 (19618.3.11.11.5)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest