feat: improve accessibility (A11y) for interactive UI elements

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"

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"

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>

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,15 +100,15 @@ 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>
                           Premium
                         </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" />

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>

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

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>

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>
   )
 }