Skip to content

style(a11y): improve WCAG accessibility across the website #69

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 5 commits into from
Feb 8, 2026
Merged

style(a11y): improve WCAG accessibility across the website #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f62453
style(a11y): improve WCAG accessibility across the website
MadhuTiwari-345 Feb 4, 2026
20645a2
fix(a11y): address Copilot feedback and restore download progress bar
MadhuTiwari-345 Feb 8, 2026
4c21a8c
fix(a11y): remove leftover theme hook import from layout
MadhuTiwari-345 Feb 8, 2026
5943f24
revert changes of global.css
akash-kumar-dev Feb 8, 2026
c1081d9
revert changes from download progress bar
akash-kumar-dev Feb 8, 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 src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function NotFound() {
<h2 className="text-3xl md:text-4xl font-bold text-gray-200 mb-4">
Oops! Page Not Found
</h2>
<p className="text-lg text-gray-400 mb-8">
<p className="text-lg text-gray-300 mb-8">
The page you&apos;re looking for doesn&apos;t exist or has been moved.
</p>

Expand Down
4 changes: 2 additions & 2 deletions src/components/about/AboutValues.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const AboutValues = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-white mb-4">Our Core Values</h2>
<p className="text-gray-400 max-w-2xl mx-auto">
<p className="text-gray-300 max-w-2xl mx-auto">
The principles that guide everything we do at BrowsePing.
</p>
</div>
Expand All @@ -43,7 +43,7 @@ const AboutValues = () => {
</div>
<div>
<h3 className="text-xl font-bold text-white mb-2">{value.title}</h3>
<p className="text-gray-400 leading-relaxed">
<p className="text-gray-300 leading-relaxed">
{value.description}
</p>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/contact/ContactUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const ContactUs = () => {
</div>
<div>
<h3 className="text-xl font-bold text-white">General Inquiries</h3>
<p className="text-gray-400">Questions, feedback, and support</p>
<p className="text-gray-300">Questions, feedback, and support</p>
</div>
</div>

Expand All @@ -58,11 +58,11 @@ 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} aria-hidden="true" />
<FiGithub className="text-gray-300" size={24} aria-hidden="true" />
</div>
<div>
<h3 className="text-xl font-bold text-white">Development & Open Source</h3>
<p className="text-gray-400">Contributing to the project</p>
<p className="text-gray-300">Contributing to the project</p>
</div>
</div>

Expand Down Expand Up @@ -115,7 +115,7 @@ const ContactUs = () => {

<div className="mb-6">
<h3 className="text-2xl font-bold text-white mb-2">Akash Kumar</h3>
<p className="text-gray-400 font-medium">Main Developer</p>
<p className="text-gray-300 font-medium">Main Developer</p>
</div>
</div>

Expand Down Expand Up @@ -154,11 +154,11 @@ 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} aria-hidden="true" />
<FiGithub className="text-gray-300" 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>
<p className="text-gray-400 text-sm font-medium">@akash-kumar-dev</p>
<p className="text-gray-300 text-sm font-medium">@akash-kumar-dev</p>
</div>
</div>
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/components/download/InstallationGuide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ const InstallationGuide = () => {
<step.icon className="text-purple-400" size={24} aria-hidden="true" />
</div>
<h4 className="text-lg font-semibold text-white mb-2">{step.title}</h4>
<p className="text-gray-400">{step.description}</p>
<p className="text-gray-300">{step.description}</p>
</div>
))}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/download/PlatformsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const PlatformsList = () => {
href={detectedPlatform.url}
target="_blank"
rel="noopener noreferrer"
className={`inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r ${detectedPlatform.color} hover:brightness-110 transition-all text-white font-medium shadow-lg hover:shadow-xl hover:scale-105 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-gray-900 focus:outline-none`}
className={`inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r ${detectedPlatform.color} hover:brightness-110 transition-all text-white font-medium shadow-lg hover:shadow-xl hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900`}
>
<FiDownload size={18} />
<span>Download for {detectedPlatform.name}</span>
Expand All @@ -143,7 +143,7 @@ const PlatformsList = () => {
href={platform.url}
target="_blank"
rel="noopener noreferrer"
className={`block h-[300px] p-6 rounded-2xl bg-gradient-to-br ${platform.color} ${platform.hover} transition-all duration-300 transform hover:scale-105 hover:shadow-2xl`}
className={`block h-[300px] p-6 rounded-2xl bg-gradient-to-br ${platform.color} ${platform.hover} transition-all duration-300 transform hover:scale-105 hover:shadow-2xl focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900`}
>
<div className="text-center flex flex-col justify-between h-full">
<div className="mb-4">
Expand Down
13 changes: 8 additions & 5 deletions src/components/download/ZipDownload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const ZipDownload = () => {
const [downloadProgress, setDownloadProgress] = useState(0);
const [isDownloading, setIsDownloading] = useState(false);


useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
Expand All @@ -24,6 +25,8 @@ const ZipDownload = () => {
return () => observer.disconnect();
}, []);



const handleDownload = () => {
setIsDownloading(true);
setDownloadProgress(0);
Expand Down Expand Up @@ -97,7 +100,7 @@ const ZipDownload = () => {
</div>
<div>
<h3 className="text-lg font-semibold text-white mb-1">{feature.title}</h3>
<p className="text-gray-400">{feature.description}</p>
<p className="text-gray-300">{feature.description}</p>
</div>
</div>
))}
Expand All @@ -119,13 +122,13 @@ const ZipDownload = () => {
{/* Download progress */}
{isDownloading && (
<div className="mb-6">
<div className="w-full bg-gray-700 rounded-full h-2 mb-2">
<div className="w-full bg-gray-700 rounded-full h-2 mb-2 overflow-hidden">
<div
className="bg-gradient-to-r from-green-400 to-blue-400 h-2 rounded-full transition-all duration-300"
style={{ width: `${downloadProgress}%` }}
></div>
</div>
<p className="text-sm text-gray-400">Downloading... {downloadProgress}%</p>
<p className="text-sm text-gray-300">Downloading... {downloadProgress}%</p>
</div>
)}

Expand All @@ -140,7 +143,7 @@ const ZipDownload = () => {
</span>
</button>

<p className="text-sm text-gray-400 mt-4">
<p className="text-sm text-gray-300 mt-4">
Size: ~2.5 MB • Compatible with all browsers
</p>
</div>
Expand All @@ -152,4 +155,4 @@ const ZipDownload = () => {
);
};

export default ZipDownload;
export default ZipDownload;
44 changes: 27 additions & 17 deletions src/components/home/FeaturesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,18 +193,22 @@ const FeaturesSection = () => {
{/* Navigation Button */}
<div className="hidden md:flex items-center space-x-4">
<button
type="button"
onClick={prevSlide}
className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30"
className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
aria-label="Previous feature"
>
<FiChevronLeft className="text-gray-300 group-hover:text-white transition-colors" size={24} />
<FiChevronLeft className="text-gray-300 group-hover:text-white transition-colors" size={24} aria-hidden="true" />
</button>

{/* Card */}
<div className="hidden lg:block">
{features[(currentIndex - 1 + features.length) % features.length] && (
<div
className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80"
<button
type="button"
className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
onClick={prevSlide}
aria-label={`View ${features[(currentIndex - 1 + features.length) % features.length].title} feature`}
>
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${features[(currentIndex - 1 + features.length) % features.length].gradient} flex items-center justify-center mb-4`}>
<div className="text-white scale-75">
Expand All @@ -214,10 +218,10 @@ const FeaturesSection = () => {
<h4 className="text-lg font-bold text-white mb-2">
{features[(currentIndex - 1 + features.length) % features.length].title}
</h4>
<p className="text-sm text-gray-400 line-clamp-3">
<p className="text-sm text-gray-300 line-clamp-3">
{features[(currentIndex - 1 + features.length) % features.length].description}
</p>
</div>
</button>
)}
</div>
</div>
Expand All @@ -229,7 +233,7 @@ const FeaturesSection = () => {
<div className="text-center mb-4 sm:mb-6">
<div className="inline-flex items-center space-x-2 mb-2 sm:mb-3">
<div className={`w-2 h-2 rounded-full bg-gradient-to-r ${features[currentIndex].gradient}`}></div>
<span className="text-xs sm:text-sm font-semibold text-gray-400 uppercase tracking-wider">
<span className="text-xs sm:text-sm font-semibold text-gray-300 uppercase tracking-wider">
{features[currentIndex].category}
</span>
</div>
Expand Down Expand Up @@ -260,9 +264,9 @@ const FeaturesSection = () => {
</div>

{/* Action Button */}
<button className={`inline-flex items-center space-x-3 bg-gradient-to-r ${features[currentIndex].gradient} hover:shadow-xl text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-2xl font-semibold transition-all duration-300 hover:scale-105 group text-sm sm:text-base`}>
<button className={`inline-flex items-center space-x-3 bg-gradient-to-r ${features[currentIndex].gradient} hover:shadow-xl text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-2xl font-semibold transition-all duration-300 hover:scale-105 group text-sm sm:text-base focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900`}>
<span>Explore Feature</span>
<FiZap className="group-hover:scale-110 transition-transform duration-300" size={16} />
<FiZap className="group-hover:scale-110 transition-transform duration-300" size={16} aria-hidden="true" />
</button>
</div>

Expand All @@ -276,9 +280,11 @@ const FeaturesSection = () => {
{/* Side Card */}
<div className="hidden lg:block">
{features[(currentIndex + 1) % features.length] && (
<div
className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80"
<button
type="button"
className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
onClick={nextSlide}
aria-label={`View ${features[(currentIndex + 1) % features.length].title} feature`}
>
<div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${features[(currentIndex + 1) % features.length].gradient} flex items-center justify-center mb-4`}>
<div className="text-white scale-75">
Expand All @@ -288,18 +294,20 @@ const FeaturesSection = () => {
<h4 className="text-lg font-bold text-white mb-2">
{features[(currentIndex + 1) % features.length].title}
</h4>
<p className="text-sm text-gray-400 line-clamp-3">
<p className="text-sm text-gray-300 line-clamp-3">
{features[(currentIndex + 1) % features.length].description}
</p>
</div>
</button>
)}
</div>

<button
type="button"
onClick={nextSlide}
className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30"
className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
aria-label="Next feature"
>
<FiChevronRight className="text-gray-300 group-hover:text-white transition-colors" size={24} />
<FiChevronRight className="text-gray-300 group-hover:text-white transition-colors" size={24} aria-hidden="true" />
</button>
</div>
</div>
Expand All @@ -317,10 +325,11 @@ const FeaturesSection = () => {
<button
key={index}
onClick={() => goToSlide(index)}
className={`w-3 h-3 rounded-full transition-all duration-300 ${index === currentIndex
className={`w-3 h-3 rounded-full transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 ${index === currentIndex
? `bg-gradient-to-r ${features[currentIndex].gradient} scale-125`
: 'bg-gray-600 hover:bg-gray-500'
}`}
aria-label={`Go to ${features[index].title} feature`}
/>
))}
</div>
Expand All @@ -345,6 +354,7 @@ const FeaturesSection = () => {
target="_blank"
rel="noopener noreferrer"
className="inline-block hover:scale-105 transition-transform duration-300 group"
aria-label="View BrowsePing on Product Hunt"
>
<Image
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
Expand Down Expand Up @@ -394,7 +404,7 @@ const FeaturesSection = () => {
rel="noopener noreferrer"
className="inline-flex items-center space-x-3 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 group w-full sm:w-auto justify-center"
>
<FiGithub size={20} className="group-hover:scale-110 transition-transform duration-300" />
<FiGithub size={20} className="group-hover:scale-110 transition-transform duration-300" aria-hidden="true" />
<span>Start Contributing</span>
</a>
</div>
Expand Down
Loading