Enhance UI/a11y: Add Interactive Hover States and Screen-Reader Support for Action Cards

[Abhi666-max]

Problem Statement

While auditing the frontend accessibility and user interface of the application, I noticed that the core UI elements (specifically the donation action cards and primary buttons) lack sufficient tactile feedback. The absence of CSS hover and focus-visible states creates a static user experience and violates basic accessibility guidelines for keyboard navigation.

Additionally, FontAwesome icons are currently being rendered without aria-hidden="true". This causes screen readers to either announce confusing Unicode characters or skip the button's intent entirely if proper fallback text (.sr-only) isn't provided.

Proposed Solution

I propose enhancing the user experience and accessibility by implementing tactile CSS feedback and proper ARIA attributes for the icons.

The technical implementation will involve:

1. Updating the HTML markup for primary action buttons to include aria-hidden="true" on <i> tags and adding visually hidden span text (sr-only) for screen readers.
2. Appending smooth CSS transitions (e.g., transform: translateY(-4px) and box-shadow) to the .organ-donation-card and action buttons on :hover and :focus-visible.
3. Ensuring high-contrast focus indicators for users navigating via keyboard.

Assignment Request

I am actively participating in GSSoC '26 and am ready to implement these frontend enhancements. Please assign this issue to me. Kindly apply the relevant labels (e.g., gssoc, gssoc26, ui/ux, enhancement, a11y).

[Nishra2611]

Hi @jaideep005 , I would like to work on this issue under GSSoC 2026.

I reviewed the accessibility and UI concerns mentioned in the issue and would like to contribute by enhancing the interaction experience and improving semantic accessibility across the affected components.

• Improve keyboard navigation flow and interactive element accessibility
• Add better visual feedback using subtle scaling, border highlighting, and transition effects
• Refine button states for hover, active, and focus interactions to create a more responsive UI experience
• Improve semantic structure and accessibility support for icons and action elements
• Enhance accessibility compliance by ensuring proper labeling and readable interaction cues
• Test responsiveness and usability across both mouse and keyboard-based navigation

I will ensure the implementation remains clean, accessible, and visually consistent with the existing design system. Please assign this issue to me.

[khushbuthakur102005-cell]

Hi @jaideep005,

I am highly interested in working on this issue under GSSoC '26. Improving both accessibility (ARIA attributes & sr-only labels) and tactile CSS feedback for the buttons/cards is crucial for a great user experience.

I have a good understanding of semantic HTML and CSS transitions. Could you please assign this issue to me?

Thank you!

[jaideep005]

@khushbuthakur102005-cell Yeah, sure. I've assigned it now; you can work on it.

[jaideep005]

@Nishra2611 Yeah, sure. I've assigned it now; you can work on it.

[jaideep005]

@Abhi666-max Yeah, sure. I've assigned it now; you can work on it.