@telus-uds/components-base 1.10.0 → 1.11.0

package/lib-module/utils/props/handlerProps.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
-export const focusHandlerProps = {
+import Platform from "react-native-web/dist/exports/Platform";
+import getPropSelector from './getPropSelector';
+const focusHandlerProps = {
   types: {
     /**
      * onBlur handler
@@ -10,19 +12,10 @@ export const focusHandlerProps = {
      * onFocus handler
      */
     onFocus: PropTypes.func
-  },
-  select: _ref => {
-    let {
-      onBlur,
-      onFocus
-    } = _ref;
-    return {
-      onBlur,
-      onFocus
-    };
   }
 };
-export const textInputHandlerProps = {
+focusHandlerProps.select = getPropSelector(focusHandlerProps.types);
+const textInputHandlerProps = {
   types: {
     /**
      * onChange handler
@@ -42,24 +35,78 @@ export const textInputHandlerProps = {
     /**
      * onSubmitEditing handler
      */
-    onSubmitEditing: PropTypes.func
-  },
-  select: _ref2 => {
-    let {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    } = _ref2;
-    return {
-      onChange,
-      onChangeText,
-      onSubmit,
-      onSubmitEditing
-    };
+    onSubmitEditing: PropTypes.func,
+
+    /**
+     * onContentSizeChange handler
+     */
+    onContentSizeChange: PropTypes.func,
+
+    /**
+     * onEndEditing handler
+     */
+    onEndEditing: PropTypes.func,
+
+    /**
+     * onScroll handler
+     */
+    onScroll: PropTypes.func,
+
+    /**
+     * onSelectionChange handler
+     */
+    onSelectionChange: PropTypes.func,
+
+    /**
+     * onKeyPress handler
+     */
+    onKeyPress: PropTypes.func,
+
+    /**
+     * onKeyUp handler (only supported on Web)
+     */
+    onKeyUp: PropTypes.func,
+
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onKeyDown: PropTypes.func
   }
 };
-export default {
-  focusHandlerProps,
-  textInputHandlerProps
-};
+const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types);
+
+textInputHandlerProps.select = props => {
+  // Support for onKeyPress/onKeyUp/onKeyDown is inconsistent between React Native and React Native Web
+  const {
+    onKeyPress,
+    onKeyUp,
+    onKeyDown,
+    ...resolvedProps
+  } = selectTextInputHandlers(props);
+
+  if (onKeyPress || onKeyUp || onKeyDown) {
+    if (Platform.OS !== 'web') {
+      // React Native only supports onKeyPress. Call any key handlers supplied in expected order.
+      resolvedProps.onKeyPress = event => {
+        if (typeof onKeyDown === 'function') onKeyDown(event);
+        if (typeof onKeyPress === 'function') onKeyPress(event);
+        if (typeof onKeyUp === 'function') onKeyUp(event);
+      };
+    } else {
+      // React Native Web supports onKeyUp the normal way.
+      if (onKeyUp) resolvedProps.onKeyUp = onKeyUp; // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
+      // to the onKeyDown event and calls it with a keydown event. Make React Native Web call either or both.
+
+      if (onKeyPress || onKeyDown) {
+        resolvedProps.onKeyPress = event => {
+          if (typeof onKeyDown === 'function') onKeyDown(event);
+          if (typeof onKeyPress === 'function') onKeyPress(event);
+        };
+      }
+    }
+  }
+
+  return resolvedProps;
+};
+
+export { focusHandlerProps, textInputHandlerProps };

package/lib-module/utils/useScrollBlocking.js

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
+  var _ref$current;
+
+  document.body.addEventListener('touchmove', preventScrolling, {
+    passive: false
+  });
+  (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.addEventListener('touchmove', stopPropagation);
+  document.body.style.overflow = 'hidden';
+};
+
+const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
+  var _ref$current2;
+
+  document.body.removeEventListener('touchmove', preventScrolling);
+  (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.removeEventListener('touchmove', stopPropagation);
+  document.body.style.overflow = 'inherit';
+};
+/**
+ * Disables scrolling when passed `true` or an array where all items are `true`.
+ *
+ * Returns an optional callback ref. Pass this to an element if it or its children
+ * should allow touch-based scrolling within that element's bounds.
+ *
+ * @param {boolean | boolean[]} conditionProps
+ * @returns
+ */
+
+
+const useScrollBlocking = conditionProps => {
+  // useRef refs are null on first render and don't trigger a re-render when they get their
+  // element. Force re-run when ref mounts to ensure the stopPropagation listener is attached.
+  const ref = useRef();
+  const [refIsMounted, setRefIsMounted] = useState(false);
+  const callbackRef = useCallback(element => {
+    ref.current = element;
+    setRefIsMounted(Boolean(element));
+  }, []);
+  const conditionsMet = Array.isArray(conditionProps) ? conditionProps.every(condition => condition) : Boolean(conditionProps);
+  const preventScrolling = useCallback(event => event.preventDefault(), []);
+  const stopPropagation = useCallback(event => event.stopPropagation(), []);
+  useEffect(() => {
+    const cleanup = () => removeScrollBlocking(preventScrolling, stopPropagation, ref);
+
+    if (conditionsMet) {
+      addScrollBlocking(preventScrolling, stopPropagation, ref);
+    } else {
+      cleanup();
+    }
+
+    return cleanup; // preventScrolling and stopPropagation are stable callbacks with no deps, so this
+    // will re-run when conditionsMet or refIsMounted flip between true and false.
+  }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
+  return callbackRef;
+};
+
+export default useScrollBlocking;

package/lib-module/utils/useScrollBlocking.native.js

@@ -0,0 +1,2 @@
+// This is a no-op to emphasize that the original hook is web-only
+export default (() => {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -46,8 +46,8 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "^0.17.0"
+    "react-native": "*",
+    "react-native-web": "~0.17.5"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^6.5.6",

package/src/Carousel/Carousel.jsx

@@ -3,7 +3,16 @@ import { View, Animated, PanResponder, StyleSheet, Platform } from 'react-native
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
-import { getTokensPropType, variantProp, selectSystemProps, a11yProps, viewProps } from '../utils'
+import {
+  getTokensPropType,
+  getA11yPropsFromHtmlTag,
+  layoutTags,
+  variantProp,
+  selectSystemProps,
+  a11yProps,
+  viewProps,
+  useCopy
+} from '../utils'
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
 import CarouselItem from './CarouselItem'
@@ -11,6 +20,8 @@ import StepTracker from '../StepTracker'
 import StackView from '../StackView'
 import IconButton from '../IconButton'
 
+import dictionary from './dictionary'
+
 const staticStyles = StyleSheet.create({
   root: {
     backgroundColor: 'transparent',
@@ -79,15 +90,6 @@ const selectPreviousNextNavigationButtonStyles = (
   return styles
 }
 
-const defaultPanelNavigationDictionary = {
-  en: {
-    stepTrackerLabel: 'Showing %{stepNumber} of %{stepCount}'
-  },
-  fr: {
-    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
-  }
-}
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
@@ -150,6 +152,7 @@ const Carousel = React.forwardRef(
       tokens,
       variant,
       children,
+      itemLabel = 'item',
       previousNextNavigationPosition = 'inside',
       previousNextIconSize = 'default',
       minDistanceToCapture = 5,
@@ -159,9 +162,10 @@ const Carousel = React.forwardRef(
       onIndexChanged,
       springConfig = undefined,
       onRenderPanelNavigation,
-      panelNavigationTextDictionary = defaultPanelNavigationDictionary,
+      tag = 'ul',
       accessibilityRole = 'adjustable',
       accessibilityLabel = 'carousel',
+      copy,
       ...rest
     },
     ref
@@ -178,6 +182,25 @@ const Carousel = React.forwardRef(
       viewport
     })
     const [activeIndex, setActiveIndex] = React.useState(0)
+
+    const [isAnimating, setIsAnimating] = React.useState(false)
+    const handleAnimationStart = React.useCallback(
+      (...args) => {
+        if (typeof onAnimationStart === 'function') onAnimationStart(...args)
+        setIsAnimating(true)
+      },
+      [onAnimationStart]
+    )
+    const handleAnimationEnd = React.useCallback(
+      (...args) => {
+        if (typeof onAnimationEnd === 'function') onAnimationEnd(...args)
+        setIsAnimating(false)
+      },
+      [onAnimationEnd]
+    )
+
+    const getCopy = useCopy({ dictionary, copy })
+
     const childrenArray = React.Children.toArray(children)
     const systemProps = selectProps({
       ...rest,
@@ -230,18 +253,21 @@ const Carousel = React.forwardRef(
     }, [activeIndex, containerLayout.width, pan, animatedX])
 
     const animate = React.useCallback(
-      (toValue) => {
+      (toValue, toIndex) => {
+        const handleAnimationEndToIndex = (...args) => handleAnimationEnd(toIndex, ...args)
         if (reduceMotionEnabled) {
-          Animated.timing(pan, { toValue, duration: 1, useNativeDriver: false }).start()
+          Animated.timing(pan, { toValue, duration: 1, useNativeDriver: false }).start(
+            handleAnimationEndToIndex
+          )
         } else {
           Animated.spring(pan, {
             ...springConfig,
             toValue,
             useNativeDriver: false
-          }).start()
+          }).start(handleAnimationEndToIndex)
         }
       },
-      [pan, springConfig, reduceMotionEnabled]
+      [pan, springConfig, reduceMotionEnabled, handleAnimationEnd]
     )
 
     const updateIndex = React.useCallback(
@@ -258,32 +284,32 @@ const Carousel = React.forwardRef(
           calcDelta = -1 * activeIndex + delta - 1
         }
 
+        const index = activeIndex + calcDelta
+
         if (skipChanges) {
-          animate(toValue)
+          animate(toValue, index)
           return calcDelta
         }
 
-        const index = activeIndex + calcDelta
         setActiveIndex(index)
 
         toValue.x = containerLayout.width * -1 * calcDelta
 
-        animate(toValue)
+        animate(toValue, index)
 
         if (onIndexChanged) onIndexChanged(calcDelta)
-        if (onAnimationEnd) onAnimationEnd(index)
         return calcDelta
       },
-      [containerLayout.width, activeIndex, animate, children.length, onIndexChanged, onAnimationEnd]
+      [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]
     )
 
     const fixOffsetAndGo = React.useCallback(
       (delta) => {
         updateOffset()
-        if (onAnimationStart) onAnimationStart(activeIndex)
+        handleAnimationStart(activeIndex)
         updateIndex(delta)
       },
-      [updateIndex, updateOffset, activeIndex, onAnimationStart]
+      [updateIndex, updateOffset, activeIndex, handleAnimationStart]
     )
 
     const goToNeighboring = React.useCallback(
@@ -310,7 +336,7 @@ const Carousel = React.forwardRef(
               return false
             }
 
-            if (onAnimationStart) onAnimationStart(activeIndex)
+            handleAnimationStart(activeIndex)
 
             return Math.abs(gestureState.dx) > minDistanceToCapture
           },
@@ -322,7 +348,7 @@ const Carousel = React.forwardRef(
             const correction = gesture.moveX - gesture.x0
 
             if (Math.abs(correction) < containerLayout.width * minDistanceForAction) {
-              animate({ x: 0, y: 0 })
+              animate({ x: 0, y: 0 }, 0)
             } else {
               const delta = correction > 0 ? -1 : 1
               updateIndex(delta)
@@ -337,7 +363,7 @@ const Carousel = React.forwardRef(
         isSwipeAllowed,
         activeIndex,
         minDistanceForAction,
-        onAnimationStart,
+        handleAnimationStart,
         minDistanceToCapture,
         pan.x
       ]
@@ -379,6 +405,16 @@ const Carousel = React.forwardRef(
     // Related discussion - https://github.com/telus/universal-design-system/issues/1549
     const previousNextIconButtonVariants = { size: previousNextIconSize, raised: true }
 
+    const getCopyWithPlaceholders = (copyKey) => {
+      const copyText = getCopy(copyKey)
+        .replace(/%\{itemLabel\}/g, itemLabel)
+        .replace(/%\{stepNumber\}/g, activeIndex + 1)
+        .replace(/%\{stepCount\}/g, childrenArray.length)
+
+      // First word might be a lowercase placeholder: capitalize the first letter
+      return `${copyText[0].toUpperCase()}${copyText.slice(1)}`
+    }
+
     return (
       <CarouselProvider
         activeIndex={activeIndex}
@@ -404,7 +440,10 @@ const Carousel = React.forwardRef(
                 icon={previousIcon}
                 onPress={goToPrev}
                 variant={previousNextIconButtonVariants}
-                accessibilityLabel="previous-button"
+                accessibilityLabel={getCopyWithPlaceholders('iconButtonLabel').replace(
+                  '%{targetStep}',
+                  activeIndex
+                )}
               />
             </View>
           )}
@@ -417,9 +456,11 @@ const Carousel = React.forwardRef(
                 }
               ])}
               {...panResponder.panHandlers}
+              {...getA11yPropsFromHtmlTag(tag)}
             >
               {childrenArray.map((element, index) => {
-                const clonedElement = React.cloneElement(element, { elementIndex: index })
+                const hidden = !isAnimating && index !== activeIndex
+                const clonedElement = React.cloneElement(element, { elementIndex: index, hidden })
                 return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
               })}
             </Animated.View>
@@ -441,7 +482,10 @@ const Carousel = React.forwardRef(
                 icon={nextIcon}
                 onPress={goToNext}
                 variant={previousNextIconButtonVariants}
-                accessibilityLabel="next-button"
+                accessibilityLabel={getCopyWithPlaceholders('iconButtonLabel').replace(
+                  '%{targetStep}',
+                  activeIndex + 2
+                )}
               />
             </View>
           )}
@@ -454,7 +498,11 @@ const Carousel = React.forwardRef(
               <StepTracker
                 current={activeIndex}
                 steps={childrenArray.map((_, index) => String(index))}
-                dictionary={panelNavigationTextDictionary}
+                copy={{
+                  // Give StepTracker copy from Carousel's language and dictionary
+                  stepLabel: getCopyWithPlaceholders('stepLabel'),
+                  stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+                }}
                 tokens={panelNavigationTokens}
               />
             )}
@@ -473,6 +521,13 @@ Carousel.propTypes = {
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Lowercase language-appropriate user-facing description of what each Carousel slide represents.
+   * This is used when generating item labels. For example, if a carousel contains offers,
+   * pass itemLabel="summer offer" (or copy="fr" and an appropriate French translation) to genereate
+   * accessible labels such as "Summer offer 1 of 3" and "Show summer offer 2 of 3".
+   */
+  itemLabel: PropTypes.string,
   /**
    * `inside` renders the previous and next buttons inside the slide
    * `outside` renders the previous and next buttons outside the slide
@@ -576,7 +631,15 @@ Carousel.propTypes = {
   /**
    * Provide custom accessibilityLabel for Carousel container
    */
-  accessibilityLabel: PropTypes.string
+  accessibilityLabel: PropTypes.string,
+  /**
+   * HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that
+   * assistive technology tools know to intepret the carousel as a list.
+   *
+   * Note that if the immediate Carousel children do not all render as `'li'` elements,
+   * this should be changed (e.g. pass tag="div") because only 'li' is a valid child of 'ul'.
+   */
+  tag: PropTypes.oneOf(layoutTags)
 }
 
 Carousel.Item = CarouselItem

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -1,7 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
-import { selectSystemProps, a11yProps, viewProps } from '../../utils'
+import {
+  layoutTags,
+  getA11yPropsFromHtmlTag,
+  selectSystemProps,
+  a11yProps,
+  viewProps
+} from '../../utils'
 import { useCarousel } from '../CarouselContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -10,17 +16,21 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselItem = ({ children, elementIndex, ...rest }) => {
-  const { width, activeIndex, totalItems } = useCarousel()
+const CarouselItem = ({ children, elementIndex, tag = 'li', hidden, ...rest }) => {
+  const { width, activeIndex } = useCarousel()
   const selectedProps = selectProps({
     ...rest,
-    // `group` role crashes the app on Android so setting it to `none` for Android
-    accessibilityRole: Platform.OS === 'android' ? 'none' : 'group',
-    accessibilityLabel: `Showing ${elementIndex + 1} of ${totalItems}`
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
   })
+
   const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
+  const style = { width }
+  if (hidden && Platform.OS === 'web') {
+    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
+    style.visibility = 'hidden'
+  }
   return (
-    <View style={{ width }} {...selectedProps} {...focusabilityProps}>
+    <View style={style} {...selectedProps} {...focusabilityProps}>
       {children}
     </View>
   )
@@ -40,7 +50,15 @@ CarouselItem.propTypes = {
   /**
    * Content of the slide
    */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
+   * the Carousel as a list of items.
+   *
+   * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
+   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
+   */
+  tag: PropTypes.oneOf(layoutTags)
 }
 
 CarouselItem.displayName = 'Carousel.Item'

package/src/Carousel/dictionary.js

@@ -0,0 +1,16 @@
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+export default {
+  en: {
+    carouselLabel: '%{stepCount} items',
+    iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+  },
+  fr: {
+    // TODO: French translations here
+    carouselLabel: '(fr) %{stepCount} items',
+    iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '(fr) %{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+  }
+}

package/src/InputSupports/InputSupports.jsx

@@ -9,7 +9,17 @@ import useInputSupports from './useInputSupports'
 
 const InputSupports = forwardRef(
   (
-    { children, copy = 'en', label, hint, hintPosition = 'inline', feedback, tooltip, validation },
+    {
+      children,
+      copy = 'en',
+      label,
+      hint,
+      hintPosition = 'inline',
+      feedback,
+      tooltip,
+      validation,
+      nativeID
+    },
     ref
   ) => {
     const { space } = useThemeTokens('InputSupports')
@@ -18,7 +28,8 @@ const InputSupports = forwardRef(
       feedback,
       hint,
       label,
-      validation
+      validation,
+      nativeID
     })
 
     return (
@@ -72,7 +83,11 @@ InputSupports.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string
 }
 
 export default InputSupports

package/src/InputSupports/useInputSupports.js

@@ -2,7 +2,7 @@ import useUniqueId from '../utils/useUniqueId'
 
 const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
 
-const useInputSupports = ({ label, feedback, validation, hint }) => {
+const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
   const hasValidationError = validation === 'error'
 
   const inputId = useUniqueId('input')
@@ -20,7 +20,7 @@ const useInputSupports = ({ label, feedback, validation, hint }) => {
   }
 
   return {
-    inputId,
+    inputId: nativeID || inputId,
     hintId,
     feedbackId,
     a11yProps

package/src/Modal/Modal.jsx

@@ -22,6 +22,7 @@ import {
 import { useViewport } from '../ViewportProvider'
 import IconButton from '../IconButton'
 import dictionary from './dictionary'
+import useScrollBlocking from '../utils/useScrollBlocking'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -89,6 +90,7 @@ const Modal = forwardRef(
   ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, closeButton, ...rest }, ref) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
+    const modalRef = useScrollBlocking(isOpen)
 
     const { closeIcon: CloseIconComponent } = themeTokens
 
@@ -113,7 +115,7 @@ const Modal = forwardRef(
 
     return (
       <NativeModal transparent {...selectProps(rest)}>
-        <View style={[staticStyles.positioningContainer]}>
+        <View style={[staticStyles.positioningContainer]} ref={modalRef}>
           <View
             style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
             pointerEvents="box-none" // don't capture backdrop press events

package/src/Skeleton/Skeleton.jsx

@@ -22,6 +22,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectSkeletonStyles = ({ color, radius, fadeAnimation }) => ({
   backgroundColor: color,
   borderRadius: radius,
+  maxWidth: '100%',
   ...fadeAnimation
 })
 

package/src/StepTracker/StepTracker.jsx

@@ -155,13 +155,19 @@ const StepTracker = forwardRef(
 )
 StepTracker.displayName = 'StepTracker'
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  stepLabel: PropTypes.string.isRequired,
+  stepTrackerLabel: PropTypes.string.isRequired
+})
+
 StepTracker.propTypes = {
   ...selectedSystemPropTypes,
   current: PropTypes.number,
-  copy: PropTypes.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
   dictionary: PropTypes.shape({
-    en: PropTypes.shape({ stepLabel: PropTypes.string, stepTrackerLabel: PropTypes.string }),
-    fr: PropTypes.shape({ stepLabel: PropTypes.string, stepTrackerLabel: PropTypes.string })
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
   }),
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),