@telus-uds/components-base 1.8.2 → 1.8.5

package/src/Link/InlinePressable.jsx

@@ -15,11 +15,11 @@ import { Pressable, StyleSheet } from 'react-native'
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
+const InlinePressable = forwardRef(({ children, style, inline = false, ...props }, ref) => (
   <Pressable
     ref={ref}
     style={(pressState) => [
-      staticStyles.inline,
+      staticStyles[inline ? 'inline' : 'inlineFlex'],
       typeof style === 'function' ? style(pressState) : style
     ]}
     {...props}
@@ -32,6 +32,9 @@ InlinePressable.displayName = 'InlinePressable'
 const staticStyles = StyleSheet.create({
   inline: {
     // Stop Pressable defaulting to (block) flex
+    display: 'inline'
+  },
+  inlineFlex: {
     display: 'inline-flex'
   }
 })

package/src/Link/LinkBase.jsx

@@ -132,18 +132,21 @@ const LinkBase = forwardRef(
     const resolveLinkTokens = (pressState) =>
       resolvePressableTokens(tokens, pressState, { iconPosition })
 
+    const defaultThemeTokens = resolveLinkTokens({})
+    const hasIcon = Boolean(icon || defaultThemeTokens.icon)
+
     // On web, this makes focus rings wrap only the link, not the entire block
     const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
 
     return (
       <InlinePressable
         {...selectedProps}
+        inline={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-          const hasIcon = Boolean(icon || themeTokens.icon)
           return [
             outerBorderStyles,
             blockLeftStyle,

package/src/List/List.jsx

@@ -17,26 +17,41 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
-  const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
-  const items = Children.map(children, (child, index) => {
-    if (child.type.name === ListItem.name) {
-      return cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === Children.count(children),
-        tokens,
-        variant
-      })
-    }
-    return child
-  })
+const List = forwardRef(
+  (
+    {
+      children,
+      showDivider,
+      tokens,
+      variant,
+      accessibilityRole = Platform.select({ web: 'list', default: undefined }),
+      ...rest
+    },
+    ref
+  ) => {
+    const items = Children.map(children, (child, index) => {
+      // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
+      const isListItem = (componentName) => Boolean(componentName === ListItem.displayName)
 
-  return (
-    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
-      {items}
-    </View>
-  )
-})
+      if (isListItem(child?.type?.displayName) || isListItem(child?.type?.name)) {
+        return cloneElement(child, {
+          showDivider,
+          isLastItem: index + 1 === Children.count(children),
+          tokens,
+          variant,
+          ...child.props
+        })
+      }
+      return child
+    })
+
+    return (
+      <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
+        {items}
+      </View>
+    )
+  }
+)
 List.displayName = 'List'
 
 List.propTypes = {

package/src/List/ListItem.jsx

@@ -65,7 +65,18 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
  */
 const ListItem = forwardRef(
   (
-    { tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem, ...rest },
+    {
+      tokens,
+      variant,
+      icon,
+      iconColor,
+      iconSize,
+      showDivider,
+      children,
+      isLastItem,
+      accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
+      ...rest
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
@@ -78,7 +89,6 @@ const ListItem = forwardRef(
     const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
     const iconTokens = selectItemIconTokens(themeTokens)
     const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
-    const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
 
     const renderItem = () => (
       <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: itemStyles })}</View>

package/src/Modal/Modal.jsx

@@ -202,6 +202,7 @@ const staticStyles = StyleSheet.create({
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
-    right: 0
+    right: 0,
+    zIndex: 1
   }
 })

package/src/Tabs/Tabs.jsx

@@ -23,9 +23,24 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const { selectHorizontalScrollTokens, useItemPositions } = horizontalScrollUtils
 
+const getDefaultTabItemAccessibilityRole = (parentRole) => {
+  switch (parentRole) {
+    case 'tablist':
+      return 'tab'
+    case 'navigation':
+      return 'link'
+    default:
+      return undefined
+  }
+}
+
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
+ *
+ * If you are using Tabs to navigate to a new page (web-only) you should pass
+ * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
+ * TabItems to default to a role of link and obtain aria-current behaviour.
  */
 const Tabs = forwardRef(
   (
@@ -61,6 +76,11 @@ const Tabs = forwardRef(
       isPositioningReady
     )
 
+    const restProps = selectProps(rest)
+    const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist'
+    const defaultTabItemAccessibiltyRole =
+      getDefaultTabItemAccessibilityRole(parentAccessibilityRole)
+
     return (
       <HorizontalScroll
         ref={ref}
@@ -68,8 +88,8 @@ const Tabs = forwardRef(
         itemPositions={itemPositions}
         tokens={selectHorizontalScrollTokens(themeTokens)}
         scrollButtonTokens={scrollButtonTokens}
-        accessibilityRole="tablist"
-        {...selectProps(rest)}
+        accessibilityRole={parentAccessibilityRole}
+        {...restProps}
       >
         <StackView space={space} direction="row">
           {items.map(
@@ -78,6 +98,7 @@ const Tabs = forwardRef(
                 href,
                 label,
                 id,
+                accessibilityRole = defaultTabItemAccessibiltyRole,
                 ref: itemRef,
                 LinkRouter: ItemLinkRouter = LinkRouter,
                 linkRouterProps: itemLinkRouterProps
@@ -98,6 +119,7 @@ const Tabs = forwardRef(
                   selected={isSelected}
                   itemPositions={itemPositions}
                   index={index}
+                  accessibilityRole={accessibilityRole}
                   LinkRouter={ItemLinkRouter}
                   linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
                 >

package/src/Tabs/TabsItem.jsx

@@ -86,11 +86,11 @@ const TabsItem = forwardRef(
       itemPositions,
       index,
       children,
-      accessibilityRole = href ? 'link' : 'tab',
-      accessibilityState = Platform.OS === 'web' && accessibilityRole === 'link'
-        ? // Web links can't be aria-selected but can be aria-current
-          { current: selected ? 'page' : false }
-        : { selected },
+      accessibilityRole,
+      accessibilityCurrent = Platform.OS === 'web' && accessibilityRole === 'link' && selected
+        ? 'page'
+        : undefined,
+      accessibilityState = accessibilityRole === 'tab' ? { selected } : undefined,
       ...rawRest
     },
     ref
@@ -121,6 +121,7 @@ const TabsItem = forwardRef(
 
     const selectedProps = selectProps({
       accessibilityRole,
+      accessibilityCurrent,
       accessibilityState,
       ...rest
     })

package/src/utils/animation/useVerticalExpandAnimation.js

@@ -1,21 +1,27 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Animated, Easing, Platform } from 'react-native'
 
 // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
 function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
   const [isAnimating, setIsAnimating] = useState(false)
+  const [wasExpanded, setWasExpanded] = useState(isExpanded)
+  const expandStateChanged = isExpanded !== wasExpanded
 
   const expandAnimatedValue = useRef(new Animated.Value(0)).current
   const elementRef = useRef(null)
 
   const { expandDuration, collapseDuration } = tokens
 
-  // Treat as animating from when expanded state changes, until animation completes
-  useEffect(() => setIsAnimating(true), [isExpanded])
+  useLayoutEffect(() => {
+    if (expandStateChanged) {
+      setIsAnimating(true)
+      setWasExpanded(isExpanded)
+    }
+  }, [expandStateChanged, isExpanded])
 
   useEffect(() => {
-    const onComplete = () => !isExpanded && setIsAnimating(false)
+    const onComplete = () => setIsAnimating(false)
 
     if (Platform.OS === 'web') {
       if (!elementRef.current) return () => {}
@@ -39,19 +45,47 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
     return () => animation.stop()
   }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration])
 
-  // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
-  const containerStyles = !isExpanded && !isAnimating ? { visibility: 'hidden' } : {}
+  const containerStyles = {}
 
-  // don't visually collapse the container until we have it measured
-  if (containerHeight !== null) {
-    if (Platform.OS === 'web') {
-      const transitionDuration = isExpanded ? expandDuration : collapseDuration
-      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`
+  if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden'
 
-      containerStyles.height = isExpanded ? containerHeight : 0
+  if (!isExpanded && !isAnimating && !expandStateChanged) {
+    if (Platform.OS === 'web') {
+      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
+      containerStyles.visibility = 'hidden'
     } else {
-      containerStyles.height = expandAnimatedValue
+      // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
+      // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
+      containerStyles.opacity = 0
+    }
+  }
+
+  // don't visually collapse the container until we have it measured
+  if (containerHeight === null) {
+    if (Platform.OS === 'web') {
+      // on web we can hide the contents until we have the container measured and avoid occasional jitter
+      // this won't work on native platforms
+      containerStyles.height = 0
+      containerStyles.visibility = 'hidden'
     }
+  } else if (Platform.OS === 'web') {
+    const transitionDuration = isExpanded ? expandDuration : collapseDuration
+    containerStyles.transition = `height ${transitionDuration}ms ease-in-out`
+
+    containerStyles.height = isExpanded ? containerHeight : 0
+  } else if (
+    Platform.OS === 'ios' &&
+    isExpanded &&
+    !isAnimating &&
+    !expandStateChanged &&
+    typeof containerHeight === 'number'
+  ) {
+    // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where
+    // it fails to reflow properly after the last animation frame, leaving the last line of text not visible.
+    // Force reflow after animation completes with a static height non-identical to the last animated height.
+    containerStyles.height = containerHeight + 1
+  } else {
+    containerStyles.height = expandAnimatedValue
   }
 
   return [containerStyles, elementRef]