Skip to content

Improve accessibility: add alt text, aria-labels, fix tap targets #593

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smmuskan140 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve accessibility: add alt text, aria-labels, fix tap targets #593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 33 additions & 64 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 10 additions & 8 deletions src/components/CardEffect.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
import Image from 'next/image'

export function CardEffect({heading, content, logo}) {
export function CardEffect({ heading, content, logo }) {
Copy link

@coderabbitai coderabbitai bot Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

logoAlt prop from callers is silently dropped.

According to the AI summary, src/pages/index.jsx passes a logoAlt prop to CardEffect, but this component doesn't destructure or use it. Either wire it through to the alt attribute on line 15, or remove the prop from the call site to avoid confusion.

Proposed fix — accept and use logoAlt 
-export function CardEffect({ heading, content, logo }) {
+export function CardEffect({ heading, content, logo, logoAlt }) {

Then on line 15:

-                        alt={`${heading} project logo`}
+                        alt={logoAlt || `${heading} project logo`}
#!/bin/bash
# Verify how CardEffect is called in index.jsx to confirm logoAlt is passed
rg -n 'CardEffect' -g '*.jsx' -g '*.js' -A5
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/CardEffect.jsx` at line 3, The CardEffect component currently
drops the logoAlt prop passed by callers; update the CardEffect function
signature to destructure logoAlt from props (e.g., function CardEffect({
heading, content, logo, logoAlt })) and use it as the img alt attribute where
the logo is rendered (replace the current hardcoded or missing alt on that img
with logoAlt, optionally falling back to heading or an empty string). Ensure you
only change the CardEffect component (not callers) so the alt text propagates
correctly.

return (
<a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">
Copy link

@coderabbitai coderabbitai bot Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

<a> element without href is not keyboard-accessible.

This <a> tag has no href, making it non-focusable via keyboard and semantically incorrect. Since this PR is focused on accessibility, consider changing it to a <div> (if it's just a visual container) or adding a proper href if it should be a link.

Proposed fix if it's a container 
-        <a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">
+        <div className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">

And close tag:

-        </a>
+        </div>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/CardEffect.jsx` at line 5, The <a> element in the CardEffect
component is used as a non-link container and lacks an href so it's not
keyboard-accessible; change the anchor to a semantic container (replace the
opening <a className="group ..."> and its matching closing tag with a <div
className="group ..."> / </div>) or, if it should be navigable, add a valid href
and ensure accessibility attributes; update any event handlers or CSS selectors
that target the anchor accordingly (look for the JSX element with className
"group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer"
inside CardEffect.jsx).

{/* <span className="absolute inset-0 border-2 rounded-lg border-dashed border-black dark:border-zinc-300"></span> */}

{/* <div className="relative flex h-full transform items-end border-4 rounded-lg border-black dark:border-zinc-300 bg-transparent dark:bg-transparent transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"> */}
{/* <div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800/40 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8 transition group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow-[8px_8px_0_0_#9ca3af] dark:group-hover:shadow-[8px_8px_0_0_#e5e7eb]"> */}
<div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8">

<div className="px-8 pb-4 self-center transition-opacity group-hover:absolute group-hover:opacity-0">
<Image
src= {logo}
src={logo}
width={150}
unoptimized
className='mx-auto'
alt='Project Logo'
className="mx-auto"
alt={`${heading} project logo`}
/>
<h2 className="ml-0 leading-9 text-4xl text-center flex font-extrabold justify-center font-mono text-[#00843D] dark:text-yellow-400">{heading}</h2>
<h2 className="ml-0 leading-9 text-4xl text-center flex font-extrabold justify-center font-mono text-[#00843D] dark:text-yellow-400">
{heading}
</h2>
</div>

<div className="absolute self-center pr-6 lg:scale-90 lg:pb-0 lg:pl-3 lg:pr-0 xl:pl-0 md:p-0 md:scale-95 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 dark:text-zinc-300">
<p className="mt-4 font-mono sm:w-100 w-52">{content}</p>
</div>

</div>
</a>
)
Expand Down
78 changes: 64 additions & 14 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,47 +17,97 @@ function NavLink({ href, children }) {
}

export function Footer() {
const currentYear = new Date().getFullYear();
const currentYear = new Date().getFullYear()

return (
<footer className="mt-16">
<Container.Outer>
<div className="pt-10 pb-10">
<Container.Inner>
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row">

{/* Navigation Links */}
<div className="flex gap-5 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
<NavLink href="/about">About</NavLink>
<NavLink href="/projects">Projects</NavLink>
<NavLink href="/ideas">Ideas</NavLink>
<NavLink href="/apply">Apply</NavLink>
</div>

{/* Copyright */}
<p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
&copy; 2016-{currentYear} AOSSIE. All rights reserved.
</p>

{/* Social Icons with Hover Tooltips */}
<div className="flex gap-6">
<Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:aossie.oss@gmail.com'>
<FontAwesomeIcon icon={faEnvelope} size='xl' />

<Link
aria-label="Contact by email"
className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition"
href="mailto:aossie.oss@gmail.com"
>
<span title="Send email to AOSSIE">
<FontAwesomeIcon icon={faEnvelope} size="xl" />
</span>
</Link>
<Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
<FontAwesomeIcon icon={faGitlab} size='xl' />

<Link
aria-label="AOSSIE on GitLab"
className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition"
href="https://gitlab.com/aossie"
>
<span title="Visit AOSSIE on GitLab">
<FontAwesomeIcon icon={faGitlab} size="xl" />
</span>
</Link>
<Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
<FontAwesomeIcon icon={faGithub} size='xl' />

<Link
aria-label="AOSSIE on GitHub"
className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition"
href="https://github.com/AOSSIE-Org"
>
<span title="Visit AOSSIE on GitHub">
<FontAwesomeIcon icon={faGithub} size="xl" />
</span>
</Link>
<Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn'>
<FontAwesomeIcon icon={faDiscord} size='xl' />

<Link
aria-label="Join the AOSSIE Discord"
className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition"
href="https://discord.gg/hjUhu33uAn"
>
<span title="Join AOSSIE on Discord">
<FontAwesomeIcon icon={faDiscord} size="xl" />
</span>
</Link>
<Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faTwitter} size='xl' />

<Link
aria-label="AOSSIE on Twitter"
className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition"
href="https://twitter.com/aossie_org"
>
<span title="Follow AOSSIE on Twitter">
<FontAwesomeIcon icon={faTwitter} size="xl" />
</span>
</Link>
<Link aria-label="Subscribe on YouTube" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://www.youtube.com/@AOSSIE-Org'>
<FontAwesomeIcon icon={faYoutube} size='xl' />

<Link
aria-label="AOSSIE YouTube channel"
className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition"
href="https://www.youtube.com/@AOSSIE-Org"
>
<span title="Visit AOSSIE on YouTube">
<FontAwesomeIcon icon={faYoutube} size="xl" />
</span>
</Link>

</div>

</div>
</Container.Inner>
</div>
</Container.Outer>
</footer>
)
}
}
2 changes: 1 addition & 1 deletion src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ function Home({ large = false, className, ...props }) {
className={clsx(className, 'pointer-events-auto')}
{...props}
>
<Image src='/logo1.png' width={100} height={100} className='scale-125' alt='Aossie Logo' />
<Image src='/logo1.png' width={100} height={100} className='scale-125' alt="AOSSIE banner for Google Summer of Code projects" />
</Link>
)
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Journey.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const Journey = () => {
return (
<div className="flex">
<div className='p-0 m-0'>
<Image src="/road_image.png" alt='road' width={700} height={500}></Image>
<Image src="/road_image.png" alt='AOSSIE journey road map image' width={700} height={500}></Image>
</div>
<div>Info</div>
</div>
Expand Down
11 changes: 10 additions & 1 deletion src/helper/projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const projects = [
label: 'Agora',
},
logo: AgoraLogo,
alt: 'Agora Blockchain Logo for GSoC project',
},
{
name: 'Agora Vote Android',
Expand All @@ -29,48 +30,55 @@ const projects = [
label: 'Agora-Android',
},
logo: AgoraLogo,
alt: 'Agora Android Logo for GSoC project',
},
{
name: 'Djed',
description:
'Djed is a Formally Verified Crypto-Backed Algorithmic Stablecoin Protocol.',
link: { href: 'https://github.com/AOSSIE-Org/Djed-Solidity-WebDashboard', label: 'Djed' },
logo: Djed,
alt: 'Djed Stablecoin Logo for GSoC project',
},
{
name: 'Pictopy',
description:
'PictoPy is a modern desktop app designed to transform the handling of digital photos. It facilitates efficient gallery management with a robust focus on privacy, offering smart tagging capabilities for photos based on objects, faces, or scenes.',
link: { href: 'https://github.com/AOSSIE-Org/PictoPy', label: 'PictoPy' },
logo: PictoPy,
alt: 'Pictopy App Logo for GSoC project',
Copy link

@coderabbitai coderabbitai bot Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Double space typo in alt text.

"Pictopy App Logo** **for GSoC project" has an extra space.

Proposed fix 
-    alt: 'Pictopy App Logo  for GSoC project',
+    alt: 'Pictopy App Logo for GSoC project',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
alt: 'Pictopy App Logo for GSoC project',
alt: 'Pictopy App Logo for GSoC project',
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/helper/projects.js` at line 49, The alt text string defined in the
projects helper (property "alt") contains a double space: alt: 'Pictopy App Logo
for GSoC project'; fix it by removing the extra space so it reads 'Pictopy App
Logo for GSoC project' (update the alt property value where it's defined in
src/helper/projects.js).

},
{
name: 'EduAid',
description:
'An online tool that can generate short quizzes on input educational content can be of great use to teachers and students alike as it can help retain important information, frame questions and quickly revise large chunks of content.',
link: { href: 'https://github.com/AOSSIE-Org/EduAid', label: 'EduAid' },
logo: DefaultLogo,
alt: 'EduAid Logo for GSoC project for GSoC project',
Copy link

@coderabbitai coderabbitai bot Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Duplicated phrase in alt text: "for GSoC project for GSoC project".

This is a copy-paste error — "for GSoC project" appears twice.

Proposed fix 
-    alt: 'EduAid Logo for GSoC project for GSoC project',
+    alt: 'EduAid Logo for GSoC project',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
alt: 'EduAid Logo for GSoC project for GSoC project',
alt: 'EduAid Logo for GSoC project',
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/helper/projects.js` at line 57, The alt text value assigned to the alt
property in the project object contains a duplicated phrase ("for GSoC project
for GSoC project"); update the alt string in src/helper/projects.js (the alt
property) to remove the repeated phrase so it reads cleanly (e.g., "EduAid Logo
for GSoC project" or an equivalent concise description), preserving other
surrounding object keys/structure.

},
{
name: 'OpenChat',
description:
'a decentralised platform for secure and private messaging and file sharing built on top of blockchain',
link: { href: '#', label: 'OpenChat' },
logo: DefaultLogo,
alt: 'OpenChat Logo for GSoC project',
},
{
name: 'Resonate',
description:
'With the rising popularity of social voice platforms such as Clubhouse, it is high time for an Open Source alternative. A platform like this would not only enhance credibility within the open-source community but also attract more users and foster growth. ',
link: { href: 'https://github.com/AOSSIE-Org/Resonate', label: 'Resonate' },
logo: ResonateLogo,
alt: 'Resonate Logo for GSoC project',
},
{
name: 'Monumento',
description:
'Monumento is an AR-integrated social app that transforms how you connect with the world’s most iconic landmarks. Through Monumento, you can check in to popular monuments, explore famous sites, and discover new people, all within a social platform.',
link: { href: 'https://github.com/AOSSIE-Org/Monumento', label: 'Monumento' },
logo: MonumentoLogo,
alt: 'Monumento App Logo for GSoC project',
},
{
name: 'Social Street Smart',
Expand All @@ -81,8 +89,9 @@ const projects = [
label: 'Social-Street-Smart',
},
logo: SSSLogo,
alt: 'Social Street Smart Logo for GSoC project',
},
]


export default projects
export default projects
Loading