@telus-uds/components-base 1.3.0 → 1.5.0

package/lib-module/utils/withLinkRouter.js

@@ -0,0 +1,82 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types'; // Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
+/**
+ * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
+ * This may be used to provide custom wrappers for integrations with third party libraries.
+ *
+ * If LinkRouter is passed, LinkRouter is rendered in place of the main component and is passed:
+ *
+ *  - `linkRouterProps`: an optional object passed alongside LinkRouter, for props needed by the wrapper
+ *    that are not valid props for the wrapped component.
+ *  - `Component`: automatically provided, the original component to render inside the wrapper.
+ *  - `ref`: forwarded `ref` passed down to `Component`
+ *  - All other props passed to the outer component
+ *
+ * @example A LinkRouter component to be used with link-like components might look like:
+ *
+ * ```jsx
+ * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
+ *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
+ * })
+ * ```
+ *
+ * Any component that takes href and onPress props may then use this wrapper:
+ *
+ * ```jsx
+ * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
+ * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
+ * ```
+ */
+
+
+const withLinkRouter = Component => {
+  const wrappedComponent = /*#__PURE__*/forwardRef(({
+    LinkRouter,
+    linkRouterProps,
+    ...props
+  }, ref) => {
+    if (!LinkRouter) return /*#__PURE__*/_jsx(Component, { ...props,
+      ref: ref
+    });
+    return /*#__PURE__*/_jsx(LinkRouter, {
+      linkRouterProps: linkRouterProps,
+      Component: Component,
+      ref: ref,
+      ...props
+    });
+  }); // Ensure the returned component has appropriate outer properties set:
+
+  /* eslint-disable-next-line react/forbid-foreign-prop-types */
+
+  const {
+    displayName,
+    name,
+    propTypes,
+    ...otherProperties
+  } = Component; // Apply unique component name as a displayName
+
+  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+
+  wrappedComponent.propTypes = { ...Component.propTypes,
+    ...withLinkRouter.propTypes
+  }; // Forward any other properties explicitly set e.g. Component.SubComponent
+
+  Object.keys(otherProperties).forEach(key => {
+    // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
+    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
+      wrappedComponent[key] = Component[key];
+    }
+  });
+  return wrappedComponent;
+};
+
+withLinkRouter.propTypes = {
+  LinkRouter: PropTypes.elementType,
+  linkRouterProps: PropTypes.object
+};
+export default withLinkRouter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -9,7 +9,9 @@
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "UNLICENSED",
   "main": "lib/index.js",
+  "module": "lib-module/index.js",
   "react-native": "src/index.js",
+  "sideEffects": false,
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -24,7 +26,9 @@
     "lint:fix": "telus-standard --fix",
     "format": "prettier --write .",
     "build": "yarn build:code && yarn build:docs",
-    "build:code": "babel src -d lib",
+    "build:main": "babel src -d lib",
+    "build:module": "babel src -d lib-module --env-name module",
+    "build:code": "yarn build:main && yarn build:module",
     "build:docs": "babel-node --plugins=react-docgen-alpha generate-component-docs.js",
     "storybook": "start-storybook",
     "dev": "yarn build:code --watch",
@@ -46,7 +50,7 @@
     "react-native-web": "^0.17.0"
   },
   "devDependencies": {
-    "@telus-uds/browserslist-config": "^1.0.0",
+    "@telus-uds/browserslist-config": "^1.0.1",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",
@@ -54,8 +58,8 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.1",
-    "@telus-uds/system-theme-tokens": "^1.2.1",
+    "@telus-uds/system-constants": "^1.0.2",
+    "@telus-uds/system-theme-tokens": "^1.4.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/src/A11yText/index.jsx

@@ -2,7 +2,9 @@ import React, { forwardRef } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { a11yProps } from '../utils/props'
+import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
  * A11yText is a zero-size invisible element that adds text to be read by screen readers.
@@ -11,7 +13,7 @@ import { a11yProps } from '../utils/props'
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
 const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
-  const a11y = a11yProps.select({
+  const selectedProps = selectProps({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
     // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
@@ -21,12 +23,14 @@ const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
     accessibilityRole: heading ? 'header' : 'text',
     ...rest
   })
-  return <View style={styles.invisible} ref={ref} {...a11y} />
+
+  return <View style={styles.invisible} ref={ref} {...selectedProps} />
 })
 
 A11yText.displayName = 'A11yText'
 
 A11yText.propTypes = {
+  ...selectedSystemPropTypes,
   text: PropTypes.string.isRequired,
   heading: PropTypes.bool
 }

package/src/ActivityIndicator/Spinner.jsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
+import { useA11yInfo } from '../A11yInfoProvider'
 
 const SVG_RADIUS = 20
 const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI
@@ -20,50 +21,61 @@ const bezierProps = {
 }
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = forwardRef(({ size, color, thickness, label }, ref) => (
-  <svg
-    ref={ref}
-    width={`${size}px`}
-    height={`${size}px`}
-    viewBox="0 0 48 48"
-    aria-valuetext={label}
-    role="progressbar"
-    aria-busy={true}
-  >
-    <g>
-      <animateTransform
-        attributeName="transform"
-        type="rotate"
-        values={`-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`}
-        {...animationProps}
-      />
-      <circle
-        fill="none"
-        stroke={color}
-        strokeWidth={(thickness * 48) / size}
-        strokeLinecap="round"
-        cx="24"
-        cy="24"
-        r="20"
-        strokeDasharray={[MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]}
-        strokeDashoffset={0}
-      >
-        <animate
-          attributeName="stroke-dashoffset"
-          values={`0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`}
-          {...animationProps}
-          {...bezierProps}
-        />
-        <animate
-          attributeName="stroke-dasharray"
-          values={`${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`}
-          {...animationProps}
-          {...bezierProps}
-        />
-      </circle>
-    </g>
-  </svg>
-))
+const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
+  const { reduceMotionEnabled } = useA11yInfo()
+  return (
+    <svg
+      ref={ref}
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 0 48 48"
+      aria-valuetext={label}
+      role="progressbar"
+      aria-busy={true}
+    >
+      <g>
+        {reduceMotionEnabled ? null : (
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            values={`-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`}
+            {...animationProps}
+          />
+        )}
+        <circle
+          fill="none"
+          stroke={color}
+          strokeWidth={(thickness * 48) / size}
+          strokeLinecap="round"
+          cx="24"
+          cy="24"
+          r="20"
+          strokeDasharray={
+            reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]
+          }
+          strokeDashoffset={0}
+        >
+          {reduceMotionEnabled ? null : (
+            <>
+              <animate
+                attributeName="stroke-dashoffset"
+                values={`0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`}
+                {...animationProps}
+                {...bezierProps}
+              />
+              <animate
+                attributeName="stroke-dasharray"
+                values={`${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`}
+                {...animationProps}
+                {...bezierProps}
+              />
+            </>
+          )}
+        </circle>
+      </g>
+    </svg>
+  )
+})
 Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = propTypes

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,12 +1,14 @@
 import React, { forwardRef } from 'react'
 import { Animated, Easing, StyleSheet, View } from 'react-native'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
+import { useA11yInfo } from '../A11yInfoProvider'
 
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
 const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
+  const { reduceMotionEnabled } = useA11yInfo()
 
   React.useLayoutEffect(() => {
     const loop = Animated.timing(timer, {
@@ -17,16 +19,19 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
       toValue: 1,
       isInteraction: false
     })
-    Animated.loop(loop).start()
-  }, [timer])
+
+    if (!reduceMotionEnabled) Animated.loop(loop).start()
+    else loop.stop()
+  }, [timer, reduceMotionEnabled])
 
   const frames = (60 * DURATION) / 1000
   const easing = Easing.bezier(...BEZIER)
   const containerStyle = {
     width: size,
-    height: size / 2,
+    height: size / (reduceMotionEnabled ? 1.5 : 2),
     overflow: 'hidden'
   }
+  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]
 
   // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
   return (
@@ -39,7 +44,7 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
       accessibilityState={{ busy: true }}
     >
       <Animated.View style={[{ width: size, height: size }]} collapsable={false}>
-        {[0, 1].map((index) => {
+        {animationFrequency.map((index) => {
           const inputRange = Array.from(
             new Array(frames),
             (_, frameIndex) => frameIndex / (frames - 1)
@@ -59,8 +64,16 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
 
           const layerStyle = {
             width: size,
-            height: size,
-            transform: [
+            height: size
+          }
+
+          const viewportStyle = {
+            width: size,
+            height: size
+          }
+
+          if (!reduceMotionEnabled) {
+            layerStyle.transform = [
               {
                 rotate: timer.interpolate({
                   inputRange: [0, 1],
@@ -68,12 +81,7 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
                 })
               }
             ]
-          }
-
-          const viewportStyle = {
-            width: size,
-            height: size,
-            transform: [
+            viewportStyle.transform = [
               {
                 translateY: index ? -size / 2 : 0
               },

package/src/Box/Box.jsx

@@ -4,15 +4,18 @@ import { View, ScrollView } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
-  spacingProps,
-  variantProp,
+  getA11yPropsFromHtmlTag,
   getTokensPropType,
+  layoutTags,
+  selectSystemProps,
+  spacingProps,
   useSpacingScale,
-  viewProps,
-  getA11yPropsFromHtmlTag,
-  layoutTags
+  variantProp,
+  viewProps
 } from '../utils'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
@@ -122,8 +125,7 @@ const Box = forwardRef(
   ) => {
     const props = {
       ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-      ...a11yProps.select(rest),
-      ...viewProps.select(rest)
+      ...selectProps(rest)
     }
 
     const themeTokens = useThemeTokens('Box', tokens, variant)
@@ -155,8 +157,7 @@ const Box = forwardRef(
 Box.displayName = 'Box'
 
 Box.propTypes = {
-  ...a11yProps.propTypes,
-  ...viewProps.types,
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('Box'),
   /**

package/src/Button/ButtonBase.jsx

@@ -11,10 +11,14 @@ import {
   linkProps,
   resolvePressableState,
   resolvePressableTokens,
+  selectSystemProps,
+  viewProps,
   wrapStringsInText,
   withLinkRouter
 } from '../utils'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
@@ -144,7 +148,6 @@ const ButtonBase = forwardRef(
       disabled = false, // alias for inactive
       inactive = disabled,
       selected = false,
-      dataSet,
       ...rawRest
     },
     ref
@@ -154,13 +157,13 @@ const ButtonBase = forwardRef(
     const resolveButtonTokens = (pressableState) =>
       resolvePressableTokens(tokens, pressableState, extraButtonState)
 
-    const a11y = a11yProps.select(rest)
+    const systemProps = selectProps(rest)
 
     const getPressableStyle = (pressableState) => {
       const themeTokens = resolveButtonTokens(pressableState)
       return [
         staticStyles.row,
-        selectWebOnlyStyles(inactive, themeTokens, a11y),
+        selectWebOnlyStyles(inactive, themeTokens, systemProps),
         selectOuterContainerStyles(themeTokens),
         selectOuterWidthStyles(themeTokens)
       ]
@@ -173,9 +176,8 @@ const ButtonBase = forwardRef(
         onPress={linkProps.handleHref({ href, onPress })}
         style={getPressableStyle}
         disabled={inactive}
-        dataSet={dataSet}
         hrefAttrs={hrefAttrs}
-        {...a11y}
+        {...systemProps}
       >
         {(pressableState) => {
           const themeTokens = resolveButtonTokens(pressableState)
@@ -224,9 +226,8 @@ ButtonBase.displayName = 'ButtonBase'
 
 ButtonBase.propTypes = {
   id: PropTypes.string,
-  ...a11yProps.types,
-  ...buttonPropTypes,
-  ...linkProps.types
+  ...selectedSystemPropTypes,
+  ...buttonPropTypes
 }
 ButtonBase.defaultProps = { id: undefined }
 

package/src/Card/Card.jsx

@@ -4,9 +4,11 @@ import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { a11yProps } from '../utils/props'
+import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
 import CardBase from './CardBase'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * A basic card component, unstyled by default.
  *
@@ -58,18 +60,19 @@ import CardBase from './CardBase'
 const Card = ({ children, tokens, variant, dataSet, ...rest }) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+
   return (
-    <CardBase tokens={themeTokens} dataSet={dataSet} {...rest}>
+    <CardBase tokens={themeTokens} dataSet={dataSet} {...selectProps(rest)}>
       {children}
     </CardBase>
   )
 }
 
 Card.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),
-  variant: variantProp.propType,
-  ...a11yProps.types
+  variant: variantProp.propType
 }
 
 export default Card

package/src/Card/PressableCardBase.jsx

@@ -5,19 +5,23 @@ import { Pressable, Platform } from 'react-native'
 import { useViewport } from '../ViewportProvider'
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider'
 import {
+  a11yProps,
+  clickProps,
+  getTokenNames,
+  getTokensSetPropType,
+  linkProps,
   resolvePressableState,
   resolvePressableTokens,
+  selectSystemProps,
   selectTokens,
-  getTokenNames,
-  getTokensSetPropType,
   variantProp,
-  linkProps,
-  clickProps,
+  viewProps,
   withLinkRouter
 } from '../utils'
-import { a11yProps } from '../utils/props'
 import CardBase from './CardBase'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const tokenKeys = [
   ...getTokenNames('Card'),
 
@@ -52,10 +56,6 @@ const PressableCardBase = forwardRef(
   ) => {
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const viewport = useViewport()
-    const a11y = a11yProps.select({
-      ...rest,
-      accessibilityRole
-    })
     const additionalState = { checked, validation, inactive, viewport }
 
     const getCardState = (pressableState) => resolvePressableState(pressableState, additionalState)
@@ -98,7 +98,7 @@ const PressableCardBase = forwardRef(
         onKeyDown={handleKeyDown}
         hrefAttrs={hrefAttrs}
         style={getOuterBorderStyle}
-        {...a11y}
+        {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (
           <CardBase tokens={getCardTokens(pressableState)}>
@@ -112,10 +112,10 @@ const PressableCardBase = forwardRef(
 PressableCardBase.displayName = 'PressableCardBase'
 
 PressableCardBase.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   tokens: getTokensSetPropType(tokenKeys, { requireAll: true, allowFunction: true }),
-  variant: variantProp.propType,
-  ...a11yProps.types
+  variant: variantProp.propType
 }
 
 export default withLinkRouter(PressableCardBase)

package/src/Checkbox/Checkbox.jsx

@@ -7,10 +7,18 @@ import CheckboxLabel from '../InputLabel/LabelContent'
 import Feedback from '../Feedback'
 import StackView from '../StackView'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
-import { getTokensPropType, useInputValue, variantProp } from '../utils'
-import { a11yProps } from '../utils/props'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useInputValue,
+  variantProp,
+  viewProps
+} from '../utils'
 import useUniqueId from '../utils/useUniqueId'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectInputStyles = (
   {
     iconBackgroundColor,
@@ -154,7 +162,6 @@ const Checkbox = forwardRef(
       // The expected keyboard shortcut for activating a checkbox is the Space key
       if (event?.key === ' ') handleChange(event)
     }
-    const accessibilityProps = a11yProps.select(rest)
     const uniqueId = useUniqueId('checkbox')
     const inputId = id ?? uniqueId
 
@@ -167,7 +174,7 @@ const Checkbox = forwardRef(
             onPress={handleChange}
             accessibilityRole="checkbox"
             accessibilityState={{ checked: isChecked, disabled: inactive }}
-            {...accessibilityProps}
+            {...selectProps(rest)}
           >
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
@@ -222,7 +229,7 @@ const Checkbox = forwardRef(
 Checkbox.displayName = 'Checkbox'
 
 Checkbox.propTypes = {
-  ...a11yProps.propTypes,
+  ...selectedSystemPropTypes,
   /**
    * Use `checked` for controlled Checkbox. For uncontrolled Checkbox, use the `defaultChecked` prop.
    */

package/src/Divider/Divider.jsx

@@ -3,7 +3,17 @@ import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import Spacer from '../Spacer'
-import { getTokensPropType, variantProp, spacingProps } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  spacingProps,
+  variantProp,
+  viewProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
  * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
@@ -45,7 +55,7 @@ import { getTokensPropType, variantProp, spacingProps } from '../utils'
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = forwardRef(({ variant, vertical = false, space, tokens, testID }, ref) => {
+const Divider = forwardRef(({ variant, vertical = false, space, tokens, ...rest }, ref) => {
   const { color, width } = useThemeTokens('Divider', tokens, variant)
 
   const borderStyles = vertical
@@ -68,8 +78,10 @@ const Divider = forwardRef(({ variant, vertical = false, space, tokens, testID }
       : // There are no such equivalent attributes for native
         {}
 
+  const { testID, ...selectedProps } = selectProps({ ...a11y, ...rest })
+
   const divider = (
-    <View ref={ref} style={[styles.divider, borderStyles]} testID={testID} {...a11y} />
+    <View ref={ref} style={[styles.divider, borderStyles]} testID={testID} {...selectedProps} />
   )
   if (!space) return divider
   const spacerProps = { space, direction: vertical ? 'row' : 'column' }
@@ -84,6 +96,7 @@ const Divider = forwardRef(({ variant, vertical = false, space, tokens, testID }
 Divider.displayName = 'Divider'
 
 Divider.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Divider'),
   space: spacingProps.types.spacingValue,
   variant: variantProp.propType,
@@ -91,13 +104,7 @@ Divider.propTypes = {
    * By default, the divider is a horizontal line the full width of its parent.
    * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
    */
-  vertical: PropTypes.bool,
-  /**
-   * @ignore
-   * In tests, the only way to select dividers is with testID prop and getByTestId, since they have no content,
-   * no accessibility role on native, and there is no equivalent of nextSibling in React Native Testing Library.
-   */
-  testID: PropTypes.string
+  vertical: PropTypes.bool
 }
 
 const styles = StyleSheet.create({