fix(a11y): Use descriptive labels for bookmark colour buttons

[unnikrishnanNam]

Fix: Accessibility Labels for Bookmark Colors

Description

Addresses an accessibility issue where CSS class names (e.g., red, blue) were being used as aria-label attributes for bookmark color buttons. This resulted in confusing or non-descriptive announcements for screen reader users.

Why this matters

Prior to this fix, assistive technologies would simply announce the technical class name (e.g., "blue") rather than a descriptive label. This created ambiguity—it wasn't clear if "blue" referred to a status, a style, or an action.

Changes

• Updated Data Structure: Added a label property (e.g., "Red", "Blue") to the bookmarkColors configuration in src/plugins/bookmarks/ia-bookmarks.js.
• Bookmark Edit Component:
  • Updated src/plugins/bookmarks/bookmark-edit.js to use the new label for title attributes.
  • Added a visually hidden <span> (using .sr-only) containing the label to provide robust accessible text for the radio inputs.
  • Imported sharedStyles to ensure the .sr-only class is available.
• Bookmarks List Component:
  • Updated src/plugins/bookmarks/bookmarks-list.js to use the descriptive label in the aria-label attribute of the bookmark buttons.
• Tests:
  • Updated tests/jest/plugins/bookmarks/bookmark-edit.test.js to reflect the new data structure.

Screenshot

Checklist

• Code follows the style guidelines of this project
• Local tests passed (npm test)
• Linting passed (npm run lint)