@telus-uds/components-base 1.82.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/Listbox/Listbox.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -25,119 +25,126 @@ const getInitialOpen = (items, selectedId) =>
     )
     .map((item) => item.id ?? item.label)
 
-const Listbox = ({
-  items = [],
-  firstItemRef = null, // focus will be moved to this one once within the menu
-  parentRef = null, // to return focus to after leaving the last menu item
-  selectedId: defaultSelectedId,
-  LinkRouter,
-  itemRouterProps,
-  onClose,
-  variant,
-  tokens
-}) => {
-  const initialOpen = getInitialOpen(items, defaultSelectedId)
+const Listbox = forwardRef(
+  (
+    {
+      items = [],
+      firstItemRef = null, // focus will be moved to this one once within the menu
+      parentRef = null, // to return focus to after leaving the last menu item
+      selectedId: defaultSelectedId,
+      LinkRouter,
+      itemRouterProps,
+      onClose,
+      variant,
+      tokens
+    },
+    ref
+  ) => {
+    const initialOpen = getInitialOpen(items, defaultSelectedId)
 
-  const [selectedId, setSelectedId] = useState(defaultSelectedId)
+    const [selectedId, setSelectedId] = useState(defaultSelectedId)
 
-  const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
+    const { minHeight, minWidth } = useThemeTokens('Listbox', variant, tokens)
 
-  // We need to keep track of each item's ref in order to be able to
-  // focus on a specific item via keyboard navigation
-  const itemRefs = useRef([])
-  if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
-  const [focusedIndex, setFocusedIndex] = useState(0)
-  const handleKeydown = useCallback(
-    (event) => {
-      const nextItemRef = itemRefs.current[focusedIndex + 1]
-      const prevItemRef = itemRefs.current[focusedIndex - 1]
-      if (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) {
-        // Move the focus to the previous item or to the parent one if on the first
-        if (prevItemRef) {
+    // We need to keep track of each item's ref in order to be able to
+    // focus on a specific item via keyboard navigation
+    const itemRefs = useRef([])
+    if (firstItemRef?.current) itemRefs.current[0] = firstItemRef.current
+    const [focusedIndex, setFocusedIndex] = useState(0)
+    const handleKeydown = useCallback(
+      (event) => {
+        const nextItemRef = itemRefs.current[focusedIndex + 1]
+        const prevItemRef = itemRefs.current[focusedIndex - 1]
+        if (event.key === 'ArrowUp' || (event.shiftKey && event.key === 'Tab')) {
+          // Move the focus to the previous item or to the parent one if on the first
+          if (prevItemRef) {
+            event.preventDefault()
+            prevItemRef.focus()
+          } else if (parentRef) parentRef.current?.focus()
+          setFocusedIndex(focusedIndex - 1)
+        } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
           event.preventDefault()
-          prevItemRef.focus()
-        } else if (parentRef) parentRef.current?.focus()
-        setFocusedIndex(focusedIndex - 1)
-      } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
-        event.preventDefault()
-        setFocusedIndex(focusedIndex + 1)
-        nextItemRef.focus()
-      } else if (event.key === 'Escape') {
-        // Close the dropdown
-        parentRef?.current?.click()
-        // Return focus to the dropdown control after leaving the last item
-        parentRef?.current?.focus()
-        if (onClose) onClose(event)
-      } else if (!nextItemRef && firstItemRef) {
-        // If the last item is focused, move the focus to the first one
-        event.preventDefault()
-        setFocusedIndex(0)
-        firstItemRef.current?.focus()
-      }
-    },
-    [focusedIndex, onClose, parentRef, firstItemRef]
-  )
+          setFocusedIndex(focusedIndex + 1)
+          nextItemRef.focus()
+        } else if (event.key === 'Escape') {
+          // Close the dropdown
+          parentRef?.current?.click()
+          // Return focus to the dropdown control after leaving the last item
+          parentRef?.current?.focus()
+          if (onClose) onClose(event)
+        } else if (!nextItemRef && firstItemRef) {
+          // If the last item is focused, move the focus to the first one
+          event.preventDefault()
+          setFocusedIndex(0)
+          firstItemRef.current?.focus()
+        }
+      },
+      [focusedIndex, onClose, parentRef, firstItemRef]
+    )
 
-  // Add listeners for mouse clicks outside and for key presses
-  useEffect(() => {
-    if (Platform.OS === 'web') {
-      window.addEventListener('click', onClose)
-      window.addEventListener('keydown', handleKeydown)
-      window.addEventListener('touchstart', onClose)
-      return () => {
-        window.removeEventListener('click', onClose)
-        window.removeEventListener('keydown', handleKeydown)
-        window.removeEventListener('touchstart', onClose)
+    // Add listeners for mouse clicks outside and for key presses
+    useEffect(() => {
+      if (Platform.OS === 'web') {
+        window.addEventListener('click', onClose)
+        window.addEventListener('keydown', handleKeydown)
+        window.addEventListener('touchstart', onClose)
+        return () => {
+          window.removeEventListener('click', onClose)
+          window.removeEventListener('keydown', handleKeydown)
+          window.removeEventListener('touchstart', onClose)
+        }
       }
-    }
-    return () => {}
-  }, [onClose, handleKeydown])
+      return () => {}
+    }, [onClose, handleKeydown])
 
-  return (
-    <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
-      <ExpandCollapse initialOpen={initialOpen} maxOpen={1}>
-        {(expandProps) => (
-          <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
-            {items.map((item, index) => {
-              const { id, label, items: nestedItems } = item
-              const itemId = id ?? label
+    return (
+      <ListboxContext.Provider value={{ selectedId, setSelectedId }}>
+        <ExpandCollapse initialOpen={initialOpen} maxOpen={1} ref={ref}>
+          {(expandProps) => (
+            <View style={[styles.list, { minHeight, minWidth }]} role="listbox">
+              {items.map((item, index) => {
+                const { id, label, items: nestedItems } = item
+                const itemId = id ?? label
 
-              // Give the list of refs.
-              const itemRef = (ref) => {
-                itemRefs.current[index] = ref
-                return ref
-              }
+                // Give the list of refs.
+                const itemRef = (currentItemRef) => {
+                  itemRefs.current[index] = currentItemRef
+                  return currentItemRef
+                }
 
-              return nestedItems ? (
-                <ListboxGroup
-                  {...item}
-                  expandProps={expandProps}
-                  LinkRouter={LinkRouter}
-                  itemRouterProps={itemRouterProps}
-                  prevItemRef={itemRefs.current[index - 1] ?? null}
-                  nextItemRef={itemRefs.current[index + 1] ?? null}
-                  ref={index === 0 ? firstItemRef : itemRef}
-                  key={itemId}
-                />
-              ) : (
-                <ListboxItem
-                  {...item}
-                  key={itemId}
-                  id={itemId}
-                  LinkRouter={LinkRouter}
-                  itemRouterProps={itemRouterProps}
-                  prevItemRef={itemRefs.current[index - 1] ?? null}
-                  nextItemRef={itemRefs.current[index + 1] ?? null}
-                  ref={index === 0 ? firstItemRef : itemRef}
-                />
-              )
-            })}
-          </View>
-        )}
-      </ExpandCollapse>
-    </ListboxContext.Provider>
-  )
-}
+                return nestedItems ? (
+                  <ListboxGroup
+                    {...item}
+                    expandProps={expandProps}
+                    LinkRouter={LinkRouter}
+                    itemRouterProps={itemRouterProps}
+                    prevItemRef={itemRefs.current[index - 1] ?? null}
+                    nextItemRef={itemRefs.current[index + 1] ?? null}
+                    ref={index === 0 ? firstItemRef : itemRef}
+                    key={itemId}
+                  />
+                ) : (
+                  <ListboxItem
+                    {...item}
+                    key={itemId}
+                    id={itemId}
+                    LinkRouter={LinkRouter}
+                    itemRouterProps={itemRouterProps}
+                    prevItemRef={itemRefs.current[index - 1] ?? null}
+                    nextItemRef={itemRefs.current[index + 1] ?? null}
+                    ref={index === 0 ? firstItemRef : itemRef}
+                  />
+                )
+              })}
+            </View>
+          )}
+        </ExpandCollapse>
+      </ListboxContext.Provider>
+    )
+  }
+)
+
+Listbox.displayName = 'Listbox'
 
 Listbox.propTypes = {
   ...withLinkRouter.propTypes,

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
   }
 })
 

package/src/Notification/Notification.jsx

@@ -65,7 +65,7 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
 })
 
 const selectContentContainerStyle = (maxWidth) => ({
-  width: maxWidth || '100%'
+  maxWidth: maxWidth || '100%'
 })
 
 const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {

package/src/Radio/Radio.jsx

@@ -247,7 +247,7 @@ Radio.propTypes = {
   /**
    * The label.
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Associate this radio button with a group (set as the name attribute).
    */