From 13edc63a5d3ba1a1b4415018d5561a880d33af58 Mon Sep 17 00:00:00 2001 From: "Shruthi deepika.v" <151644213+shruthideepikareddy@users.noreply.github.com> Date: Thu, 29 Jan 2026 15:34:21 +0530 Subject: [PATCH] feat(accessibility): implement WCAG 2.1 AA compliance fixes --- src/app/layout.tsx | 20 ++++----- src/components/about/AboutHero.tsx | 26 +++++------ src/components/about/AboutValues.tsx | 2 +- src/components/contact/ContactUs.tsx | 14 +++--- src/components/download/DownloadHero.tsx | 45 +++++++++---------- src/components/download/InstallationGuide.tsx | 40 +++++++---------- src/components/download/PlatformsList.tsx | 6 +-- src/components/download/ZipDownload.tsx | 42 ++++++++--------- src/components/home/HeroSection.tsx | 14 +++--- src/components/layout/Footer.tsx | 4 +- src/components/layout/Navbar.tsx | 35 +++++++-------- .../leaderboard/LeaderboardHero.tsx | 4 +- .../leaderboard/PromotionalSection.tsx | 17 ++++--- .../leaderboard/PublicLeaderboard.tsx | 14 +++--- src/components/ui/AnimatedBackground.tsx | 1 + src/components/ui/MouseFollower.tsx | 14 +++--- 16 files changed, 140 insertions(+), 158 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0c190c6..6b40957 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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' }, @@ -60,12 +60,12 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { - return ( - - - {children} - - - -); + return ( + + + {children} + + + + ); } diff --git a/src/components/about/AboutHero.tsx b/src/components/about/AboutHero.tsx index f6bd3a2..56fa678 100644 --- a/src/components/about/AboutHero.tsx +++ b/src/components/about/AboutHero.tsx @@ -20,30 +20,26 @@ const AboutHero = () => {
-
- +
+

- + Redefining the - + Browsing Experience

-

- BrowsePing was born from a simple idea: browsing the web shouldn't be a lonely activity. +

+ BrowsePing was born from a simple idea: browsing the web shouldn't be a lonely activity. We're building a bridge between the digital world and social connection.

@@ -57,7 +53,7 @@ const AboutHero = () => { ].map((stat, index) => (
- +
{stat.value}
{stat.label}
diff --git a/src/components/about/AboutValues.tsx b/src/components/about/AboutValues.tsx index 0e02926..b5dc7e0 100644 --- a/src/components/about/AboutValues.tsx +++ b/src/components/about/AboutValues.tsx @@ -39,7 +39,7 @@ const AboutValues = () => { {values.map((value, index) => (
- +

{value.title}

diff --git a/src/components/contact/ContactUs.tsx b/src/components/contact/ContactUs.tsx index 004bdfe..f4184e4 100644 --- a/src/components/contact/ContactUs.tsx +++ b/src/components/contact/ContactUs.tsx @@ -10,7 +10,7 @@ const ContactUs = () => { {/* Header */}
- +
@@ -32,7 +32,7 @@ const ContactUs = () => {
- +

General Inquiries

@@ -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" > - +
@@ -58,7 +58,7 @@ const ContactUs = () => {
- +

Development & Open Source

@@ -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" > - +
@@ -154,7 +154,7 @@ const ContactUs = () => {
- +

GitHub

@@ -215,7 +215,7 @@ const ContactUs = () => {
- +

Email

diff --git a/src/components/download/DownloadHero.tsx b/src/components/download/DownloadHero.tsx index f7b560e..f2d71f6 100644 --- a/src/components/download/DownloadHero.tsx +++ b/src/components/download/DownloadHero.tsx @@ -22,17 +22,15 @@ const DownloadHero = () => {
{/* Badge */} -
- +
+
{/* Main Heading */} -

+

Get BrowsePing @@ -43,16 +41,14 @@ const DownloadHero = () => {

{/* Description */} -

+

Choose your preferred installation method and start socializing your browsing experience today

{/* Feature highlights */} -
+
{[ { icon: FiGlobe, text: 'All Major Browsers', color: 'text-green-400' }, { icon: FiCode, text: 'Open Source', color: 'text-blue-400' }, @@ -60,7 +56,7 @@ const DownloadHero = () => { ].map((feature, index) => (
- +
{feature.text}
@@ -68,20 +64,19 @@ const DownloadHero = () => {
{/* Product Hunt Badge */} -
- + - BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt diff --git a/src/components/download/InstallationGuide.tsx b/src/components/download/InstallationGuide.tsx index f36e673..bd8932a 100644 --- a/src/components/download/InstallationGuide.tsx +++ b/src/components/download/InstallationGuide.tsx @@ -160,30 +160,27 @@ const InstallationGuide = () => {
-

+

Installation Guide

-

+

Follow these simple steps to manually install BrowsePing extension

{/* Prerequisites */} -
+

Prerequisites

{prerequisites.map((step, index) => (
- +

{step.title}

{step.description}

@@ -193,20 +190,18 @@ const InstallationGuide = () => {
{/* Browser Selection */} -
+

Select Your Browser

{browsers.map((browser) => (
{/* Installation Steps */} -
+

Installation Steps for {browsers.find(b => b.id === selectedBrowser)?.name}

- +
{getSteps(selectedBrowser).map((step, index) => (
@@ -234,7 +228,7 @@ const InstallationGuide = () => {
- +

{step.description}

@@ -243,7 +237,7 @@ const InstallationGuide = () => {
{index < getSteps(selectedBrowser).length - 1 && (
- +
)}
@@ -253,7 +247,7 @@ const InstallationGuide = () => { {/* Success message */}
- +
@@ -166,7 +166,7 @@ const PlatformsList = () => {
- +