sonarqube fixes regarding unnecessary tabindexes and roles

src/components/sections/AboutSection.tsx

@@ -112,7 +112,6 @@ export default function AboutSection(props: AboutSectionProps = {}) {
                 <article
                   key={index}
                   className={`about-section__feature-card about-section__feature-card--${card.colorClass}`}
-                  tabIndex={0}
                   role="group"
                   aria-labelledby={`feature-${index}-title`}
                   aria-describedby={`feature-${index}-description`}

src/components/sections/CertificationsSection.tsx

@@ -51,7 +51,7 @@ export default function CertificationsSection(props: CertificationsSectionProps
 
   // Sort certifications by year in descending order (newest first)
   const sortedCertifications = [...certifications].sort((a, b) => {
-    return parseInt(b.year) - parseInt(a.year);
+    return Number.parseInt(b.year) - Number.parseInt(a.year);
   });
 
   return (
@@ -92,7 +92,6 @@ export default function CertificationsSection(props: CertificationsSectionProps
             <article
               key={index}
               className="certifications-section__card"
-              tabIndex={0}
               role="group"
               aria-labelledby={`cert-${index}-title`}
               aria-describedby={`cert-${index}-details`}

src/components/sections/ContactSection.tsx

@@ -137,7 +137,7 @@ export default function ContactSection(props: ContactSectionProps = {}) {
           </div>
 
           {/* Contact Info Sidebar */}
-          <aside className="contact-section__sidebar" role="complementary" aria-labelledby="info-heading">
+          <aside className="contact-section__sidebar" aria-labelledby="info-heading">
             <div className="contact-section__info-card">
               <h3 id="info-heading" className="sr-only">Contact Information</h3>
 

src/components/sections/HeroSection.tsx

@@ -143,13 +143,12 @@ export default function HeroSection(props: HeroSectionProps = {}) {
           This will download my current resume in PDF format
         </div>
 
-        <aside className="hero-section__stats" role="complementary" aria-labelledby="stats-heading">
+        <aside className="hero-section__stats" aria-labelledby="stats-heading">
           <h2 id="stats-heading" className="sr-only">Professional Statistics</h2>
           {statItems.map((item, index) => (
             <div
               key={item.label}
               className={`hero-section__stat-item hero-section__stat-item--${index + 1}`}
-              role="group"
               aria-labelledby={`stat-${index}-label`}
             >
               <span

src/components/sections/ProjectsSection.tsx

@@ -232,8 +232,6 @@ export default function ProjectsSection(props: ProjectsSectionProps = {}) {
                 key={project.id}
                 className={`projects-section__card ${isActive ? 'projects-section__card--active' : ''}`}
                 ref={(el) => { cardRefs.current[cardIndex] = el; }}
-                tabIndex={0}
-                role="gridcell"
                 aria-expanded={isActive}
                 aria-describedby={`project-${project.id}-description project-${project.id}-metadata`}
                 aria-label={`Project card: ${project.title}. ${cardIndex + 1} of ${projects.length}`}

src/components/sections/SkillsSection.tsx

@@ -125,7 +125,6 @@ export default function SkillsSection(props: SkillsSectionProps = {}) {
                 className={`skills-section__category skills-section__category--${colorClass}`}
                 role="group"
                 aria-labelledby={`category-${categoryIndex}-title`}
-                tabIndex={0}
               >
                 <header className="skills-section__category-header">
                   <h3
@@ -152,7 +151,6 @@ export default function SkillsSection(props: SkillsSectionProps = {}) {
                         key={skillItem.skill}
                         className="skills-section__skill-item"
                         role="listitem"
-                        tabIndex={0}
                         aria-label={`${skillItem.skill}: ${displayLevel} level`}
                       >
                         <div className="skills-section__skill-header">

src/scss/sections/contact-section.scss

@@ -115,7 +115,6 @@
   &__social-title {
     font-size: 1.125rem;
     font-weight: 600;
-    margin-bottom: 1rem;
     color: var(--color-text);
     margin-bottom: var(--card-padding-sm);
   }