fix(Text): make vivinho char replacement for screen readers work when…

… Text have multiple children (#1090)

WEB-1837 

Before this PR, `<Text>Ħ something</Text>` was working but `<Text>Ħ
{"something"}</Text>` wasn't

src/__tests__/text-test.tsx

@@ -24,6 +24,22 @@ test.each([
     expect(screen.getByRole('link', {name: expected})).toBeInTheDocument();
 });
 
+test('vivinho char replacement works in Texts with multiple children', () => {
+    const someVar = 'something';
+    const vivinhoVar = 'Ħ';
+    render(
+        <ThemeContextProvider theme={makeTheme({skin: getVivoNewSkin()})}>
+            <a href="/">
+                <Text>
+                    Ħ {someVar} {vivinhoVar}
+                </Text>
+            </a>
+        </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('link', {name: 'Vivo something Vivo'})).toBeInTheDocument();
+});
+
 test('vivinho char is only replaced in vivo-new skin', () => {
     render(
         <ThemeContextProvider theme={makeTheme({skin: getMovistarSkin()})}>

src/text.tsx

@@ -41,21 +41,25 @@ const vivinhoForScreenReaders = (
     </>
 );
 
-const makeVivinhoCharReadableForScreenReaders = (text: string): React.ReactNode => {
-    if (text.includes(VIVINHO_CHAR)) {
+const makeVivinhoCharReadableForScreenReaders = (children: React.ReactNode): React.ReactNode => {
+    return React.Children.map(children, (child) => {
+        if (typeof child !== 'string') {
+            return child;
+        }
+        if (!child.includes(VIVINHO_CHAR)) {
+            return child;
+        }
         return (
             <>
-                {text.split(VIVINHO_CHAR).map((segment, idx) => (
+                {child.split(VIVINHO_CHAR).map((segment, idx) => (
                     <React.Fragment key={idx}>
                         {idx > 0 && vivinhoForScreenReaders}
                         {segment}
                     </React.Fragment>
                 ))}
             </>
         );
-    } else {
-        return text;
-    }
+    });
 };
 
 export interface TextPresetProps {
@@ -172,9 +176,7 @@ export const Text: React.FC<TextProps> = ({
                 textShadow,
             },
         },
-        typeof children === 'string' && skinName === VIVO_NEW_SKIN
-            ? makeVivinhoCharReadableForScreenReaders(children)
-            : children
+        skinName === VIVO_NEW_SKIN ? makeVivinhoCharReadableForScreenReaders(children) : children
     );
 };