feat(theme-classic): allow passing additional attributes to tab headings (#6082)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -516,6 +516,7 @@ declare module '@theme/TabItem' {
     readonly label?: string;
     readonly hidden?: boolean;
     readonly className?: string;
+    readonly attributes?: Record<string, unknown>;
   }
 
   const TabItem: (props: Props) => JSX.Element;
@@ -531,7 +532,11 @@ declare module '@theme/Tabs' {
     readonly block?: boolean;
     readonly children: readonly ReactElement<TabItemProps>[];
     readonly defaultValue?: string | null;
-    readonly values?: readonly {value: string; label?: string}[];
+    readonly values?: readonly {
+      value: string;
+      label?: string;
+      attributes?: Record<string, unknown>;
+    }[];
     readonly groupId?: string;
     readonly className?: string;
   }

packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx

@@ -51,7 +51,13 @@ function TabsComponent(props: Props): JSX.Element {
     );
   });
   const values =
-    valuesProp ?? children.map(({props: {value, label}}) => ({value, label}));
+    valuesProp ??
+    // We only pick keys that we recognize. MDX would inject some keys by default
+    children.map(({props: {value, label, attributes}}) => ({
+      value,
+      label,
+      attributes,
+    }));
   const dup = duplicates(values, (a, b) => a.value === b.value);
   if (dup.length > 0) {
     throw new Error(
@@ -144,19 +150,25 @@ function TabsComponent(props: Props): JSX.Element {
           },
           className,
         )}>
-        {values.map(({value, label}) => (
+        {values.map(({value, label, attributes}) => (
           <li
             role="tab"
             tabIndex={selectedValue === value ? 0 : -1}
             aria-selected={selectedValue === value}
-            className={clsx('tabs__item', styles.tabItem, {
-              'tabs__item--active': selectedValue === value,
-            })}
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
             onFocus={handleTabChange}
-            onClick={handleTabChange}>
+            onClick={handleTabChange}
+            {...attributes}
+            className={clsx(
+              'tabs__item',
+              styles.tabItem,
+              attributes?.className as string,
+              {
+                'tabs__item--active': selectedValue === value,
+              },
+            )}>
             {label ?? value}
           </li>
         ))}