Add descriptive aria-labels to all icon-only buttons

[AlAfiz]

Description

Screen readers cannot interpret what a standalone icon (like a trash can or a magnifying glass) means. We must provide accessible labels for these interactive elements.

Acceptance Criteria

• Audit all <button> and <Link> elements that contain only an SVG/Icon and no visible text.
• Add explicit aria-label attributes to these elements (e.g., aria-label="Delete Invoice", aria-label="Search Marketplace").
• Verify that hovering over these buttons natively does not conflict with the aria-label (consider adding custom Tooltips to expose the label visually).

Technical Details

• This is a strict WCAG requirement. You can enforce this going forward by configuring eslint-plugin-jsx-a11y.

[OTobi21]

Familiar with aria accessibility fixes in React. I'll audit all icon-only buttons and links, add descriptive aria-label attributes throughout, and pair them with tooltips so the labels surface visually on hover too. I'll also wire up eslint-plugin-jsx-a11y to catch regressions going forward. PR within 2 days.

[grantfox-oss]

🦊 GrantFox — @OTobi21 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #217)
2. Your PR will be reviewed by the BETAIL-BOYS maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@OTobi21's PR #343 was approved and merged by @AlAfiz.

🏆 @OTobi21: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (86 total points). Track your full progress on GrantFox.

👏 Great work, @OTobi21! Keep contributing to BETAIL-BOYS.