[Improvement]: Improve accessibility and interaction consistency of blog cards

[mrdeyroy]

Description

The blog cards used across the homepage and blog-related sections currently have inconsistent interaction behavior and accessibility issues. While the cards visually appear interactive, the actual user experience differs between devices and interaction methods.

This creates usability problems for keyboard users, screen reader users, and mobile users.

---

Current Issues Observed

Interaction Inconsistencies

• Only certain portions of the card are clickable instead of the full card area
• Hover states are inconsistent between cards
• Some cards show hover animations without clear click behavior
• Tap feedback on mobile devices is weak or missing
• Keyboard navigation does not consistently highlight focused cards

Accessibility Issues

• Missing or unclear focus-visible states
• Inconsistent semantic structure for interactive elements
• Difficult keyboard navigation experience
• Potential screen reader ambiguity due to partial clickable regions

---

Steps to Reproduce

1. Open the homepage or blog section locally
2. Navigate to the blog cards/featured article section
3. Hover over different cards and compare interaction behavior
4. Try clicking different areas inside the same card
5. Use keyboard navigation (Tab key) to move across cards
6. Test the same interaction on mobile responsive mode

---

Examples of Inconsistent Behavior

• In some cards, only the title redirects while the card body does not
• Certain cards animate on hover but do not behave as fully clickable elements
• Focus outline visibility differs between components
• Mobile interactions feel inconsistent compared to desktop hover interactions

---

Technologies/Frameworks Involved

Based on the repository structure, this issue likely involves:

• React
• TypeScript
• Docusaurus
• Tailwind CSS
• Framer Motion (if animations are applied)

Potential component locations:

• src/components
• blog card components
• featured article sections
• homepage content sections

---

Expected Improvements

• Make the complete card area clickable
• Add proper keyboard accessibility support
• Improve focus-visible states
• Ensure consistent hover/tap interactions
• Improve semantic accessibility structure
• Maintain responsive behavior across screen sizes

---

Accessibility Standards Reference

The improvements can align with:

• WCAG 2.1 Accessibility Guidelines
• Keyboard Accessibility Best Practices
• Focus Visible Guidelines
• Semantic Interactive Element Standards

Relevant areas:

• Focus visibility
• Keyboard operability
• Interactive target consistency
• Screen reader usability

---

Benefits

• Better accessibility compliance
• Improved user experience
• More intuitive interactions
• Better mobile usability
• Consistent UI behavior across components

I would like to work on this issue. Please assign it to me under GSSoC.

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[github-actions]

Thanks for opening this issue. To help maintainers review it faster, please add the missing details below:

• Specific examples or scenarios where the current interactions fail for different user groups (e.g., specific devices or assistive technologies).
• Any proposed priority or timeline for implementing these improvements.
• Confirmation on whether there are existing design specifications or guidelines to adhere to for accessibility improvements.

[Adez017]

Hi @mrdeyroy before assigning the issue could you confirm the behavior? . We had pushed some recent changes to the blog cards. it would be helpful to get them asses before assigning the issue due to redundancy.

[mrdeyroy]

Hi @mrdeyroy before assigning the issue could you confirm the behavior? . We had pushed some recent changes to the blog cards. it would be helpful to get them asses before assigning the issue due to redundancy.

I re-verified the current behavior on the live/latest version, and the issues persist. Right now, the blog cards are split into two distinct sections: an image container and a text container.

Observed Behavior:
Text Section: Clicking anywhere on the text correctly triggers the redirection.
Image Section: Clicking on the image does nothing, which breaks user expectation since cards are visually treated as a single element.

Proposed Fixes:
Unified Clickable Area: I propose wrapping or configuring the card component so that the entire card area (including the image) is fully interactive and clickable.
Design Restructuring: The previous design felt a bit more intuitive with a dedicated "Read more" button/link. I'd love to re-introduce a clear call-to-action (CTA) element to improve usability and screen reader clarity.

Let me know if this aligns with the project goals so I can get started on it!

[Adez017]

@sanjay-kv need a review here before assigning . As per my discussion and the changes we had pushed , i think we are aligned on the roadmap we are following . let me know your thoughts .

[sanjay-kv]

@mrdeyroy this is done.

maybe you can help us with redesigning the search on blog wiht the below design

[mrdeyroy]

@sanjay-kv Thanks for confirmation.
So i have to raise a new issue for this redesigning ?

[sanjay-kv]

no you can start work on pr and attach this issue number.

[github-actions]

👤 Issue assigned to @mrdeyroy.