@telus-uds/components-base 1.8.3 → 1.8.4

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]