✨ [UI] Improve Footer Social Icons with Hover Animation, Tooltips, and Keyboard Accessibility

[asiya2123]

✨ UI Enhancement

Description

The footer social media icons are functional, but they can provide a better user experience by improving visual feedback and accessibility.

Current Behavior

• Social icons have minimal hover feedback.
• Icons do not provide descriptive tooltips.
• Keyboard users have limited focus visibility when navigating through the social links.

Proposed Improvements

• Add smooth hover animations (scale or subtle translate effect).
• Add accessible tooltips using the title attribute or an accessible tooltip component.
• Improve keyboard focus styles with a visible focus ring.
• Add smooth transition effects for hover and focus interactions.

Benefits

• Better accessibility for keyboard users.
• Improved visual feedback.
• More polished and modern UI.
• Better usability for first-time visitors.

Possible Implementation

• Add CSS transitions.
• Use :hover and :focus-visible states.
• Include descriptive tooltips for each social icon.

Example:

.social-icon {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.social-icon:hover {
    transform: translateY(-3px);
}

.social-icon:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 4px;
}

[harsharajkumar-273]

Hey thank you for looking through the repo and finding the issue

[asiya2123]

Hi @harsharajkumar-273, thank you for your response! I'd love to work on this UI enhancement. I plan to implement smooth hover animations, accessible tooltips, and improved keyboard focus styles while keeping the existing design consistent. Could you please assign this issue to me? Thank you!

[harsharajkumar-273]

I have assigned the issue to you , dont forget to star and fork the repo ⭐️

Happy coding 🚀

[SakethSumanBathini]

@harsharajkumar-273 Can you assign me this issue if this issue is stale