fix: missing props passed to tag causing aria issue

varianter · Dec 18, 2024 · 3ecb32d · 3ecb32d
1 parent 7f60d86
commit 3ecb32d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git 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,41 +23,40 @@ 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;
   }
 
   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
@@ -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
@@ -54,6 +54,7 @@ export const Tag = ({
         className={className}
         style={{ cursor: "pointer" }}
         onClick={props.onClick}
+        {...props}
       >
         <Text type="labelRegular">{text}</Text>
       </button>