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 (
{React.Children.map(children, (child, i) => (
-
+
{child}
))}
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).currentTarget.blur();
@@ -24,7 +23,7 @@ function Tab({label, selectedLabel, setSelectedLabel, TabTag, analytics}: TabArg
, [label, selectedLabel]);
return (
-
{label}
-
+
);
}
+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 &
- Pick, '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 (