@telus-uds/components-base 4.0.0-alpha.1 → 4.0.0-alpha.2

package/src/Scroll/Scroll.jsx

@@ -0,0 +1,483 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Platform, Pressable, StyleSheet, View } from 'react-native'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { copyPropTypes } from '../utils/props/copyPropTypes'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { useCopy } from '../utils/useCopy'
+import { useUniqueId } from '../utils/useUniqueId'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { A11yText } from '../A11yText/A11yText'
+import { ScrollViewEnd } from '../HorizontalScroll/ScrollViewEnd'
+import { dictionary } from './dictionary'
+import { ScrollProgress } from './ScrollProgress'
+import { ScrollProvider } from './ScrollContext'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const SCROLL_DESCRIPTION_PREFIX = 'scroll-description'
+const KEY_ARROW_RIGHT = 'ArrowRight'
+const KEY_ARROW_LEFT = 'ArrowLeft'
+const KEY_SPACE = ' '
+const MAX_PERCENTAGE = 100
+const MIN_BAR_PERCENTAGE = 1
+const ROLE_REGION = 'region'
+const ROLE_NONE = 'none'
+const COMPONENT_NAME = 'Scroll'
+const SCROLL_ITEM_SELECTOR = '[data-scroll-item]'
+const TAB_INDEX = 0
+const INITIAL_DIMENSION = 0
+const HALF_DIVISOR = 2
+
+const selectPressableStyles = ({ progressHitAreaHeight, progressSpacing }) => ({
+  height: progressHitAreaHeight,
+  marginTop: progressSpacing
+})
+
+const selectThumbWrapperStyles = ({ thumbWidthPercent, thumbPositionPercent }) => ({
+  width: `${thumbWidthPercent}%`,
+  marginLeft: `${thumbPositionPercent}%`
+})
+
+const selectContainerA11yProps = ({ accessibilityLabel, descriptionId, handleKeyDown }) =>
+  Platform.OS === 'web'
+    ? {
+        role: ROLE_REGION,
+        'aria-label': accessibilityLabel,
+        'aria-describedby': descriptionId,
+        tabIndex: TAB_INDEX,
+        onKeyDown: handleKeyDown
+      }
+    : {
+        accessibilityRole: ROLE_NONE,
+        accessibilityLabel
+      }
+
+const selectScrollContentStyle = (itemGap) => ({
+  columnGap: itemGap
+})
+
+const calculateThumbWidth = ({ containerWidth, contentWidth }) => {
+  if (contentWidth <= INITIAL_DIMENSION) return MAX_PERCENTAGE
+  return Math.max(
+    MIN_BAR_PERCENTAGE,
+    Math.min(MAX_PERCENTAGE, (containerWidth / contentWidth) * MAX_PERCENTAGE)
+  )
+}
+
+const calculateThumbPosition = ({ scrollOffset, scrollMax, thumbWidthPercent }) => {
+  if (scrollMax <= INITIAL_DIMENSION) return INITIAL_DIMENSION
+  return (scrollOffset / scrollMax) * (MAX_PERCENTAGE - thumbWidthPercent)
+}
+
+const getScrollableNode = (ref) => ref.current?.getScrollableNode?.() ?? null
+
+/**
+ * The `Scroll` component provides a continuous horizontal scrollable container with a progress
+ * bar indicator. Items are displayed in a flow layout where all items share the width of the
+ * widest item and the height of the tallest item.
+ *
+ * ## Props
+ *
+ * - Use `children` to pass `ScrollItem` components
+ * - Use `accessibilityLabel` to provide a meaningful label for the scrollable region
+ * - Use `copy` to select English or French for accessible labels
+ * - Use `dictionary` to override the default translations
+ *
+ * ## Usability and A11y guidelines
+ *
+ * - The scroll container is keyboard-focusable with `tabIndex="0"`
+ * - Each `ScrollItem` is individually focusable via Tab navigation
+ * - Use left and right arrow keys to scroll by one item width
+ * - Press Space bar to scroll right
+ * - When tabbing through items, the scroll follows focus to keep the active item visible
+ * - Screen readers announce the component as a region with a descriptive label
+ * - Touch and swipe gestures are supported on mobile and mobile web
+ *
+ */
+export const Scroll = React.forwardRef(
+  (
+    {
+      children,
+      tokens,
+      variant,
+      copy,
+      dictionary: customDictionary = dictionary,
+      accessibilityLabel,
+      ...rest
+    },
+    ref
+  ) => {
+    const getCopy = useCopy({ dictionary: customDictionary, copy })
+    const resolvedAccessibilityLabel = accessibilityLabel || getCopy('accessibilityLabel')
+    const getTokens = useThemeTokensCallback(COMPONENT_NAME, tokens, variant)
+    const defaultTokens = React.useMemo(() => getTokens(), [getTokens])
+    const descriptionId = useUniqueId(SCROLL_DESCRIPTION_PREFIX)
+    const scrollRef = React.useRef(null)
+    const pressableRef = React.useRef(null)
+    const scrollContainerRef = React.useRef(null)
+    const scrollMaxRef = React.useRef(INITIAL_DIMENSION)
+    const scrollOffsetRef = React.useRef(INITIAL_DIMENSION)
+    const thumbWidthPercentRef = React.useRef(MAX_PERCENTAGE)
+    const thumbRef = React.useRef(null)
+    const isDraggingRef = React.useRef(false)
+    const dragStartRef = React.useRef({
+      mouseX: INITIAL_DIMENSION,
+      scrollOffset: INITIAL_DIMENSION
+    })
+
+    const [scrollOffset, setScrollOffset] = React.useState(INITIAL_DIMENSION)
+    const [containerWidth, setContainerWidth] = React.useState(INITIAL_DIMENSION)
+    const [contentWidth, setContentWidth] = React.useState(INITIAL_DIMENSION)
+    const [itemWidth, setItemWidth] = React.useState(INITIAL_DIMENSION)
+    const [itemHeight, setItemHeight] = React.useState(INITIAL_DIMENSION)
+
+    const { itemGap } = defaultTokens
+    const scrollMax = Math.max(INITIAL_DIMENSION, contentWidth - containerWidth)
+
+    React.useEffect(() => {
+      scrollMaxRef.current = scrollMax
+    }, [scrollMax])
+
+    const thumbWidthPercent = calculateThumbWidth({ containerWidth, contentWidth })
+    thumbWidthPercentRef.current = thumbWidthPercent
+    const thumbPositionPercent = calculateThumbPosition({
+      scrollOffset,
+      scrollMax,
+      thumbWidthPercent
+    })
+
+    const thumbWrapperStyle = React.useMemo(
+      () => [
+        staticStyles.thumbWrapper,
+        selectThumbWrapperStyles({ thumbWidthPercent, thumbPositionPercent }),
+        Platform.OS === 'web' ? staticStyles.thumbCursor : null
+      ],
+      [thumbWidthPercent, thumbPositionPercent]
+    )
+
+    const handleScroll = React.useCallback(
+      ({
+        nativeEvent: {
+          contentOffset: { x }
+        }
+      }) => {
+        scrollOffsetRef.current = x
+        setScrollOffset(x)
+      },
+      []
+    )
+
+    const handleContainerLayout = React.useCallback(
+      ({
+        nativeEvent: {
+          layout: { width }
+        }
+      }) => {
+        setContainerWidth(width)
+      },
+      []
+    )
+
+    const handleContentWidth = React.useCallback((width) => {
+      setContentWidth(width)
+    }, [])
+
+    const handleItemLayout = React.useCallback((width, height) => {
+      setItemWidth((prev) => Math.max(prev, width))
+      setItemHeight((prev) => Math.max(prev, height))
+    }, [])
+
+    React.useEffect(() => {
+      if (Platform.OS !== 'web') return undefined
+      const element = scrollContainerRef.current
+      if (!element) return undefined
+      const handleWheel = (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        const isHorizontal = Math.abs(event.deltaX) > Math.abs(event.deltaY)
+        const delta = isHorizontal ? event.deltaX : event.deltaY
+        const scrollableNode = getScrollableNode(scrollRef)
+        if (scrollableNode) {
+          const maxScroll = scrollMaxRef.current
+          const newScrollLeft = Math.max(
+            INITIAL_DIMENSION,
+            Math.min(maxScroll, scrollableNode.scrollLeft + delta)
+          )
+          scrollableNode.scrollLeft = newScrollLeft
+          scrollOffsetRef.current = newScrollLeft
+          setScrollOffset(newScrollLeft)
+        }
+      }
+      element.addEventListener('wheel', handleWheel, { passive: false })
+      return () => element.removeEventListener('wheel', handleWheel)
+    }, [])
+
+    React.useEffect(() => {
+      if (Platform.OS !== 'web') return undefined
+      const element = scrollContainerRef.current
+      if (!element) return undefined
+
+      const handleFocusIn = (event) => {
+        const scrollableNode = getScrollableNode(scrollRef)
+        if (!scrollableNode) return
+        const focusedItem = event.target.closest(SCROLL_ITEM_SELECTOR)
+        if (!focusedItem) return
+        const itemLeft = focusedItem.offsetLeft
+        const itemRight = itemLeft + focusedItem.offsetWidth
+        const visibleLeft = scrollableNode.scrollLeft
+        const currentContainerWidth = containerWidth
+        const visibleRight = visibleLeft + currentContainerWidth
+        if (itemRight > visibleRight) {
+          scrollRef.current.scrollTo({ x: itemRight - currentContainerWidth, animated: true })
+        } else if (itemLeft < visibleLeft) {
+          scrollRef.current.scrollTo({ x: itemLeft, animated: true })
+        }
+      }
+
+      element.addEventListener('focusin', handleFocusIn)
+      return () => element.removeEventListener('focusin', handleFocusIn)
+    }, [containerWidth])
+
+    const hasScrollbar = scrollMax > INITIAL_DIMENSION
+
+    React.useEffect(() => {
+      if (Platform.OS !== 'web' || !hasScrollbar) return undefined
+      const thumbElement = thumbRef.current
+      if (!thumbElement) return undefined
+
+      const handleMouseDown = (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        isDraggingRef.current = true
+        dragStartRef.current = {
+          mouseX: event.clientX,
+          scrollOffset: getScrollableNode(scrollRef)?.scrollLeft ?? INITIAL_DIMENSION
+        }
+        thumbElement.style.cursor = 'grabbing'
+        document.body.style.cursor = 'grabbing'
+        document.body.style.userSelect = 'none'
+      }
+
+      const handleMouseMove = (event) => {
+        if (!isDraggingRef.current) return
+        const trackElement = pressableRef.current
+        if (!trackElement) return
+        const trackWidth = trackElement.offsetWidth
+        const thumbPixelWidth = (thumbWidthPercentRef.current / MAX_PERCENTAGE) * trackWidth
+        const availableTrackPixels = trackWidth - thumbPixelWidth
+        if (availableTrackPixels <= INITIAL_DIMENSION) return
+        const mouseDelta = event.clientX - dragStartRef.current.mouseX
+        const scrollDelta = (mouseDelta / availableTrackPixels) * scrollMaxRef.current
+        const targetScroll = Math.max(
+          INITIAL_DIMENSION,
+          Math.min(scrollMaxRef.current, dragStartRef.current.scrollOffset + scrollDelta)
+        )
+        const scrollableNode = getScrollableNode(scrollRef)
+        if (scrollableNode) {
+          scrollableNode.scrollLeft = targetScroll
+          scrollOffsetRef.current = targetScroll
+          setScrollOffset(targetScroll)
+        }
+      }
+
+      const handleMouseUp = () => {
+        if (!isDraggingRef.current) return
+        isDraggingRef.current = false
+        thumbElement.style.cursor = ''
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+      }
+
+      thumbElement.addEventListener('mousedown', handleMouseDown)
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
+
+      return () => {
+        thumbElement.removeEventListener('mousedown', handleMouseDown)
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+      }
+    }, [hasScrollbar])
+
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        if (event.key === KEY_ARROW_RIGHT || event.key === KEY_SPACE) {
+          event.preventDefault()
+          if (scrollRef.current) {
+            scrollRef.current.scrollTo({
+              x: scrollOffsetRef.current + itemWidth,
+              animated: true
+            })
+          }
+        } else if (event.key === KEY_ARROW_LEFT) {
+          event.preventDefault()
+          if (scrollRef.current) {
+            scrollRef.current.scrollTo({
+              x: Math.max(INITIAL_DIMENSION, scrollOffsetRef.current - itemWidth),
+              animated: true
+            })
+          }
+        }
+      },
+      [itemWidth]
+    )
+
+    const handleProgressPress = React.useCallback(
+      (event) => {
+        if (scrollMax <= INITIAL_DIMENSION || isDraggingRef.current) return
+        if (Platform.OS === 'web' && pressableRef.current) {
+          const { offsetX } = event.nativeEvent
+          const { offsetWidth } = pressableRef.current
+          const thumbPixelWidth = (thumbWidthPercent / MAX_PERCENTAGE) * offsetWidth
+          const availableTrack = offsetWidth - thumbPixelWidth
+          if (availableTrack <= INITIAL_DIMENSION) return
+          const clickPosition = Math.max(
+            INITIAL_DIMENSION,
+            Math.min(availableTrack, offsetX - thumbPixelWidth / HALF_DIVISOR)
+          )
+          const targetX = (clickPosition / availableTrack) * scrollMax
+          if (scrollRef.current) {
+            scrollRef.current.scrollTo({ x: targetX, animated: true })
+          }
+        } else if (pressableRef.current) {
+          const { locationX } = event.nativeEvent
+          pressableRef.current.measure((_x, _y, width) => {
+            const thumbPixelWidth = (thumbWidthPercent / MAX_PERCENTAGE) * width
+            const availableTrack = width - thumbPixelWidth
+            if (availableTrack <= INITIAL_DIMENSION) return
+            const clickPosition = Math.max(
+              INITIAL_DIMENSION,
+              Math.min(availableTrack, locationX - thumbPixelWidth / HALF_DIVISOR)
+            )
+            const targetX = (clickPosition / availableTrack) * scrollMax
+            if (scrollRef.current) {
+              scrollRef.current.scrollTo({ x: targetX, animated: true })
+            }
+          })
+        }
+      },
+      [scrollMax, thumbWidthPercent]
+    )
+
+    const handleContainerRef = React.useCallback(
+      (node) => {
+        scrollContainerRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) Object.assign(ref, { current: node })
+      },
+      [ref]
+    )
+
+    return (
+      <View
+        ref={handleContainerRef}
+        style={staticStyles.container}
+        {...selectContainerA11yProps({
+          accessibilityLabel: resolvedAccessibilityLabel,
+          descriptionId,
+          handleKeyDown
+        })}
+        {...selectProps(rest)}
+      >
+        <A11yText text={getCopy('instructionText')} nativeID={descriptionId} />
+        <View style={staticStyles.scrollContainer}>
+          <ScrollViewEnd
+            ref={scrollRef}
+            horizontal
+            onScrollEnd={handleScroll}
+            onScroll={handleScroll}
+            onContentSizeChange={handleContentWidth}
+            onLayout={handleContainerLayout}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={[staticStyles.scrollContent, selectScrollContentStyle(itemGap)]}
+          >
+            <ScrollProvider
+              itemWidth={itemWidth}
+              itemHeight={itemHeight}
+              onItemLayout={handleItemLayout}
+            >
+              {children}
+            </ScrollProvider>
+          </ScrollViewEnd>
+        </View>
+        {scrollMax > INITIAL_DIMENSION && (
+          <Pressable
+            ref={pressableRef}
+            style={[staticStyles.pressable, selectPressableStyles(defaultTokens)]}
+            onPress={handleProgressPress}
+          >
+            {(pressableState) => (
+              <ScrollProgress
+                ref={thumbRef}
+                pressableState={pressableState}
+                getTokens={getTokens}
+                thumbWrapperStyle={thumbWrapperStyle}
+                getCopy={getCopy}
+              />
+            )}
+          </Pressable>
+        )}
+      </View>
+    )
+  }
+)
+
+Scroll.displayName = 'Scroll'
+
+Scroll.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Scroll items to display. Should be `ScrollItem` components.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Theme tokens for customizing the Scroll appearance
+   */
+  tokens: getTokensPropType('Scroll'),
+  /**
+   * Variant for the Scroll component
+   */
+  variant: variantProp.propType,
+  /**
+   * Select English or French copy for accessible labels.
+   */
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary by passing the complete dictionary object for `en` and `fr`.
+   */
+  dictionary: PropTypes.shape({
+    en: PropTypes.object,
+    fr: PropTypes.object
+  }),
+  /**
+   * Accessibility label for the scrollable region
+   */
+  accessibilityLabel: PropTypes.string
+}
+
+const staticStyles = StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  scrollContainer: {
+    width: '100%'
+  },
+  pressable: {
+    justifyContent: 'center',
+    width: '100%'
+  },
+  scrollContent: {
+    alignSelf: 'flex-start',
+    flexGrow: 1
+  },
+  thumbWrapper: {
+    height: '100%'
+  },
+  thumbCursor: {
+    cursor: 'grab'
+  }
+})

package/src/Scroll/ScrollContext.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ScrollContext = React.createContext()
+
+export const ScrollProvider = ({ children, itemWidth, itemHeight, onItemLayout }) => {
+  const value = React.useMemo(
+    () => ({ itemWidth, itemHeight, onItemLayout }),
+    [itemWidth, itemHeight, onItemLayout]
+  )
+  return <ScrollContext.Provider value={value}>{children}</ScrollContext.Provider>
+}
+
+export function useScroll() {
+  const context = React.useContext(ScrollContext)
+  if (context === undefined) {
+    throw new Error(`'useScroll' must be used within a 'ScrollProvider'`)
+  }
+  return context
+}
+
+ScrollProvider.propTypes = {
+  /**
+   * Content to be rendered within the scroll context provider.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Width of each scroll item in pixels.
+   */
+  itemWidth: PropTypes.number.isRequired,
+  /**
+   * Height of each scroll item in pixels.
+   */
+  itemHeight: PropTypes.number.isRequired,
+  /**
+   * Callback invoked when a scroll item layout is measured.
+   */
+  onItemLayout: PropTypes.func.isRequired
+}

package/src/Scroll/ScrollItem.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Platform, View } from 'react-native'
+import { a11yProps } from '../utils/props/a11yProps'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { viewProps } from '../utils/props/viewProps'
+import { layoutTags, getA11yPropsFromHtmlTag } from '../utils/a11y/semantics'
+import { useScroll } from './ScrollContext'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const DEFAULT_TAG = 'li'
+const DATA_SCROLL_ITEM = 'scrollItem'
+const INITIAL_DIMENSION = 0
+const TAB_INDEX = 0
+
+const selectContainerStyle = ({ itemWidth, itemHeight }) => {
+  const style = {}
+  if (itemWidth > INITIAL_DIMENSION) {
+    style.width = itemWidth
+  }
+  if (itemHeight > INITIAL_DIMENSION) {
+    style.height = itemHeight
+  }
+  return style
+}
+
+/**
+ * The `ScrollItem` component wraps individual items within a `Scroll` container. Each item
+ * is individually focusable and reports its natural dimensions so the parent can apply uniform
+ * sizing across all items.
+ *
+ * ## Props
+ *
+ * - Use `children` to provide the content of the scroll item
+ * - Use `tag` to set the HTML tag of the outer container (defaults to `'li'`)
+ *
+ */
+const ScrollItem = React.forwardRef(({ children, tag = DEFAULT_TAG, ...rest }, ref) => {
+  const { itemWidth, itemHeight, onItemLayout } = useScroll()
+
+  const handleLayout = React.useCallback(
+    ({
+      nativeEvent: {
+        layout: { width, height }
+      }
+    }) => {
+      onItemLayout?.(width, height)
+    },
+    [onItemLayout]
+  )
+
+  const selectedProps = selectProps({
+    ...rest,
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
+  })
+
+  return (
+    <View
+      ref={ref}
+      style={selectContainerStyle({ itemWidth, itemHeight })}
+      onLayout={handleLayout}
+      dataSet={{ [DATA_SCROLL_ITEM]: true }}
+      {...(Platform.OS === 'web' ? { tabIndex: TAB_INDEX } : { focusable: true })}
+      {...selectedProps}
+    >
+      {children}
+    </View>
+  )
+})
+
+ScrollItem.displayName = 'ScrollItem'
+
+ScrollItem.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Content of the scroll item
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Sets the HTML tag of the outer container. Defaults to `'li'`.
+   */
+  tag: PropTypes.oneOf(layoutTags)
+}
+
+const MemoizedScrollItem = React.memo(ScrollItem)
+export { MemoizedScrollItem as ScrollItem }

package/src/Scroll/ScrollProgress.jsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+import { resolvePressableState } from '../utils/pressability'
+import { useAnimatedValue } from '../utils/animation/useAnimatedValue'
+import { Progress } from '../Progress/Progress'
+import { ProgressBar } from '../Progress/ProgressBar'
+
+const MAX_PERCENTAGE = 100
+const BORDER_RADIUS_DIVISOR = 2
+
+const staticProgressTokens = {
+  borderWidth: 0,
+  borderColor: 'transparent'
+}
+
+const staticProgressBarTokens = {
+  gradient: null,
+  outlineWidth: 0
+}
+
+const selectProgressTokens = ({ progressTrackHeight, progressBarHeight, progressTrackColor }) => ({
+  height: progressTrackHeight,
+  barHeight: progressBarHeight,
+  backgroundColor: progressTrackColor,
+  borderRadius: progressTrackHeight / BORDER_RADIUS_DIVISOR
+})
+
+const selectBarTokens = ({ progressBarColor, progressBarHeight }) => ({
+  backgroundColor: progressBarColor,
+  borderRadius: progressBarHeight / BORDER_RADIUS_DIVISOR
+})
+
+export const ScrollProgress = React.forwardRef(
+  ({ pressableState, getTokens, thumbWrapperStyle, getCopy }, ref) => {
+    const state = resolvePressableState(pressableState)
+    const themeTokens = getTokens(state)
+    const animatedBarHeight = useAnimatedValue(themeTokens.progressBarHeight)
+    const animatedTokens = { ...themeTokens, progressBarHeight: animatedBarHeight }
+
+    return (
+      <Progress tokens={{ ...staticProgressTokens, ...selectProgressTokens(animatedTokens) }}>
+        <View ref={ref} style={thumbWrapperStyle}>
+          <ProgressBar
+            percentage={MAX_PERCENTAGE}
+            tokens={{ ...staticProgressBarTokens, ...selectBarTokens(animatedTokens) }}
+            accessibilityLabel={getCopy('progressBarLabel')}
+          />
+        </View>
+      </Progress>
+    )
+  }
+)
+
+ScrollProgress.displayName = 'ScrollProgress'
+
+ScrollProgress.propTypes = {
+  /**
+   * State object from Pressable's render callback containing hovered, pressed, and focused states
+   */
+  pressableState: PropTypes.object.isRequired,
+  /**
+   * Theme token resolver callback from useThemeTokensCallback that accepts appearance state
+   */
+  getTokens: PropTypes.func.isRequired,
+  /**
+   * Style array for the thumb wrapper containing static and dynamic position styles
+   */
+  thumbWrapperStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+  /**
+   * Copy resolver function from useCopy for retrieving localized strings
+   */
+  getCopy: PropTypes.func.isRequired
+}

package/src/Scroll/dictionary.js

@@ -0,0 +1,12 @@
+export const dictionary = {
+  en: {
+    accessibilityLabel: 'Scrollable content',
+    instructionText: 'Use Tab, arrow keys, or space bar to navigate',
+    progressBarLabel: 'Scroll position'
+  },
+  fr: {
+    accessibilityLabel: 'Contenu défilable',
+    instructionText: "Utilisez Tab, les touches fléchées ou la barre d'espace pour naviguer",
+    progressBarLabel: 'Position de défilement'
+  }
+}