From 30f3c122f24329a34a8ac8b7f8bd544d9fc4adf3 Mon Sep 17 00:00:00 2001
From: Adithya KP <adithyakp86@gmail.com>
Date: Tue, 10 Mar 2026 13:08:29 +0530
Subject: [PATCH] feat: improve accessibility (A11y) for interactive UI
 elements

---
 src/components/AIBlog/AIBlogCard.jsx      |   2 +-
 src/components/AIBlog/AIBlogGenerator.jsx |   2 +-
 src/components/Layout/Navbar.jsx          |  10 +--
 src/components/Sections/Blog.jsx          |  12 +--
 src/components/Sections/BlogDetail.jsx    |  12 +--
 src/components/Sections/ContactUs.jsx     |  12 +--
 src/components/Sections/Contributors.jsx  |   5 +-
 src/components/Sections/FAQ.jsx           | 101 ++++++++++++----------
 src/components/Sections/Pricing.jsx       |  31 +++----
 9 files changed, 96 insertions(+), 91 deletions(-)

diff --git a/src/components/AIBlog/AIBlogCard.jsx b/src/components/AIBlog/AIBlogCard.jsx
index c6275d8..9f91d90 100644
--- a/src/components/AIBlog/AIBlogCard.jsx
+++ b/src/components/AIBlog/AIBlogCard.jsx
@@ -97,7 +97,7 @@ export default function AIBlogCard({ article, onNewArticle }) {
                         : "Generated by Google Gemini AI"}
                 </span>
                 <button className="ai-blog-card__new-btn" onClick={onNewArticle}>
-                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                         <path
                             d="M1 7H13M7 1V13"
                             stroke="currentColor"
diff --git a/src/components/AIBlog/AIBlogGenerator.jsx b/src/components/AIBlog/AIBlogGenerator.jsx
index 9922710..b56b8d2 100644
--- a/src/components/AIBlog/AIBlogGenerator.jsx
+++ b/src/components/AIBlog/AIBlogGenerator.jsx
@@ -97,7 +97,7 @@ export default function AIBlogGenerator({ onArticleGenerated }) {
                         </>
                     ) : (
                         <>
-                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                                 <path
                                     d="M8 1L10.2 5.6L15 6.5L11.5 10L12.3 15L8 12.6L3.7 15L4.5 10L1 6.5L5.8 5.6L8 1Z"
                                     stroke="currentColor"
diff --git a/src/components/Layout/Navbar.jsx b/src/components/Layout/Navbar.jsx
index be49e14..1519d80 100644
--- a/src/components/Layout/Navbar.jsx
+++ b/src/components/Layout/Navbar.jsx
@@ -270,7 +270,7 @@ function Navbar() {
                       }}
                     />
                   ) : (
-                    <FiUser />
+                    <FiUser aria-hidden="true" />
                   )}
                 </button>
 
@@ -279,7 +279,7 @@ function Navbar() {
                   role="menu"
                 >
                   <div className="profile-dropdown-header">
-                    <FiMail className="profile-icon" />
+                    <FiMail className="profile-icon" aria-hidden="true" />
                     <span className="profile-email">{currentUser.email}</span>
                   </div>
 
@@ -292,7 +292,7 @@ function Navbar() {
                         className="profile-dropdown-item"
                         onClick={() => setIsProfileOpen(false)}
                       >
-                        <FiLock />
+                        <FiLock aria-hidden="true" />
                         <span>Change Password</span>
                       </Link>
                     )}
@@ -302,7 +302,7 @@ function Navbar() {
                       className="profile-dropdown-item"
                       onClick={() => setIsProfileOpen(false)}
                     >
-                      <FiBookmark />
+                      <FiBookmark aria-hidden="true" />
                       <span>Saved Insights</span>
                     </Link>
 
@@ -313,7 +313,7 @@ function Navbar() {
                       }}
                       className="profile-dropdown-item logout-item"
                     >
-                      <FiLogOut />
+                      <FiLogOut aria-hidden="true" />
                       <span>Logout</span>
                     </button>
                   </div>
diff --git a/src/components/Sections/Blog.jsx b/src/components/Sections/Blog.jsx
index 1b4f8ad..c2dcbb8 100644
--- a/src/components/Sections/Blog.jsx
+++ b/src/components/Sections/Blog.jsx
@@ -43,7 +43,7 @@ export default function Blog() {
             transition={{ duration: 0.6 }}
           >
             <div className="hero-badge">
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                 <circle cx="8" cy="8" r="7" stroke="#4559DC" strokeWidth="2" />
                 <path d="M5 8L7 10L11 6" stroke="#4559DC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
@@ -62,7 +62,7 @@ export default function Blog() {
         {/* Featured Reports */}
         <div className="featured-section">
           <h2 className="section-title">
-            <svg width="20" height="20" viewBox="0 0 16 17" fill="none">
+            <svg width="20" height="20" viewBox="0 0 16 17" fill="none" aria-hidden="true">
               <path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z"
                 stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
@@ -100,7 +100,7 @@ export default function Blog() {
                     <div className="tag-indicator">
                       {post.tag === "Premium" ? (
                         <div className="premium-indicator">
-                          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                             <circle cx="6" cy="6" r="5" fill={post.badgeColor} stroke="white" strokeWidth="1" />
                             <path d="M3.5 6L5 7.5L8.5 4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                           </svg>
@@ -108,7 +108,7 @@ export default function Blog() {
                         </div>
                       ) : (
                         <div className="free-indicator">
-                          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                             <circle cx="6" cy="6" r="5" fill={post.badgeColor} stroke="white" strokeWidth="1" />
                             <path d="M8 6H4M6 4V8" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
                           </svg>
@@ -130,7 +130,7 @@ export default function Blog() {
 
                     <button className="read-btn">
                       Read
-                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                         <path d="M3.5 8H12.5M12.5 8L9 4.5M12.5 8L9 11.5"
                           stroke="currentColor" strokeWidth="1.5"
                           strokeLinecap="round" strokeLinejoin="round" />
@@ -187,7 +187,7 @@ export default function Blog() {
                     <span className="post-read-time">{post.readTime}</span>
                     <div className="post-read-more">
                       Read Article
-                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                         <path d="M1 7H13M13 7L9 3M13 7L9 11"
                           stroke="currentColor" strokeWidth="1.5"
                           strokeLinecap="round" strokeLinejoin="round" />
diff --git a/src/components/Sections/BlogDetail.jsx b/src/components/Sections/BlogDetail.jsx
index 8816f76..2a4ae1b 100644
--- a/src/components/Sections/BlogDetail.jsx
+++ b/src/components/Sections/BlogDetail.jsx
@@ -144,7 +144,7 @@ const BlogDetail = () => {
         animate={{ opacity: 1, y: 0 }}
       >
         <button onClick={() => navigate("/blog")} className="breadcrumb-link">
-          <FiArrowLeft /> All Insights
+          <FiArrowLeft aria-hidden="true" /> All Insights
         </button>
         <span className="breadcrumb-divider">/</span>
         <span className="breadcrumb-current">{blog.category || "Article"}</span>
@@ -172,18 +172,18 @@ const BlogDetail = () => {
         <p className="blog-detail-excerpt">{blog.excerpt}</p>
 
         <div className="blog-metadata">
-          <Meta icon={<FiUser />} label="AUTHOR" value="Thomas Wright" />
+          <Meta icon={<FiUser aria-hidden="true" />} label="AUTHOR" value="Thomas Wright" />
           <Meta
-            icon={<FiCalendar />}
+            icon={<FiCalendar aria-hidden="true" />}
             label="PUBLISHED"
             value={blog.date || "N/A"}
           />
           <Meta
-            icon={<FiClock />}
+            icon={<FiClock aria-hidden="true" />}
             label="READ TIME"
             value={blog.readTime || "N/A"}
           />
-          <Meta icon={<FiEye />} label="VIEWS" value={views.toLocaleString()} />
+          <Meta icon={<FiEye aria-hidden="true" />} label="VIEWS" value={views.toLocaleString()} />
         </div>
       </motion.div>
 
@@ -227,7 +227,7 @@ const BlogDetail = () => {
               onClick={() => navigate("/blog")}
               className="back-to-blog-btn"
             >
-              <FiArrowLeft /> Back to All Insights
+              <FiArrowLeft aria-hidden="true" /> Back to All Insights
             </button>
           </div>
         </motion.article>
diff --git a/src/components/Sections/ContactUs.jsx b/src/components/Sections/ContactUs.jsx
index e1f73de..f0892cb 100644
--- a/src/components/Sections/ContactUs.jsx
+++ b/src/components/Sections/ContactUs.jsx
@@ -14,16 +14,16 @@ const ContactUs = () => {
       <div className="contact-content">
         <form className="contact-form">
           <div className="form-group">
-            <label>Your Name</label>
-            <input type="text" placeholder="Enter your name" />
+            <label htmlFor="contact-name">Your Name</label>
+            <input id="contact-name" type="text" placeholder="Enter your name" />
           </div>
           <div className="form-group">
-            <label>Your Email</label>
-            <input type="email" placeholder="Enter your email" />
+            <label htmlFor="contact-email">Your Email</label>
+            <input id="contact-email" type="email" placeholder="Enter your email" />
           </div>
           <div className="form-group">
-            <label>Your Message</label>
-            <textarea rows="5" placeholder="Enter your message"></textarea>
+            <label htmlFor="contact-message">Your Message</label>
+            <textarea id="contact-message" rows="5" placeholder="Enter your message"></textarea>
           </div>
           <button className="button" type="submit">
             Send Message
diff --git a/src/components/Sections/Contributors.jsx b/src/components/Sections/Contributors.jsx
index 9dabbb4..75d2b05 100644
--- a/src/components/Sections/Contributors.jsx
+++ b/src/components/Sections/Contributors.jsx
@@ -387,7 +387,7 @@ const Contributors = () => {
                 width="120"
                 height="120"
               />
-              <div className="admin-badge">👑</div>
+              <div className="admin-badge" aria-hidden="true">👑</div>
             </div>
             <div className="project-admin-info">
               <h2 className="project-admin-title">Project Admin</h2>
@@ -415,7 +415,7 @@ const Contributors = () => {
               className="btn btn-outline project-admin-btn"
               onClick={handleOpenRepo}
             >
-              Open Repository 📚
+              Open Repository <span aria-hidden="true">📚</span>
             </button>
           </div>
         </div>
@@ -566,6 +566,7 @@ const Contributors = () => {
               <button
                 className="contributors-modal-close"
                 onClick={handleCloseModal}
+                aria-label="Close"
               >
                 ×
               </button>
diff --git a/src/components/Sections/FAQ.jsx b/src/components/Sections/FAQ.jsx
index 4842d13..f6671cc 100644
--- a/src/components/Sections/FAQ.jsx
+++ b/src/components/Sections/FAQ.jsx
@@ -1,58 +1,65 @@
-import React,{useState} from 'react'
+import React, { useState } from 'react'
 import './FAQ.css'
 
 const FAQ = () => {
-const [activeIndex, setActiveIndex] = useState(null);
+  const [activeIndex, setActiveIndex] = useState(null);
 
- const faqData = [
-  {
-    question: "What is CryptoHub?",
-    answer:
-      "CryptoHub is a platform for real-time crypto tracking, market insights, and portfolio management."
-  },
-  {
-    question: "Is CryptoHub free to use?",
-    answer:
-      "Yes, CryptoHub offers a free plan. Premium features are available with paid plans."
-  },
-  {
-    question: "Where does CryptoHub get its data?",
-    answer:
-      "We fetch data from trusted crypto market APIs to ensure accurate and real-time updates."
-  },
-  {
-    question: "Can I track my portfolio?",
-    answer:
-      "Yes, you can create and manage your crypto portfolio directly on CryptoHub."
-  },
-  {
-    question: "Is my data secure?",
-    answer:
-      "Yes. We use industry-standard security practices to protect user data."
-  }
-];
-const toogleFAQ=(idx)=>{
+  const faqData = [
+    {
+      question: "What is CryptoHub?",
+      answer:
+        "CryptoHub is a platform for real-time crypto tracking, market insights, and portfolio management."
+    },
+    {
+      question: "Is CryptoHub free to use?",
+      answer:
+        "Yes, CryptoHub offers a free plan. Premium features are available with paid plans."
+    },
+    {
+      question: "Where does CryptoHub get its data?",
+      answer:
+        "We fetch data from trusted crypto market APIs to ensure accurate and real-time updates."
+    },
+    {
+      question: "Can I track my portfolio?",
+      answer:
+        "Yes, you can create and manage your crypto portfolio directly on CryptoHub."
+    },
+    {
+      question: "Is my data secure?",
+      answer:
+        "Yes. We use industry-standard security practices to protect user data."
+    }
+  ];
+  const toogleFAQ = (idx) => {
     setActiveIndex(activeIndex === idx ? null : idx);
-}
+  }
   return (
     <div className="faq-page">
-        <div className="faq-title">Frequently Asked Questions</div>
-        <p className="faq-subtitle" >Find quick answers about CryptoHub and how it works.</p>
-
-        <div className="faq-container">
-            {faqData.map((item,idx)=>(
-                <div key={idx} className={`faq-item ${activeIndex === idx ? "active" : ""}`}>
-                    
-                    <button className="faq-question" onClick={()=>toogleFAQ(idx)}>{item.question}</button>
-                   <div
-                    className={`faq-answer ${activeIndex === idx ? "show" : ""}`}
-                    >
-                    {item.answer}
-                    </div>
+      <div className="faq-title">Frequently Asked Questions</div>
+      <p className="faq-subtitle" >Find quick answers about CryptoHub and how it works.</p>
 
-                </div>
-            ))}
-        </div>
+      <div className="faq-container">
+        {faqData.map((item, idx) => (
+          <div key={idx} className={`faq-item ${activeIndex === idx ? "active" : ""}`}>
+            <button
+              className="faq-question"
+              onClick={() => toogleFAQ(idx)}
+              aria-expanded={activeIndex === idx}
+              aria-controls={`faq-answer-${idx}`}
+            >
+              {item.question}
+            </button>
+            <div
+              id={`faq-answer-${idx}`}
+              className={`faq-answer ${activeIndex === idx ? "show" : ""}`}
+              role="region"
+            >
+              {item.answer}
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
diff --git a/src/components/Sections/Pricing.jsx b/src/components/Sections/Pricing.jsx
index ea3cc60..2036f19 100644
--- a/src/components/Sections/Pricing.jsx
+++ b/src/components/Sections/Pricing.jsx
@@ -139,7 +139,7 @@ export default function Pricing() {
             whileHover={{ scale: 1.05 }}
             transition={{ type: "spring" }}
           >
-            <FiTrendingUp className="text-purple-400 w-5 h-5" />
+            <FiTrendingUp className="text-purple-400 w-5 h-5" aria-hidden="true" />
             <span className="text-sm font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
               Trusted by 10K+ Traders
             </span>
@@ -178,7 +178,7 @@ export default function Pricing() {
                 onClick={toggleBillingCycle}
                 whileTap={{ scale: 0.95 }}
                 whileHover={{ scale: 1.05 }}
-                aria-label="Toggle billing cycle"
+                aria-label={`Switch to ${billingCycle === "monthly" ? "yearly" : "monthly"} billing`}
               >
                 <motion.div
                   className="absolute top-2 w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full shadow-lg flex items-center justify-center shadow-purple-500/50"
@@ -191,7 +191,7 @@ export default function Pricing() {
                     damping: 25,
                   }}
                 >
-                  <FiZap className="text-white w-5 h-5" />
+                  <FiZap className="text-white w-5 h-5" aria-hidden="true" />
                 </motion.div>
               </motion.button>
 
@@ -252,7 +252,7 @@ export default function Pricing() {
                       className="absolute -top-6 left-1/2 -translate-x-1/2 bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-8 py-3 rounded-full text-sm font-bold shadow-2xl whitespace-nowrap"
                       whileHover={{ scale: 1.05, y: -2 }}
                     >
-                      <FiStar className="inline mr-2 -mt-1 w-4 h-4" />
+                      <FiStar className="inline mr-2 -mt-1 w-4 h-4" aria-hidden="true" />
                       Most Popular
                     </motion.div>
                   )}
@@ -278,22 +278,20 @@ export default function Pricing() {
                     {plan.features.map((feature, i) => (
                       <motion.div
                         key={i}
-                        className={`flex items-center gap-4 py-1 rounded-xl transition-all duration-300 group/feature hover:bg-white/50 dark:hover:bg-gray-800/50 ${
-                          feature.available ? "" : "opacity-60"
-                        }`}
+                        className={`flex items-center gap-4 py-1 rounded-xl transition-all duration-300 group/feature hover:bg-white/50 dark:hover:bg-gray-800/50 ${feature.available ? "" : "opacity-60"
+                          }`}
                         whileHover={{ paddingLeft: "2.5rem" }}
                       >
                         <div
-                          className={`w-7 h-7 rounded-xl flex items-center justify-center shadow-lg shrink-0 ${
-                            feature.available
+                          className={`w-7 h-7 rounded-xl flex items-center justify-center shadow-lg shrink-0 ${feature.available
                               ? "bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-emerald-500/40"
                               : "bg-gray-200/50 dark:bg-gray-700/50 text-gray-400 border-2 border-gray-300/50 dark:border-gray-600/50"
-                          }`}
+                            }`}
                         >
                           {feature.available ? (
-                            <FiCheck className="w-6 h-6" />
+                            <FiCheck className="w-6 h-6" aria-hidden="true" />
                           ) : (
-                            <FiX className="w-6 h-6" />
+                            <FiX className="w-6 h-6" aria-hidden="true" />
                           )}
                         </div>
                         <span className="font-medium text-gray-900 dark:text-white">
@@ -305,11 +303,10 @@ export default function Pricing() {
 
                   {/* CTA Button */}
                   <motion.button
-                    className={`w-full py-6 px-8 rounded-2xl font-bold text-lg uppercase tracking-wider shadow-2xl transition-all duration-300 overflow-hidden relative ${
-                      plan.highlight
+                    className={`w-full py-6 px-8 rounded-2xl font-bold text-lg uppercase tracking-wider shadow-2xl transition-all duration-300 overflow-hidden relative ${plan.highlight
                         ? "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-purple-500/40 hover:shadow-purple-500/60 hover:-translate-y-1"
                         : "bg-gray-700 dark:bg-gray-700 text-gray-900 dark:text-white border-2 border-gray-200/50 dark:border-gray-600/50 hover:bg-gray-800 dark:hover:bg-gray-900"
-                    }`}
+                      }`}
                     onClick={() => handlePlanClick(plan.name)}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.98 }}
@@ -318,7 +315,7 @@ export default function Pricing() {
                       {plan.name === "Explorer"
                         ? "Get Started Free"
                         : "Upgrade Now"}
-                      <FiArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                      <FiArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
                     </span>
                   </motion.button>
                 </div>
@@ -452,7 +449,7 @@ export default function Pricing() {
                       animate={{ rotate: openFaqIndex === index ? 90 : 0 }}
                       transition={{ duration: 0.3 }}
                     >
-                      <FiPlus className="w-7 h-7 text-gray-100" />
+                      <FiPlus className="w-7 h-7 text-gray-100" aria-hidden="true" />
                     </motion.div>
                   </div>
                 </motion.button>