fix: improve accessibility for interactive UI elements - aria-labels,… by garima-agarwall · Pull Request #1877 · recodehive/recode-website

garima-agarwall · 2026-06-09T12:00:34Z

… focus-visible, keyboard navigation

Description

Fixes #1575
Improved accessibility support for interactive UI elements across the website to ensure usability for screen readers and keyboard navigation users.

Type of Change

New feature (e.g., new page, component, or functionality)
[ yes] Bug fix (non-breaking change that fixes an issue)
UI/UX improvement (design, layout, or styling updates)
Performance optimization (e.g., code splitting, caching)
Documentation update (README, contribution guidelines, etc.)
Other (please specify):

Changes Made

NavbarIcon.tsx — removed redundant role="button" from , added aria-label={text} for screen readers
ShowcaseCard/index.tsx — added role="button", tabIndex={0}, aria-label, onKeyDown to clickable

leaderboard.tsx — added role="button", tabIndex={0}, aria-label, onKeyDown to clickable

ProductCard.tsx — added role="button", tabIndex={0}, aria-label, onKeyDown to clickable

custom.css — added global focus-visible outline styles for keyboard navigation across all interactive elements

Dependencies

No new dependencies added.

Checklist

[yes ] My code follows the style guidelines of this project.
[ yes] I have tested my changes across major browsers and devices
[yes ] My changes do not generate new console warnings or errors .
[yes ] I ran npm run build and attached screenshot(s) in this PR.
[yes ] This is already assigned Issue to me, not an unassigned issue.

… focus-visible, keyboard navigation

vercel · 2026-06-09T12:00:39Z

@garima-agarwall is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2026-06-09T12:00:44Z

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps 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 PR 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 20 contributions are eligible for sponsorship 💰

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

📚Your perks for contribution to this community 👇🏻

Get free Consultation use code recode50 to get free: Mentorship for free.
Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.
Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

github-actions · 2026-06-09T12:00:49Z

✅ Synchronized metadata from Issue #1575:

Labels: enhancement, level 1, recode, gssoc:approved, type:testing, type:design, type:refractor, type:devops
Milestone: recode:launch 3.0

sanjay-kv

could you fix the conflicts

github-actions · 2026-06-11T09:07:29Z

✅ Synchronized metadata from Issue #1575:

Labels: enhancement, level 1, recode, gssoc:approved, type:testing, type:design, type:refractor, type:devops
Milestone: recode:launch 3.0

garima-agarwall · 2026-06-11T09:08:27Z

hi @sanjay-kv @iitzIrFan @Adez017
I have resolved the conflict now. kindly review it.

Copilot

Pull request overview

Improves site-wide accessibility for interactive UI elements to better support keyboard navigation and screen readers (Fixes #1575).

Changes:

Adds accessible names (aria-label) and keyboard interaction handlers to several clickable, non-semantic elements.
Removes redundant role="button" from a native <button> and introduces focus-visible styling in global CSS.
Makes several card-like UI elements keyboard-focusable via tabIndex and role="button".

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/pages/showcase/_components/ShowcaseCard/index.tsx	Makes the “clickable overlay” keyboard-focusable and adds an accessible name.
src/css/custom.css	Introduces global `:focus-visible` outline styling for keyboard users.
src/components/navbar/NavbarIcon.tsx	Adds `aria-label` and removes redundant ARIA role from a native button.
src/components/merch/ProductCard.tsx	Adds keyboard/focus support to the product image click target.
src/components/dashboard/LeaderBoard/leaderboard.tsx	Adds keyboard/focus support to the contributor badges click target.

Comments suppressed due to low confidence (1)

src/components/navbar/NavbarIcon.tsx:49

<button> elements already support Enter/Space activation by default. Keeping a custom onKeyDown here can cause onClick to fire twice (native click + manual call), leading to toggles/navigation triggering twice. Removing the extra keyboard handler (and redundant tabIndex) preserves accessibility and prevents double-invocation.

      <button
        className={`navbar-icon-item ${active ? "active" : ""}`}
        onClick={onClick}
        aria-label={text}
        tabIndex={0}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            onClick();
          }
        }}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

iitzIrFan · 2026-06-11T12:47:55Z

    >
      <div className="product-card-image-wrapper">
-        <div className="product-card-image" onClick={openViewer} style={{ cursor: 'pointer' }}>
+        <div className="product-card-image" onClick={openViewer} role="button" tabIndex={0} aria-label="View product image" onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") openViewer(); }} style={{ cursor: 'pointer' }}>


@garima-agarwall look into this plz!

iitzIrFan · 2026-06-11T12:48:19Z

  return (
    <li key={user.title} className={clsx("card shadow--md", styles.card)}>
-      <div className={styles.cardLink} onClick={handleCardClick} />
+      <div className={styles.cardLink} onClick={handleCardClick} role="button" tabIndex={0} aria-label={`Visit ${user.title}`} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleCardClick(); }} />


@garima-agarwall same

iitzIrFan · 2026-06-11T12:46:53Z


  return (
-    <div className="contributor-badges" onClick={onClick}>
+    <div className="contributor-badges" onClick={onClick} role="button" tabIndex={0} aria-label="View contributor badges" onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onClick?.(); }}>


@garima-agarwall chk this plz!

iitzIrFan · 2026-06-11T12:48:09Z

+/* ===== Accessibility: focus-visible indicators ===== */
+:focus-visible {
+  outline: 2px solid var(--ifm-color-primary) !important;
+  outline-offset: 2px !important;
+  border-radius: 4px !important;
+}
+
+button:focus-visible,
+a:focus-visible,
+[role="button"]:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--ifm-color-primary) !important;
+  outline-offset: 2px !important;
+  border-radius: 4px !important;
+}


@garima-agarwall same as above.

iitzIrFan

look into the comments and do verify your changes before pushing any code plz!

iitzIrFan · 2026-06-11T12:46:26Z

  badges?: string[]; // Array of badge image paths
 }

 interface Stats {


'Stats' is defined but never used

iitzIrFan · 2026-06-11T12:46:53Z


  return (
-    <div className="contributor-badges" onClick={onClick}>
+    <div className="contributor-badges" onClick={onClick} role="button" tabIndex={0} aria-label="View contributor badges" onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onClick?.(); }}>


@garima-agarwall chk this plz!

iitzIrFan · 2026-06-11T12:47:03Z

  );
 }

 function TopPerformerCard({


TopPerformerCard' is defined but never used

iitzIrFan · 2026-06-11T12:47:11Z


  const renderPaginationButtons = () => {
    const pages = [];
    const maxVisibleButtons = 5; // Maximum number of page buttons to show directly


'maxVisibleButtons' is assigned a value but never used

iitzIrFan · 2026-06-11T12:47:25Z

  };

  // Helper function for time filter display
  const getTimeFilterLabel = (filter: string) => {


'getTimeFilterLabel' is assigned a value but never used

iitzIrFan · 2026-06-11T12:47:34Z

                  value={currentTimeFilter}
                  onChange={(e) => {
                    // Use setTimeFilter from context
                    setTimeFilter(e.target.value as any);


Unexpected any. Specify a different type

iitzIrFan · 2026-06-11T12:47:55Z

    >
      <div className="product-card-image-wrapper">
-        <div className="product-card-image" onClick={openViewer} style={{ cursor: 'pointer' }}>
+        <div className="product-card-image" onClick={openViewer} role="button" tabIndex={0} aria-label="View product image" onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") openViewer(); }} style={{ cursor: 'pointer' }}>


@garima-agarwall look into this plz!

iitzIrFan · 2026-06-11T12:48:09Z

+/* ===== Accessibility: focus-visible indicators ===== */
+:focus-visible {
+  outline: 2px solid var(--ifm-color-primary) !important;
+  outline-offset: 2px !important;
+  border-radius: 4px !important;
+}
+
+button:focus-visible,
+a:focus-visible,
+[role="button"]:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--ifm-color-primary) !important;
+  outline-offset: 2px !important;
+  border-radius: 4px !important;
+}


@garima-agarwall same as above.

iitzIrFan · 2026-06-11T12:48:19Z

  return (
    <li key={user.title} className={clsx("card shadow--md", styles.card)}>
-      <div className={styles.cardLink} onClick={handleCardClick} />
+      <div className={styles.cardLink} onClick={handleCardClick} role="button" tabIndex={0} aria-label={`Visit ${user.title}`} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleCardClick(); }} />


@garima-agarwall same

fix: improve accessibility for interactive UI elements - aria-labels,…

3f34d97

… focus-visible, keyboard navigation

github-actions Bot added in-review The current changes are in review and would need approval and testing before merging level 1 10 points recode this is label for leaderboard labels Jun 9, 2026

github-actions Bot added this to the recode:launch 3.0 milestone Jun 9, 2026

github-actions Bot added enhancement New feature or request gssoc:approved gssoc label type:design gssoc labels 10pts type:devops gssoc label 15pts type:refractor gssoc label 10pts type:testing gssoc label 10pts labels Jun 9, 2026

sanjay-kv requested changes Jun 10, 2026

View reviewed changes

iitzIrFan assigned garima-agarwall Jun 10, 2026

iitzIrFan added this to @recode-web Jun 10, 2026

iitzIrFan moved this to In Progress in @recode-web Jun 10, 2026

Merge branch 'main' into fix/accessibility-interactive-ui

8bf1ddb

garima-agarwall requested review from Adez017 and iitzIrFan as code owners June 11, 2026 09:07

iitzIrFan requested a review from Copilot June 11, 2026 12:40

Copilot started reviewing on behalf of iitzIrFan June 11, 2026 12:40 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

iitzIrFan reviewed Jun 11, 2026

View reviewed changes

Conversation

garima-agarwall commented Jun 9, 2026

Description

Type of Change

Changes Made

Dependencies

Checklist

Uh oh!

vercel Bot commented Jun 9, 2026

Uh oh!

github-actions Bot commented Jun 9, 2026

Uh oh!

github-actions Bot commented Jun 9, 2026

Uh oh!

sanjay-kv left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 11, 2026

Uh oh!

garima-agarwall commented Jun 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

iitzIrFan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants