Accessibility Assessment - Roadmaps: Textual description missing for image buttons

Issue Summary

The textual description is not provided for "Red", "Purple", "Pink", etc. image buttons in the main content area. 

Steps to Reproduce

1. Open the "Accessibility Assessment - Roadmaps" page.
2. Navigate to the main content.
3. Navigate to the "View settings" button and activate it.
4. Navigate to the "Color by" button and activate it.
5. Navigate to the "Issue type" button and activate it.
6. Navigate to the "Add color" button and activate it.
7. Using screen reader, navigate to the mentioned image buttons.
8. Inspect the code.
9. Observe that the textual description is not provided for the image buttons.

Screenshot

Screen Recording

Screen Recording 2024-02-06 at 4.59.41 PM.mov

Actual Results

The "Red", "Purple", "Pink", and so on image buttons lack textual description. Screen readers will announce these buttons as "Unlabelled 0", "Unlabelled 1", etc. in Windows / JAWS and "Button" in MAC / VoiceOver. As a result, screen reader users will be unable to identify the purpose of these buttons.

Expected Results

Provide the textual description for the image buttons using aria-label attribute. It will help screen reader users to understand the purpose of the image buttons effectively.

Code Snippet

<button class="sc-fAjcbJ bVzDB" aria-label="Red" spacing="default" type="button"></button>

Workaround

Required, if there is no workaround please state:
Currently, there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Monterey Version 12.3.1
Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest