From 9a4d7b3869954fe40ee7459e7fbc80e96d3a918d Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 20 Jun 2024 08:10:03 -0700
Subject: [PATCH 1/4] add a utility to convert tab names with spaces to dashes,
 fix a11y check for aria-controls

---
 .../BlockSwitcher/BlockSwitcher.tsx           | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/BlockSwitcher/BlockSwitcher.tsx b/src/components/BlockSwitcher/BlockSwitcher.tsx
index 3509caa567b..cabe61f777e 100644
--- a/src/components/BlockSwitcher/BlockSwitcher.tsx
+++ b/src/components/BlockSwitcher/BlockSwitcher.tsx
@@ -13,14 +13,25 @@ export const BlockSwitcher = ({ children }: BlockSwitcherProps) => {
   if (!children.length || children.length <= 1) {
     throw new Error(BlockSwitcherErrorMessage);
   }
+
+  /**
+   * convert names with spaces to valid aria-controls values
+   */
+  const convertNameToValue = (name: string) => {
+    return name.split(' ').join('-').toLowerCase();
+  };
+
   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 +41,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>
             )

From 61e924e1a411c6e36a014617759c73abd317766d Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Thu, 20 Jun 2024 09:43:53 -0700
Subject: [PATCH 2/4] add unique ID to name conversion

---
 src/components/BlockSwitcher/BlockSwitcher.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/BlockSwitcher/BlockSwitcher.tsx b/src/components/BlockSwitcher/BlockSwitcher.tsx
index cabe61f777e..4e92d27373a 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,6 +10,8 @@ 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);
   }
@@ -18,7 +20,7 @@ export const BlockSwitcher = ({ children }: BlockSwitcherProps) => {
    * convert names with spaces to valid aria-controls values
    */
   const convertNameToValue = (name: string) => {
-    return name.split(' ').join('-').toLowerCase();
+    return `${name.split(' ').join('-').toLowerCase()}-${uniqueId}`;
   };
 
   return (

From 60aa9ead87fcb787a3ec989aaef52bf2a33b4cd1 Mon Sep 17 00:00:00 2001
From: josef <josef.aidt@gmail.com>
Date: Thu, 20 Jun 2024 09:45:19 -0700
Subject: [PATCH 3/4] Update src/components/BlockSwitcher/BlockSwitcher.tsx

---
 src/components/BlockSwitcher/BlockSwitcher.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/BlockSwitcher/BlockSwitcher.tsx b/src/components/BlockSwitcher/BlockSwitcher.tsx
index 4e92d27373a..2ad2705a9bf 100644
--- a/src/components/BlockSwitcher/BlockSwitcher.tsx
+++ b/src/components/BlockSwitcher/BlockSwitcher.tsx
@@ -17,7 +17,7 @@ export const BlockSwitcher = ({ children }: BlockSwitcherProps) => {
   }
 
   /**
-   * convert names with spaces to valid aria-controls values
+   * convert names with spaces to valid aria-controls and ID attribute values
    */
   const convertNameToValue = (name: string) => {
     return `${name.split(' ').join('-').toLowerCase()}-${uniqueId}`;

From d12b954b1d968735787f8206460185b3a46be79d Mon Sep 17 00:00:00 2001
From: josef <josef.aidt@gmail.com>
Date: Thu, 20 Jun 2024 09:45:33 -0700
Subject: [PATCH 4/4] Update src/components/BlockSwitcher/BlockSwitcher.tsx

---
 src/components/BlockSwitcher/BlockSwitcher.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/BlockSwitcher/BlockSwitcher.tsx b/src/components/BlockSwitcher/BlockSwitcher.tsx
index 2ad2705a9bf..6353d1a7021 100644
--- a/src/components/BlockSwitcher/BlockSwitcher.tsx
+++ b/src/components/BlockSwitcher/BlockSwitcher.tsx
@@ -17,7 +17,7 @@ export const BlockSwitcher = ({ children }: BlockSwitcherProps) => {
   }
 
   /**
-   * convert names with spaces to valid aria-controls and ID attribute values
+   * convert names with spaces to valid ID attribute values
    */
   const convertNameToValue = (name: string) => {
     return `${name.split(' ').join('-').toLowerCase()}-${uniqueId}`;