Skip to content

fix: resolve SEO, accessibility, and color contrast issues (Lighthouse audit) #247

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
amankv1234 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix: resolve SEO, accessibility, and color contrast issues (Lighthouse audit) #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3c5c274
fix(seo): add sr-only descriptive text to 'Learn more' links
amankv1234 Aug 24, 2026
8a45069
fix(a11y): exclude aria-hidden duplicate cards from keyboard tab order
amankv1234 Aug 25, 2026
3351ce6
fix(a11y): improve color contrast across components
amankv1234 Aug 25, 2026
d2e5da3
fix(a11y): address additional coderabbit contrast and inert feedback
amankv1234 Aug 25, 2026
fdfdc7f
fix(a11y): use string value for inert attribute to support React 18
amankv1234 Aug 25, 2026
571cafe
fix typescript error
amankv1234 Aug 25, 2026
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
2 changes: 1 addition & 1 deletion landing-page/src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function NotFound() {
<SiteNavbar />
<main className="flex-1 flex flex-col items-center justify-center text-center px-4 pt-16">
<h1 className="text-5xl sm:text-6xl font-serif font-bold mb-4">404</h1>
<p className="text-lg text-neutral-500 mb-8">
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8">
{notFoundCopy.message}
</p>
<div className="flex flex-wrap gap-4 justify-center">
Expand Down
4 changes: 2 additions & 2 deletions landing-page/src/components/CodeShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function CodeShowcase() {
<h2 className="text-4xl md:text-5xl font-serif font-bold tracking-tight text-balance mb-6">
30-second<br />setup.<br />Any framework.
</h2>
<p className="text-neutral-600 dark:text-neutral-400 mb-8 max-w-lg font-medium">
<p className="text-neutral-700 dark:text-neutral-300 mb-8 max-w-lg font-medium">
Fully typed, tree-shakable, and designed to match your application's design system out of the box.
</p>

Expand Down Expand Up @@ -60,7 +60,7 @@ export function CodeShowcase() {
{"\n "}
<code className="text-[#00C853]">return</code> <code className="text-white">(</code>
{"\n "}
<code className="text-neutral-500 font-medium">{"// Just drop it wherever you need it"}</code>
<code className="text-neutral-300 font-medium">{"// Just drop it wherever you need it"}</code>
{"\n "}
<code className="text-white">{"<"}</code>
<code className="text-[#FFCC00]">SocialShare</code>
Expand Down
4 changes: 2 additions & 2 deletions landing-page/src/components/EverywhereFeatures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export function EverywhereFeatures() {
<div className={`absolute top-0 left-0 w-full h-full bg-linear-to-r from-transparent via-white/20 to-transparent ${hoveredCard === i ? 'animate-shine' : ''}`} />
</div>

<span className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor} transition-transform duration-300 ${hoveredCard === i ? 'scale-110 rotate-12' : ''}`}>
<span aria-hidden="true" className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-60 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor} transition-transform duration-300 ${hoveredCard === i ? 'scale-110 rotate-12' : ''}`}>
{card.num}
</span>

Expand All @@ -104,7 +104,7 @@ export function EverywhereFeatures() {

<div>
<Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer hover:scale-105 hover:shadow-lg transform focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
Learn more
Learn more<span className="sr-only"> about {card.title}</span>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</Link>
</div>
</div>
Expand Down
13 changes: 7 additions & 6 deletions landing-page/src/components/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ interface FeatureCardProps {
index: number;
rotatedCard: number | null;
handleCardClick: (index: number) => void;
tabIndex?: number;
}

function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardProps) {
function FeatureCard({ card, index, rotatedCard, handleCardClick, tabIndex }: FeatureCardProps) {
return (
<div
onClick={() => handleCardClick(index)}
Expand All @@ -24,7 +25,7 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP
perspective: '1000px',
}}
>
<span className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor}`}>
<span aria-hidden="true" className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-60 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor}`}>
{card.num}
</span>

Expand All @@ -35,8 +36,8 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP
</p>

<div>
<Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
Learn more
<Link href="/docs" tabIndex={tabIndex} className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
Learn more<span className="sr-only"> about {card.title}</span>
</Link>
</div>
</div>
Expand Down Expand Up @@ -117,9 +118,9 @@ export function Features() {
<FeatureCard key={i} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
))}
</div>
<div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true">
<div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true" inert={true}>
{cards.map((card, i) => (
<FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
<FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} tabIndex={-1} />
Comment thread
coderabbitai[bot] marked this conversation as resolved.
))}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions landing-page/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function Footer() {
<br />
Right <span className="text-[#00C853]">now.</span>
</h2>
<p className="text-neutral-500 max-w-sm text-sm font-medium leading-relaxed mt-6">
<p className="text-neutral-400 max-w-sm text-sm font-medium leading-relaxed mt-6">
Two CDN tags, one function call. No account, no API key, no
<br className="hidden sm:block" />
build step. Your users will be sharing in under 30
Expand Down Expand Up @@ -174,7 +174,7 @@ export function Footer() {
{/* Bottom bar */}
<div className="border-t border-neutral-900 py-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center">
<div className="text-sm text-neutral-500 text-center">
<div className="text-sm text-neutral-400 text-center">
Open Source under MIT License &middot; &copy; 2016-
{new Date().getFullYear()} AOSSIE. All rights reserved.
</div>
Expand Down
10 changes: 5 additions & 5 deletions landing-page/src/components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export function Hero() {
whileTap={{ scale: 0.9 }}
href="/docs/manual"
onClick={(e) => handleNavigate(e, '/docs/manual')}
className="bg-[#00C853] text-white px-6 py-3 rounded-full font-bold hover:brightness-110 transition-all border-2 border-transparent dark:border-none flex items-center gap-2 cursor-pointer group"
className="bg-[#00C853] text-black px-6 py-3 rounded-full font-bold hover:brightness-110 transition-all border-2 border-transparent dark:border-none flex items-center gap-2 cursor-pointer group"
>
Add Manually <span className="group-hover:translate-x-1 transition-transform">→</span>
</motion.a>
Expand All @@ -79,11 +79,11 @@ export function Hero() {
<div className="relative mx-auto w-full max-w-md lg:max-w-none lg:ml-auto perspective-1000">
<div className="rounded-xl border-2 border-[#FFCC00] bg-card p-6 shadow-[0_0_30px_rgba(255,204,0,0.15)] transform-gpu hover:-translate-y-2 transition-transform duration-500">
<div className="flex items-center justify-between mb-8 cursor-move">
<h3 className="font-serif text-2xl font-bold text-center w-full text-[#00C853]">Share this Page</h3>
<h2 className="font-serif text-2xl font-bold text-center w-full text-[#00C853]">Share this Page</h2>
<button className="absolute right-4 top-4 text-neutral-400 hover:text-foreground">✕</button>
</div>

<p className="text-center text-sm text-neutral-500 mb-6">Where do you want to share this link?</p>
<p className="text-center text-sm text-card-foreground/70 mb-6">Where do you want to share this link?</p>

<div className="grid grid-cols-5 gap-4 mb-8">
{/* Mock Icons */}
Expand All @@ -98,13 +98,13 @@ export function Hero() {
<div className={`w-10 h-10 md:w-12 md:h-12 rounded-full ${network.bg} flex items-center justify-center text-white shadow-lg transition-transform group-hover:-translate-y-1`}>
{network.name[0]}
</div>
<span className="text-[10px] md:text-xs text-neutral-500">{network.name}</span>
<span className="text-[10px] md:text-xs text-card-foreground/70">{network.name}</span>
</div>
))}
</div>

<div className="flex items-center gap-2 bg-background rounded-full p-1 pl-4 border-2 border-[#FFCC00]">
<span className="text-xs md:text-sm text-neutral-500 truncate flex-1 hidden sm:block">social-share-button.aossie.org</span>
<span className="text-xs md:text-sm text-foreground/70 truncate flex-1 hidden sm:block">social-share-button.aossie.org</span>
<button className="bg-[#FFCC00] text-black px-4 py-2 rounded-full text-sm font-bold">
Copy Link
</button>
Expand Down
20 changes: 10 additions & 10 deletions landing-page/src/components/Playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,14 @@ export function Playground() {
</div>

{!isIconOnly && (
<p className={`text-center text-sm mb-8 font-medium ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
<p className={`text-center text-sm mb-8 font-medium ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
Share this page to your social networks:
</p>
)}

<div className={`gap-4 mb-10 justify-center ${isCompact || isIconOnly ? "flex flex-wrap" : "grid grid-cols-5"}`}>
{activePlatforms.length === 0 && (
<p className="text-xs text-neutral-500">No platforms selected — turn one on in the panel →</p>
<p className={`text-xs ${isDark ? 'text-neutral-300' : 'text-neutral-700'}`}>No platforms selected — turn one on in the panel →</p>
)}
{activePlatforms.map((network, i) => (
<div key={i} className="flex flex-col items-center gap-3">
Expand All @@ -132,7 +132,7 @@ export function Playground() {
{network.icon}
</div>
{!isIconOnly && (
<span className={`text-[11px] font-medium ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
<span className={`text-[11px] font-medium ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
{network.name}
</span>
)}
Expand All @@ -146,7 +146,7 @@ export function Playground() {
isDark ? "border-neutral-600" : "border-neutral-300"
}`}
>
<span className={`text-sm truncate flex-1 ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
<span className={`text-sm truncate flex-1 ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
https://socialsharebutton.com
</span>
<button
Expand Down Expand Up @@ -207,7 +207,7 @@ export function Playground() {

{/* Theme Config */}
<div>
<h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Theme</h4>
<h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Theme</h4>
<div className="flex rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-[#0a0a0a] p-1">
<button
onClick={() => setTheme("light")}
Expand All @@ -234,7 +234,7 @@ export function Playground() {

{/* Button Style Config */}
<div>
<h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Button Style</h4>
<h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Button Style</h4>
<div className="grid grid-cols-2 gap-2">
{BUTTON_STYLES.map((s) => (
<button
Expand All @@ -243,7 +243,7 @@ export function Playground() {
className={`py-2 text-sm rounded-md transition-colors ${
style === s.key
? "font-bold text-black bg-[#FFCC00] shadow-xs"
: "font-medium text-neutral-500 dark:text-neutral-400 border border-neutral-200 dark:border-neutral-800"
: "font-medium text-neutral-700 dark:text-neutral-300 border border-neutral-200 dark:border-neutral-800"
}`}
>
{s.label}
Expand All @@ -254,7 +254,7 @@ export function Playground() {

{/* Platforms Config */}
<div>
<h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Platforms</h4>
<h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Platforms</h4>
<div className="space-y-2">
{platforms.map((platform, i) => (
<button
Expand All @@ -273,7 +273,7 @@ export function Playground() {
>
{platform.icon}
</div>
<span className={`text-xs font-medium ${platform.active ? "text-foreground" : "text-neutral-500"}`}>
<span className={`text-xs font-medium ${platform.active ? "text-foreground" : "text-neutral-700 dark:text-neutral-300"}`}>
{platform.name}
</span>
</div>
Expand All @@ -299,7 +299,7 @@ export function Playground() {

{/* Button Color Config */}
<div>
<h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Button Color</h4>
<h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Button Color</h4>
<div className="flex gap-2">
{COLORS.map((c) => (
<button
Expand Down
Loading