@telus-uds/components-base 3.29.0 → 3.29.1

package/src/StackView/getStackedContent.jsx

@@ -32,7 +32,7 @@ import Spacer from '../Spacer'
  */
 const getStackedContent = (
   children,
-  { divider, space, direction = 'column', box, preserveFragments = false }
+  { divider, space, direction = 'column', box, preserveFragments = false, itemAccessibilityRole }
 ) => {
   const boxProps = box && typeof box === 'object' ? box : { space }
   const dividerProps = divider && typeof divider === 'object' ? divider : {}
@@ -42,15 +42,29 @@ const getStackedContent = (
   const validChildren = React.Children.toArray(topLevelChildren).filter(Boolean)
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`
-    const item = box ? (
+
+    let item
+    if (box) {
       // If wrapped in Box, that Box needs a key.
       // If possible, use an existing content key; use an index-based key only if necessary.
-      <Box {...boxProps} key={child.key || boxID} testID={boxID}>
-        {child}
-      </Box>
-    ) : (
-      child
-    )
+      item = (
+        <Box
+          {...boxProps}
+          accessibilityRole={itemAccessibilityRole}
+          key={child.key || boxID}
+          testID={boxID}
+        >
+          {child}
+        </Box>
+      )
+    } else if (itemAccessibilityRole) {
+      item = React.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      })
+    } else {
+      item = child
+    }
     if (!index || (!space && !divider)) return [...newChildren, item]
 
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`