@telus-uds/components-base 3.28.2 → 3.29.1

package/src/Link/ChevronLink.jsx

@@ -34,6 +34,7 @@ const ChevronLink = React.forwardRef(
     return (
       <LinkBase
         {...otherlinkProps}
+        useMeasuredMobileIconLayout
         iconPosition={direction}
         tokens={getTokens}
         dataSet={dataSet}

package/src/Link/LinkBase.jsx

@@ -16,6 +16,7 @@ import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
+import MobileIconTextContent from './MobileIconTextContent'
 import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
@@ -133,6 +134,7 @@ const LinkBase = React.forwardRef(
       tokens = {},
       children,
       dataSet,
+      useMeasuredMobileIconLayout = false,
       accessibilityRole = 'link',
       ...rawRest
     },
@@ -171,12 +173,14 @@ const LinkBase = React.forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-
-          const mobileCompensation = null
+          const shouldUseMeasuredMobileContent =
+            Platform.OS !== 'web' && useMeasuredMobileIconLayout
 
           return [
             outerBorderStyles,
-            mobileCompensation,
+            shouldUseMeasuredMobileContent
+              ? staticStyles.measuredMobileOuterBorderCompensation
+              : null,
             blockLeftStyle,
             decorationStyles,
             hasIcon && staticStyles.rowContainer
@@ -196,28 +200,50 @@ const LinkBase = React.forwardRef(
 
           const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link'
           const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace
+          const shouldUseMeasuredMobileContent =
+            Platform.OS !== 'web' && useMeasuredMobileIconLayout
+          const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline
+
+          const linkTextContent = (
+            <Text
+              style={[
+                textStyles,
+                blockTextStyles,
+                textBaselineStyle,
+                staticStyles.bubblePointerEvents
+              ]}
+            >
+              {typeof children === 'function' ? children(linkState) : children}
+            </Text>
+          )
+
+          const sharedIconProps = {
+            ...iconProps,
+            tokens: iconTokens,
+            style: staticStyles.bubblePointerEvents
+          }
+
+          if (shouldUseMeasuredMobileContent) {
+            return (
+              <MobileIconTextContent
+                icon={IconComponent}
+                iconPosition={iconPosition}
+                space={adjustedIconSpace}
+                iconProps={sharedIconProps}
+              >
+                {linkTextContent}
+              </MobileIconTextContent>
+            )
+          }
 
           return (
             <IconText
               icon={IconComponent}
               iconPosition={iconPosition}
               space={adjustedIconSpace}
-              iconProps={{
-                ...iconProps,
-                tokens: iconTokens,
-                style: staticStyles.bubblePointerEvents
-              }}
+              iconProps={sharedIconProps}
             >
-              <Text
-                style={[
-                  textStyles,
-                  blockTextStyles,
-                  staticStyles.baseline,
-                  staticStyles.bubblePointerEvents
-                ]}
-              >
-                {typeof children === 'function' ? children(linkState) : children}
-              </Text>
+              {linkTextContent}
             </IconText>
           )
         }}
@@ -280,11 +306,12 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(Platform.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
-      paddingTop: Platform.OS === 'android' ? 2 : 0
+      paddingVertical: Platform.OS === 'android' ? 2 : 0
     })
   }
 })

package/src/Link/MobileIconTextContent.jsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Text, View, StyleSheet } from 'react-native'
+
+import Icon, { iconComponentPropTypes } from '../Icon/Icon'
+import { spacingProps } from '../utils'
+
+const MobileIconTextContent = React.forwardRef(
+  ({ space = 0, iconPosition = 'left', icon: IconComponent, iconProps = {}, children }, ref) => {
+    const [translateY, setTranslateY] = React.useState(0)
+    const latestTranslateYRef = React.useRef(0)
+    const layoutsRef = React.useRef({
+      container: null,
+      text: null,
+      icon: null
+    })
+
+    const applyAlignment = React.useCallback(() => {
+      const { container, text, icon } = layoutsRef.current
+
+      if (!container || !icon || !icon.height) return
+
+      const targetY = text ? text.y + text.height / 2 : container.height / 2
+      const iconY = icon.y + icon.height / 2
+      const nextTranslateY = Math.round((targetY - iconY) * 100) / 100
+
+      if (!Number.isFinite(nextTranslateY)) return
+      if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return
+
+      latestTranslateYRef.current = nextTranslateY
+      setTranslateY(nextTranslateY)
+    }, [])
+
+    const handleContainerLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.container = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const handleTextLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.text = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const handleIconLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.icon = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const iconContent = IconComponent ? (
+      <Icon ref={ref} icon={IconComponent} scalesWithText {...iconProps} />
+    ) : null
+
+    const iconWrapper = IconComponent ? (
+      <View
+        onLayout={handleIconLayout}
+        style={[staticStyles.iconContainer, { transform: [{ translateY }] }]}
+      >
+        {iconContent}
+      </View>
+    ) : null
+
+    if (iconPosition === 'inline') {
+      return (
+        <Text onLayout={handleContainerLayout}>
+          <Text onLayout={handleTextLayout}>{children}</Text>{' '}
+          <View style={staticStyles.inlineIconContainer}>{iconWrapper}</View>
+        </Text>
+      )
+    }
+
+    const iconSpaceStyle = iconPosition === 'left' ? { marginRight: space } : { marginLeft: space }
+
+    return (
+      <View onLayout={handleContainerLayout} style={staticStyles.rowContainer}>
+        {iconPosition === 'left' && <View style={iconSpaceStyle}>{iconWrapper}</View>}
+        <View onLayout={handleTextLayout}>{children}</View>
+        {iconPosition === 'right' && <View style={iconSpaceStyle}>{iconWrapper}</View>}
+      </View>
+    )
+  }
+)
+
+MobileIconTextContent.displayName = 'MobileIconTextContent'
+
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: PropTypes.node
+}
+
+const staticStyles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+})
+
+export default MobileIconTextContent

package/src/Modal/Modal.jsx

@@ -262,7 +262,7 @@ const Modal = React.forwardRef(
           </View>
           {/* when a modal becomes open its first focusable element is being automatically focused */}
           {/* and we prefer the close button over backdrop */}
-          <TouchableWithoutFeedback onPress={isBackdropClickable && handleClose}>
+          <TouchableWithoutFeedback onPress={isBackdropClickable ? handleClose : undefined}>
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
         </ScrollView>

package/src/QuickLinks/QuickLinks.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import { Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import { getTokensPropType, variantProp } from '../utils'
+import { tagsToRoles } from '../utils/a11y/semantics'
 
 import List from '../List'
 import StackWrap from '../StackView/StackWrap'
@@ -27,6 +29,11 @@ const QuickLinks = React.forwardRef(
       }
     )
 
+    const itemAccessibilityRole = Platform.select({
+      web: ['ul', 'ol'].includes(tag) ? tagsToRoles.li : undefined,
+      default: undefined
+    })
+
     const content = (list && (
       <List ref={ref} tokens={listTokens} showDivider={dividers} tag={tag} {...rest}>
         {children}
@@ -37,6 +44,7 @@ const QuickLinks = React.forwardRef(
         gap={stackGap}
         tokens={{ justifyContent: stackJustify }}
         tag={tag}
+        itemAccessibilityRole={itemAccessibilityRole}
         {...rest}
       >
         {children}

package/src/StackView/StackWrapBox.jsx

@@ -58,6 +58,7 @@ const StackWrapBox = React.forwardRef(
       variant,
       tag,
       accessibilityRole,
+      itemAccessibilityRole,
       ...rest
     },
     ref
@@ -76,7 +77,12 @@ const StackWrapBox = React.forwardRef(
     const gapSize = useSpacingScale(gap)
     const offsetStyle = { [offsetSides[direction]]: -1 * gapSize }
     const boxProps = { [gapSides[direction]]: gap, [spaceSides[direction]]: space }
-    const content = getStackedContent(children, { direction, space: 0, box: boxProps })
+    const content = getStackedContent(children, {
+      direction,
+      space: 0,
+      box: boxProps,
+      itemAccessibilityRole
+    })
 
     return (
       <View
@@ -119,6 +125,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: PropTypes.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/src/StackView/StackWrapGap.jsx

@@ -37,6 +37,7 @@ const StackWrapGap = React.forwardRef(
       children,
       tag,
       accessibilityRole,
+      itemAccessibilityRole,
       ...rest
     },
     ref
@@ -54,7 +55,7 @@ const StackWrapGap = React.forwardRef(
     const size = useSpacingScale(space)
     const gapStyle = { gap: size }
 
-    const content = getStackedContent(children, { direction, space: 0 })
+    const content = getStackedContent(children, { direction, space: 0, itemAccessibilityRole })
 
     return (
       <View

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

package/src/TabBar/TabBar.jsx

@@ -42,12 +42,24 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
 
 const TabBar = React.forwardRef(
-  ({ items = [], initiallySelectedItem = '0', onChange, variant, tokens, ...rest }, ref) => {
+  (
+    {
+      items = [],
+      initiallySelectedItem = '0',
+      onChange,
+      variant,
+      tokens,
+      accessibilityLabel,
+      ...rest
+    },
+    ref
+  ) => {
     const [isSelected, setIsSelected] = React.useState(initiallySelectedItem)
     const themeTokens = useThemeTokens('TabBar', tokens, variant)
 
@@ -62,7 +74,11 @@ const TabBar = React.forwardRef(
         style={[styles.tabBar, selectTabBarContainerStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        <View style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}>
+        <View
+          style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}
+          accessibilityRole="tablist"
+          accessibilityLabel={accessibilityLabel}
+        >
           {items.map((item, index) => (
             <TabBarItem
               key={item.id}
@@ -73,7 +89,6 @@ const TabBar = React.forwardRef(
               iconActive={item.iconActive}
               onPress={() => handlePress(item.id)}
               id={`tab-item-${index}`}
-              accessibilityRole="tablist"
               tokens={item.tokens}
             />
           ))}
@@ -105,7 +120,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
+  tokens: getTokensPropType('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: PropTypes.string
 }
 
 const styles = StyleSheet.create({