From 64605b2d9b4859489c93ce5d78ec691665de9362 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 17 Dec 2025 13:38:26 -0600
Subject: [PATCH] Core-1436: Remove spaces from Tabs and tab panel ids

[CORE-1436]
Plus:
Default value for label if panels and labels mismatch
Use ul/li for tablist and tab in tab groups
---
 .../content-group/content-group.tsx           |  2 +-
 src/app/components/tab-group/tab-group.scss   |  1 +
 src/app/components/tab-group/tab-group.tsx    | 24 ++++++++++---------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/app/components/content-group/content-group.tsx b/src/app/components/content-group/content-group.tsx
index 010a91bea..78b4ce90e 100644
--- a/src/app/components/content-group/content-group.tsx
+++ b/src/app/components/content-group/content-group.tsx
@@ -12,7 +12,7 @@ export default function ContentGroup({
     return (
         <div className="content-group">
             {React.Children.map(children, (child, i) => (
-                <Panel label={labels[i]} key={i} active={activeIndex === i}>
+                <Panel label={labels[i] ?? ''} key={i} active={activeIndex === i}>
                     {child}
                 </Panel>
             ))}
diff --git a/src/app/components/tab-group/tab-group.scss b/src/app/components/tab-group/tab-group.scss
index 48f6e16dd..18dea09ae 100644
--- a/src/app/components/tab-group/tab-group.scss
+++ b/src/app/components/tab-group/tab-group.scss
@@ -10,6 +10,7 @@
 
     [role="tablist"] {
         @include tab-group();
+        margin: 0;
 
         [role="tab"] {
             @extend %tab;
diff --git a/src/app/components/tab-group/tab-group.tsx b/src/app/components/tab-group/tab-group.tsx
index 1571b39f5..983319241 100644
--- a/src/app/components/tab-group/tab-group.tsx
+++ b/src/app/components/tab-group/tab-group.tsx
@@ -6,11 +6,10 @@ type TabArgs = {
     label: string;
     selectedLabel: string;
     setSelectedLabel: (s: string) => void;
-    TabTag: keyof JSX.IntrinsicElements;
     analytics: boolean;
 }
 
-function Tab({label, selectedLabel, setSelectedLabel, TabTag, analytics}: TabArgs) {
+function Tab({label, selectedLabel, setSelectedLabel, analytics}: TabArgs) {
     const blurAndSetLabel = React.useCallback(
         (event: React.MouseEvent) => {
             (event as React.MouseEvent<HTMLElement>).currentTarget.blur();
@@ -24,7 +23,7 @@ function Tab({label, selectedLabel, setSelectedLabel, TabTag, analytics}: TabArg
     , [label, selectedLabel]);
 
     return (
-        <TabTag
+        <li
             role="tab"
             id={ariaTabId(label)}
             aria-controls={ariaPanelId(label)}
@@ -35,21 +34,24 @@ function Tab({label, selectedLabel, setSelectedLabel, TabTag, analytics}: TabArg
             data-analytics-link={analytics && !isSelected ? '' : undefined}
         >
             {label}
-        </TabTag>
+        </li>
     );
 }
 
+function removeSpaces(label: string) {
+    return label.replace(/\s/g, '_');
+}
+
 export function ariaTabId(label: string) {
-    return `${label}-tab`;
+    return `${removeSpaces(label)}-tab`;
 }
 
 export function ariaPanelId(label: string) {
-    return `${label}-panel`;
+    return `${removeSpaces(label)}-panel`;
 }
 
 type TabGroupArgs = React.PropsWithChildren<
     Pick<TabArgs, 'selectedLabel' | 'setSelectedLabel'> &
-    Pick<Partial<TabArgs>, 'TabTag'> &
     {
         labels: TabArgs['label'][];
         'data-analytics-nav'?: string;
@@ -58,7 +60,7 @@ type TabGroupArgs = React.PropsWithChildren<
 >
 
 export default function TabGroup({
-    labels, selectedLabel, setSelectedLabel, TabTag='div', children, ...props
+    labels, selectedLabel, setSelectedLabel, children, ...props
 }: TabGroupArgs) {
     const analyticsNav = props['data-analytics-nav'];
     const listLabel = props.listLabel ?? 'Tabs';
@@ -66,7 +68,7 @@ export default function TabGroup({
     return (
         <div className="tab-heading">
             <div className="tabs-and-extras">
-                <div
+                <ul
                   role="tablist"
                   aria-label={listLabel}
                   data-analytics-nav={analyticsNav}
@@ -74,9 +76,9 @@ export default function TabGroup({
                     {labels.map((label) => <Tab
                         key={label}
                         analytics={!!analyticsNav}
-                        {...{label, selectedLabel, setSelectedLabel, TabTag}}
+                        {...{label, selectedLabel, setSelectedLabel}}
                     />)}
-                </div>
+                </ul>
                 {children}
             </div>
             <hr className="tab-baseline" />