@telus-uds/components-base 1.83.0 → 1.84.0

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { View } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
@@ -46,10 +46,12 @@ const ExpandCollapse = forwardRef(
     const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant)
 
     return (
-      <View ref={ref} style={selectBorderStyles(themeTokens)} {...selectProps(rest)}>
-        {typeof children === 'function'
-          ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
-          : children}
+      <View style={staticStyles.container} ref={ref} {...selectProps(rest)}>
+        <View style={selectBorderStyles(themeTokens)}>
+          {typeof children === 'function'
+            ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
+            : children}
+        </View>
       </View>
     )
   }
@@ -86,3 +88,9 @@ ExpandCollapse.propTypes = {
 }
 
 export default ExpandCollapse
+
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+})

package/src/ExpandCollapse/Panel.jsx

@@ -11,9 +11,12 @@ import {
   selectSystemProps,
   useVerticalExpandAnimation,
   variantProp,
-  viewProps
+  viewProps,
+  useCopy
 } from '../utils'
 
+import dictionary from './dictionary'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // just void functions for now, since there are no style tokens for a panel or control at this point
@@ -92,12 +95,14 @@ const ExpandCollapsePanel = forwardRef(
       variant,
       controlRef,
       content,
+      copy = 'en',
       ...rest
     },
     ref
   ) => {
     const [containerHeight, setContainerHeight] = useState(null)
     const isExpanded = openIds.includes(panelId)
+    const getCopy = useCopy({ dictionary, copy })
 
     const selectedProps = selectProps({
       ...rest,
@@ -130,16 +135,28 @@ const ExpandCollapsePanel = forwardRef(
     })
 
     const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
+
+    const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`
+    const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`
+
     return content ? (
-      <View style={selectContentPanelStyles(themeTokens)}>
+      <View
+        style={selectContentPanelStyles(themeTokens)}
+        accessibilityLabel={panelAccessibilityLabel}
+      >
         {typeof children === 'string' ? (
-          <Text style={selectTextStyles(themeTokens)}>{children}</Text>
+          <Text
+            style={selectTextStyles(themeTokens)}
+            accessibilityLabel={subPanelAccessibilityLabel}
+          >
+            {children}
+          </Text>
         ) : (
           children
         )}
       </View>
     ) : (
-      <View ref={ref} style={themeTokens}>
+      <View ref={ref} style={themeTokens} accessibilityLabel={panelAccessibilityLabel}>
         <View style={selectControlPanelStyles(themeTokens)}>
           <ExpandCollapseControl
             {...selectedProps}
@@ -174,7 +191,12 @@ const ExpandCollapsePanel = forwardRef(
               })
             }}
           >
-            <View style={selectContainerStyles(themeTokens)}>{children}</View>
+            <View
+              style={selectContainerStyles(themeTokens)}
+              accessibilityLabel={subPanelAccessibilityLabel}
+            >
+              {children}
+            </View>
           </View>
         </Animated.View>
       </View>

package/src/ExpandCollapse/dictionary.js

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    panel: 'Panel',
+    subPanel: 'SubPanel'
+  },
+  fr: {
+    panel: 'Panneau',
+    subPanel: 'Sous-Panneau'
+  }
+}

package/src/Icon/IconText.jsx

@@ -31,8 +31,10 @@ const IconText = forwardRef(
      */
     const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0
 
-    const iconAdjustedAndriod = (
-      <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
+    const iconAdjustedAndroid = (
+      <View style={{ transform: [{ translateY: valueTranslateY ? size * 0.2 : size * 0.01 }] }}>
+        {iconContent}
+      </View>
     )
 
     const iconAdjustedIOS = (
@@ -41,7 +43,7 @@ const IconText = forwardRef(
       </View>
     )
 
-    const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS
+    const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS
     const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile
 
     return getStackedContent(

package/src/Modal/WebModal.jsx

@@ -16,7 +16,10 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const WebModal = ({ children, ...rest }) => {
   return (
     <View style={staticStyles.container} {...selectProps(rest)}>
-      <View style={staticStyles.content}>{children}</View>
+      {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-role */}
+      <View style={staticStyles.content} accessibilityRole="dialog">
+        {children}
+      </View>
     </View>
   )
 }
@@ -46,14 +49,15 @@ const staticStyles = StyleSheet.create({
     minHeight: 0,
     minWidth: 0,
     padding: 0,
-    textDecoration: 'none',
-    zIndex: 1
+    textDecorationLine: 'none',
+    zIndex: 1000
   },
   content: {
     flex: 1,
     flexGrow: 1,
     flexShrink: 1,
-    flexBasis: 0
+    flexBasis: 0,
+    zIndex: 1000
   }
 })