From 3ecb32d585c8f99e3a3815bd3c9fce3ff25667df Mon Sep 17 00:00:00 2001
From: Mikael Brevik <mikaelbre@gmail.com>
Date: Wed, 18 Dec 2024 11:15:29 +0100
Subject: [PATCH] fix: missing props passed to tag causing aria issue

---
 .../sections/contact-box/ContactSelector.tsx  | 44 +++++++++----------
 .../contact-box/contact-box.module.css        |  5 +++
 src/components/tag/index.tsx                  |  1 +
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/components/sections/contact-box/ContactSelector.tsx b/src/components/sections/contact-box/ContactSelector.tsx
index 5bdb25905..e48b4fb1f 100644
--- a/src/components/sections/contact-box/ContactSelector.tsx
+++ b/src/components/sections/contact-box/ContactSelector.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { use, useState } from "react";
+import { use } from "react";
 
 import EmployeeCard from "src/components/employeeCard/EmployeeCard";
 import { Tag } from "src/components/tag";
+import useTabs from "src/utils/hooks/useTabs";
 
 import styles from "./contact-box.module.css";
 import { EmployeeAndMetadata } from "./types";
@@ -22,10 +23,7 @@ export default function ContactSelector({
   background = "dark",
 }: ContactSelectorProps) {
   const contactPoints = use(contactPointsPromise);
-
-  const [selectedTag, setSelectedTag] = useState<string | null>(
-    contactPoints[0]?.tagSlug,
-  );
+  const { tabListRef, selectedTabIndex } = useTabs();
 
   if (!contactPoints.length) {
     return null;
@@ -33,30 +31,32 @@ export default function ContactSelector({
 
   return (
     <div className={styles.contactSelector}>
-      <div className={styles.tagList} role="tablist">
-        {contactPoints.map((contactPoint) => (
-          <Tag
-            key={contactPoint.tagSlug}
-            type="button"
-            role="tab"
-            background={background}
-            aria-selected={selectedTag === contactPoint.tagSlug}
-            aria-controls={`panel-${contactPoint.tagSlug}`}
-            id={`tab-${contactPoint.tagSlug}`}
-            active={selectedTag === contactPoint.tagSlug}
-            onClick={() => setSelectedTag(contactPoint.tagSlug)}
-            text={contactPoint.tag}
-          />
+      <ul className={styles.tagList} role="tablist" ref={tabListRef}>
+        {contactPoints.map((contactPoint, index) => (
+          <li key={contactPoint.tagSlug}>
+            <Tag
+              type="button"
+              role="tab"
+              background={background}
+              aria-selected={selectedTabIndex === index}
+              aria-controls={`panel-${contactPoint.tagSlug}`}
+              id={`tab-${contactPoint.tagSlug}`}
+              active={selectedTabIndex === index}
+              text={contactPoint.tag}
+              tabIndex={selectedTabIndex === index ? 0 : -1}
+            />
+          </li>
         ))}
-      </div>
+      </ul>
       <div className={styles.employeeCard}>
-        {contactPoints.map((contactPoint) => (
+        {contactPoints.map((contactPoint, index) => (
           <div
             key={contactPoint.tagSlug}
             role="tabpanel"
             id={`panel-${contactPoint.tagSlug}`}
             aria-labelledby={`tab-${contactPoint.tagSlug}`}
-            hidden={selectedTag !== contactPoint.tagSlug}
+            hidden={selectedTabIndex !== index}
+            tabIndex={selectedTabIndex === index ? 0 : -1}
           >
             <EmployeeCard
               employee={contactPoint.employee}
diff --git a/src/components/sections/contact-box/contact-box.module.css b/src/components/sections/contact-box/contact-box.module.css
index 276f8e179..4ac3c4ac7 100644
--- a/src/components/sections/contact-box/contact-box.module.css
+++ b/src/components/sections/contact-box/contact-box.module.css
@@ -61,6 +61,11 @@
 
   align-items: flex-start;
   min-width: 120px;
+  margin: 0;
+  padding: 0;
+}
+.tagList li {
+  list-style: none;
 }
 
 .employeeCard {
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
index 97b093457..efc872b6c 100644
--- a/src/components/tag/index.tsx
+++ b/src/components/tag/index.tsx
@@ -54,6 +54,7 @@ export const Tag = ({
         className={className}
         style={{ cursor: "pointer" }}
         onClick={props.onClick}
+        {...props}
       >
         <Text type="labelRegular">{text}</Text>
       </button>