Skip to content

feat(accessibility): implement WCAG 2.1 AA compliance fixes #63

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

Merged
akash-kumar-dev merged 1 commit into from
Jan 31, 2026
Merged

feat(accessibility): implement WCAG 2.1 AA compliance fixes #63

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
20 changes: 10 additions & 10 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ export const metadata: Metadata = {
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
maximumScale: 5,
userScalable: true,
themeColor: [
{ media: '(prefers-color-scheme: light)', color: '#1f2937' },
{ media: '(prefers-color-scheme: dark)', color: '#111827' },
Expand All @@ -60,12 +60,12 @@ export default function RootLayout({
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
{children}
<BackToTop />
</body>
</html>
);
return (
<html lang="en">
<body className={inter.className}>
{children}
<BackToTop />
</body>
</html>
);
}
26 changes: 11 additions & 15 deletions src/components/about/AboutHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,26 @@ const AboutHero = () => {

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="text-center">
<div className={`inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-4 py-2 mb-6 transition-all duration-1000 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<FiHeart className="text-blue-400" size={16} />
<div className={`inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-4 py-2 mb-6 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<FiHeart className="text-blue-400" size={16} aria-hidden="true" />
<span className="text-blue-300 text-sm font-medium">Our Story</span>
</div>

<h1 className="text-5xl md:text-7xl font-bold mb-8 leading-tight">
<span className={`block bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent transition-all duration-1000 delay-300 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<span className={`block bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent transition-all duration-1000 delay-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
Redefining the
</span>
<span className={`block bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent transition-all duration-1000 delay-500 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<span className={`block bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
Browsing Experience
</span>
</h1>

<p className={`text-xl text-gray-300 mb-4 max-w-3xl mx-auto leading-relaxed transition-all duration-1000 delay-700 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
BrowsePing was born from a simple idea: browsing the web shouldn&apos;t be a lonely activity.
<p className={`text-xl text-gray-300 mb-4 max-w-3xl mx-auto leading-relaxed transition-all duration-1000 delay-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
BrowsePing was born from a simple idea: browsing the web shouldn&apos;t be a lonely activity.
We&apos;re building a bridge between the digital world and social connection.
</p>

Expand All @@ -57,7 +53,7 @@ const AboutHero = () => {
].map((stat, index) => (
<div key={index} className="bg-gray-800/40 backdrop-blur-sm border border-gray-700/50 p-6 rounded-2xl hover:border-blue-500/30 transition-colors group hover:cursor-pointer">
<div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
<stat.icon className="text-blue-400" size={24} />
<stat.icon className="text-blue-400" size={24} aria-hidden="true" />
</div>
<div className="text-2xl font-bold text-white mb-1">{stat.value}</div>
<div className="text-gray-400 text-sm">{stat.label}</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/about/AboutValues.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const AboutValues = () => {
{values.map((value, index) => (
<div key={index} className="flex items-start space-x-6 p-8 bg-gray-800/30 rounded-3xl border border-gray-700/50 hover:bg-gray-800/50 transition-all duration-300 houver:cursor-pointer">
<div className="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-2xl flex items-center justify-center border border-blue-500/20">
<value.icon className="text-blue-400" size={28} />
<value.icon className="text-blue-400" size={28} aria-hidden="true" />
</div>
<div>
<h3 className="text-xl font-bold text-white mb-2">{value.title}</h3>
Expand Down
14 changes: 7 additions & 7 deletions src/components/contact/ContactUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const ContactUs = () => {
{/* Header */}
<div className="text-center mb-16">
<div className="inline-flex items-center space-x-3 bg-green-500/10 border border-green-500/20 rounded-full px-6 py-3 mb-8">
<FiMessageSquare className="text-green-400" size={20} />
<FiMessageSquare className="text-green-400" size={20} aria-hidden="true" />
<span className="text-green-300 font-medium">Get in Touch</span>
</div>

Expand All @@ -32,7 +32,7 @@ const ContactUs = () => {
<div className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl p-8">
<div className="flex items-center space-x-3 mb-6">
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<FiMail className="text-blue-400" size={24} />
<FiMail className="text-blue-400" size={24} aria-hidden="true" />
</div>
<div>
<h3 className="text-xl font-bold text-white">General Inquiries</h3>
Expand All @@ -48,7 +48,7 @@ const ContactUs = () => {
href="mailto:hello@browseping.com"
className="inline-flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
>
<FiMail size={16} />
<FiMail size={16} aria-hidden="true" />
<span>support@browseping.com</span>
</a>
</div>
Expand All @@ -58,7 +58,7 @@ const ContactUs = () => {
<div className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl p-8">
<div className="flex items-center space-x-3 mb-6">
<div className="w-12 h-12 bg-gray-500/20 rounded-xl flex items-center justify-center">
<FiGithub className="text-gray-400" size={24} />
<FiGithub className="text-gray-400" size={24} aria-hidden="true" />
</div>
<div>
<h3 className="text-xl font-bold text-white">Development & Open Source</h3>
Expand All @@ -76,7 +76,7 @@ const ContactUs = () => {
rel="noopener noreferrer"
className="inline-flex items-center space-x-2 bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors"
>
<FiGithub size={16} />
<FiGithub size={16} aria-hidden="true" />
<span>GitHub Repository</span>
</a>
</div>
Expand Down Expand Up @@ -154,7 +154,7 @@ const ContactUs = () => {
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative flex items-center space-x-3">
<div className="w-10 h-10 bg-gray-500/20 group-hover:bg-gray-500/30 rounded-lg flex items-center justify-center transition-colors">
<FiGithub className="text-gray-400" size={20} />
<FiGithub className="text-gray-400" size={20} aria-hidden="true" />
</div>
<div className="min-w-0">
<p className="text-white font-semibold group-hover:text-gray-100 transition-colors">GitHub</p>
Expand Down Expand Up @@ -215,7 +215,7 @@ const ContactUs = () => {
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-red-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative flex items-center space-x-3">
<div className="w-10 h-10 bg-red-500/20 group-hover:bg-red-500/30 rounded-lg flex items-center justify-center transition-colors">
<FiMail className="text-red-400" size={20} />
<FiMail className="text-red-400" size={20} aria-hidden="true" />
</div>
<div className="min-w-0">
<p className="text-white font-semibold group-hover:text-red-100 transition-colors">Email</p>
Expand Down
45 changes: 20 additions & 25 deletions src/components/download/DownloadHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,15 @@ const DownloadHero = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
<div className="text-center">
{/* Badge */}
<div className={`inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-4 py-2 mb-8 backdrop-blur-sm transition-all duration-1000 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<FiDownload className="text-blue-400" size={16} />
<div className={`inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/20 rounded-full px-4 py-2 mb-8 backdrop-blur-sm transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<FiDownload className="text-blue-400" size={16} aria-hidden="true" />
<span className="text-blue-300 text-sm font-medium">Download BrowsePing</span>
</div>

{/* Main Heading */}
<h1 className={`text-4xl md:text-6xl lg:text-7xl font-bold mb-6 transition-all duration-1000 delay-300 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<h1 className={`text-4xl md:text-6xl lg:text-7xl font-bold mb-6 transition-all duration-1000 delay-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<span className="bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
Get BrowsePing
</span>
Expand All @@ -43,45 +41,42 @@ const DownloadHero = () => {
</h1>

{/* Description */}
<p className={`text-xl md:text-2xl text-gray-300 mb-12 max-w-4xl mx-auto leading-relaxed transition-all duration-1000 delay-500 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<p className={`text-xl md:text-2xl text-gray-300 mb-12 max-w-4xl mx-auto leading-relaxed transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
Choose your preferred installation method and start socializing your browsing experience today
</p>

{/* Feature highlights */}
<div className={`flex flex-wrap justify-center gap-6 mb-8 transition-all duration-1000 delay-700 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<div className={`flex flex-wrap justify-center gap-6 mb-8 transition-all duration-1000 delay-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
{[
{ icon: FiGlobe, text: 'All Major Browsers', color: 'text-green-400' },
{ icon: FiCode, text: 'Open Source', color: 'text-blue-400' },
{ icon: FiZap, text: 'Easy Installation', color: 'text-purple-400' }
].map((feature, index) => (
<div key={index} className="flex items-center space-x-2 group cursor-pointer">
<div className="p-2 rounded-lg bg-gray-800/50 group-hover:bg-gray-700/50 transition-colors">
<feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} />
<feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} aria-hidden="true" />
</div>
<span className="text-gray-300 group-hover:text-white transition-colors">{feature.text}</span>
</div>
))}
</div>

{/* Product Hunt Badge */}
<div className={`flex justify-center mb-8 transition-all duration-1000 delay-900 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<a
href="https://www.producthunt.com/products/browseping?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-browseping"
target="_blank"
<div className={`flex justify-center mb-8 transition-all duration-1000 delay-900 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`}>
<a
href="https://www.producthunt.com/products/browseping?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-browseping"
target="_blank"
rel="noopener noreferrer"
className="inline-block hover:scale-105 transition-transform duration-300 group"
>
<Image
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt"
width={250}
height={54}
<Image
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt"
width={250}
height={54}
className="rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-700/50 hover:border-orange-500/50"
/>
</a>
Expand Down
Loading
Loading