From 30fbe560623d91348ddc831affa047385eb6c08a Mon Sep 17 00:00:00 2001
From: Bashamega <adambashaahmednaji@gmail.com>
Date: Fri, 11 Oct 2024 19:00:57 +0300
Subject: [PATCH 1/3] fix(.\components\tablist\tab-list.tsx): fixes a11y rule
 "interactive-supports-focus" warning

The changes include adding tabIndex={0} to elements with role="tab" to ensure they are focusable for
keyboard navigation, addressing the accessibility warning (jsx-a11y/interactive-supports-focus).
Additionally, an onKeyDown handler was introduced to allow keyboard interaction, enabling users to
select tabs using the Enter or Space keys. These changes improve both accessibility and user
experience by making the tabs keyboard-accessible.

fixes #4138
---
 components/TabList/tab-list.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/TabList/tab-list.tsx b/components/TabList/tab-list.tsx
index 46b0017a31..afb6f86ea1 100644
--- a/components/TabList/tab-list.tsx
+++ b/components/TabList/tab-list.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-
 import { useRouter } from "next/router";
 import Link from "next/link";
 import clsx from "clsx";
@@ -25,6 +24,7 @@ interface SubTabsListProps extends TabListProps {
 const TabList = ({ tabList, pageId, selectedTab }: TabListProps) => {
   const router = useRouter();
   const range = router.query.range ? Number(router.query.range) : 30;
+
   return (
     <nav
       role="tablist"
@@ -37,13 +37,14 @@ const TabList = ({ tabList, pageId, selectedTab }: TabListProps) => {
           role="tab"
           aria-selected={selectedTab === tab.name.toLowerCase() ? "true" : "false"}
           data-state={selectedTab === tab.name.toLowerCase() ? "active" : "inactive"}
-          tabIndex={-1}
+          tabIndex={0} // Added tabIndex for accessibility
           key={index}
-          className={`tool-list-item border-b-2 transition-all ease-in-out ${
+          className={clsx(
+            "tool-list-item border-b-2 transition-all ease-in-out",
             selectedTab === tab.name.toLowerCase()
               ? "border-orange-500"
               : "border-transparent hover:border-light-slate-8"
-          }`}
+          )}
         >
           <TabListItem
             tab={tab}
@@ -74,9 +75,15 @@ export const SubTabsList = ({ tabList, pageId, selectedTab, label, textSize, onS
             role="tab"
             aria-selected={isSelected ? "true" : "false"}
             data-state={isSelected ? "active" : "inactive"}
+            tabIndex={0} // Added tabIndex for accessibility
             key={index}
             className={clsx(isSelected && "bg-white shadow", "rounded py-1 px-2", !isSelected && "text-light-slate-11")}
             onClick={onSelect ? () => onSelect(tab) : undefined}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                onSelect?.(tab);
+              }
+            }} // Added keyboard interaction for Enter/Space keys
           >
             {onSelect ? tab.name : <Link href={`${pageId ? `${pageId}/` : ""}${tab.path}`}>{tab.name}</Link>}
           </div>

From 4ed2d7466914100b379894839509f1be17596548 Mon Sep 17 00:00:00 2001
From: Adam Basha <110662505+Bashamega@users.noreply.github.com>
Date: Sun, 20 Oct 2024 16:54:30 +0300
Subject: [PATCH 2/3] Update components/TabList/tab-list.tsx

Co-authored-by: Nick Taylor <nick@nickyt.co>
---
 components/TabList/tab-list.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/TabList/tab-list.tsx b/components/TabList/tab-list.tsx
index afb6f86ea1..138659b164 100644
--- a/components/TabList/tab-list.tsx
+++ b/components/TabList/tab-list.tsx
@@ -37,7 +37,6 @@ const TabList = ({ tabList, pageId, selectedTab }: TabListProps) => {
           role="tab"
           aria-selected={selectedTab === tab.name.toLowerCase() ? "true" : "false"}
           data-state={selectedTab === tab.name.toLowerCase() ? "active" : "inactive"}
-          tabIndex={0} // Added tabIndex for accessibility
           key={index}
           className={clsx(
             "tool-list-item border-b-2 transition-all ease-in-out",

From c8d5121f9e3b417bda041c95243c15669993ebaf Mon Sep 17 00:00:00 2001
From: Adam Basha <110662505+Bashamega@users.noreply.github.com>
Date: Sun, 20 Oct 2024 16:54:36 +0300
Subject: [PATCH 3/3] Update components/TabList/tab-list.tsx

Co-authored-by: Nick Taylor <nick@nickyt.co>
---
 components/TabList/tab-list.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/TabList/tab-list.tsx b/components/TabList/tab-list.tsx
index 138659b164..b67fc441a3 100644
--- a/components/TabList/tab-list.tsx
+++ b/components/TabList/tab-list.tsx
@@ -74,7 +74,6 @@ export const SubTabsList = ({ tabList, pageId, selectedTab, label, textSize, onS
             role="tab"
             aria-selected={isSelected ? "true" : "false"}
             data-state={isSelected ? "active" : "inactive"}
-            tabIndex={0} // Added tabIndex for accessibility
             key={index}
             className={clsx(isSelected && "bg-white shadow", "rounded py-1 px-2", !isSelected && "text-light-slate-11")}
             onClick={onSelect ? () => onSelect(tab) : undefined}