From d5403a712a63a24b7f84717734976ce5294ecc3a Mon Sep 17 00:00:00 2001
From: josef <josef.aidt@gmail.com>
Date: Thu, 20 Jun 2024 12:08:14 -0500
Subject: [PATCH] add a utility to convert tab names with spaces to dashes, fix
 a11y check for aria-controls (#7766)

* add a utility to convert tab names with spaces to dashes, fix a11y check for aria-controls

* add unique ID to name conversion

* Update src/components/BlockSwitcher/BlockSwitcher.tsx

* Update src/components/BlockSwitcher/BlockSwitcher.tsx
---
 .../BlockSwitcher/BlockSwitcher.tsx           | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/BlockSwitcher/BlockSwitcher.tsx b/src/components/BlockSwitcher/BlockSwitcher.tsx
index 3509caa567b..6353d1a7021 100644
--- a/src/components/BlockSwitcher/BlockSwitcher.tsx
+++ b/src/components/BlockSwitcher/BlockSwitcher.tsx
@@ -1,4 +1,4 @@
-import { Children } from 'react';
+import { Children, useId } from 'react';
 import { View, Tabs } from '@aws-amplify/ui-react';
 import { BlockProps } from './Block';
 
@@ -10,17 +10,30 @@ export const BlockSwitcherErrorMessage =
   'BlockSwitcher requires more than one block element';
 
 export const BlockSwitcher = ({ children }: BlockSwitcherProps) => {
+  const uniqueId = useId();
+
   if (!children.length || children.length <= 1) {
     throw new Error(BlockSwitcherErrorMessage);
   }
+
+  /**
+   * convert names with spaces to valid ID attribute values
+   */
+  const convertNameToValue = (name: string) => {
+    return `${name.split(' ').join('-').toLowerCase()}-${uniqueId}`;
+  };
+
   return (
     <View className="block-switcher">
-      <Tabs.Container defaultValue={children[0].props.name}>
+      <Tabs.Container defaultValue={convertNameToValue(children[0].props.name)}>
         <Tabs.List>
           {Children.map(children, (child, index) => {
             return (
               child.props.name && (
-                <Tabs.Item value={child.props.name} key={index}>
+                <Tabs.Item
+                  value={convertNameToValue(child.props.name)}
+                  key={index}
+                >
                   {child.props.name}
                 </Tabs.Item>
               )
@@ -30,7 +43,10 @@ export const BlockSwitcher = ({ children }: BlockSwitcherProps) => {
         {Children.map(children, (child, index) => {
           return (
             child.props.name && (
-              <Tabs.Panel value={child.props.name} key={index}>
+              <Tabs.Panel
+                value={convertNameToValue(child.props.name)}
+                key={index}
+              >
                 {child}
               </Tabs.Panel>
             )