@telus-uds/components-base 1.14.3 → 1.15.0

package/src/List/ListItemMark.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View, StyleSheet } from 'react-native'
+
+export const tokenTypes = {
+  itemIconSize: PropTypes.number.isRequired,
+  itemIconColor: PropTypes.string.isRequired,
+  listGutter: PropTypes.number.isRequired,
+  iconMarginTop: PropTypes.number.isRequired
+}
+
+const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
+  size: itemIconSize,
+  color: itemIconColor
+})
+
+const selectSideItemContainerStyles = ({ listGutter, iconMarginTop }) => ({
+  marginTop: iconMarginTop,
+  marginRight: listGutter
+})
+
+// Align bullets with the top line of text the same way icons are aligned
+const selectBulletPositioningStyles = ({ itemIconSize }) => ({
+  width: itemIconSize,
+  height: itemIconSize
+})
+
+const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
+  width: itemBulletWidth,
+  height: itemBulletHeight,
+  borderRadius: itemBulletHeight / 2,
+  backgroundColor: itemBulletColor
+})
+
+const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
+  width: itemBulletContainerWidth,
+  alignItems: itemBulletContainerAlign
+})
+
+/**
+ * Subcomponent used within ListItem and similar components for rendering bullets or icons
+ * that sit alongside a ListIconContent in a { flexDirection: row } container.
+ *
+ * It's the responsibility of themes to make sure that the supplied tokens align the
+ * icon or bullet nicely against the first line of text in a ListIconContent.
+ */
+const ListItemMark = ({ icon, iconColor, iconSize, tokens = {} }) => {
+  const IconComponent = icon || <></>
+
+  const themeTokens = typeof tokens === 'function' ? tokens() : tokens
+
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
+
+  if (icon) {
+    const iconTokens = selectItemIconTokens(themeTokens)
+    return (
+      <View style={sideItemContainerStyles}>
+        <IconComponent size={iconSize || iconTokens.size} color={iconColor || iconTokens.color} />
+      </View>
+    )
+  }
+
+  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
+  const itemBulletStyles = selectBulletStyles(themeTokens)
+  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
+  return (
+    <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
+      <View style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}>
+        <View style={itemBulletStyles} testID="unordered-item-bullet" />
+      </View>
+    </View>
+  )
+}
+
+ListItemMark.propTypes = {
+  tokens: PropTypes.shape(tokenTypes).isRequired,
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+  /**
+   * Allow the user define the icon size
+   */
+  iconSize: PropTypes.number
+}
+
+const staticStyles = StyleSheet.create({
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+})
+
+export default ListItemMark

package/src/List/PressableListItemBase.jsx

@@ -0,0 +1,102 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
+
+import { Pressable, StyleSheet, Platform } from 'react-native'
+
+import {
+  resolvePressableTokens,
+  clickProps,
+  linkProps,
+  hrefAttrsProp,
+  withLinkRouter
+} from '../utils'
+
+import ListItemBase from './ListItemBase'
+import ListItemContent, { tokenTypes as contentTokenTypes } from './ListItemContent'
+import ListItemMark, { tokenTypes as markTokenTypes } from './ListItemMark'
+
+const selectPressableStyles = ({
+  backgroundColor,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  interItemMargin
+}) => ({
+  backgroundColor,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom,
+  marginBottom: interItemMargin,
+  ...Platform.select({ web: { outline: 'none' } })
+})
+
+const PressableListItemBase = forwardRef(
+  ({ href, tokens, icon, children, listItemRef, ...rest }, ref) => {
+    const { onPress, ...props } = clickProps.toPressProps(rest)
+    const { hrefAttrs, rest: listItemProps } = hrefAttrsProp.bundle(props)
+    const handlePress = linkProps.handleHref({ href, onPress })
+
+    return (
+      <ListItemBase ref={listItemRef} tokens={tokens()} {...listItemProps}>
+        {({ isLastItem }) => {
+          const getTokens = (pressableState) =>
+            resolvePressableTokens(tokens, pressableState, { last: isLastItem })
+          const getPressableStyle = (pressableState) => [
+            staticStyles.itemContainer,
+            selectPressableStyles(getTokens(pressableState))
+          ]
+          return (
+            <Pressable
+              onPress={handlePress}
+              href={href}
+              hrefAttrs={hrefAttrs}
+              style={getPressableStyle}
+              ref={ref}
+            >
+              {(pressableState) => {
+                const themeTokens = getTokens(pressableState)
+                return (
+                  <>
+                    <ListItemMark icon={icon} tokens={themeTokens} />
+                    <ListItemContent tokens={themeTokens}>
+                      {typeof children === 'function' ? children(pressableState) : children}
+                    </ListItemContent>
+                  </>
+                )
+              }}
+            </Pressable>
+          )
+        }}
+      </ListItemBase>
+    )
+  }
+)
+
+PressableListItemBase.displayName = 'PressableListItemBase'
+
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  tokens: {
+    ...contentTokenTypes,
+    ...markTokenTypes
+  }
+})
+
+PressableListItemBase.propTypes = {
+  href: PropTypes.string,
+  onPress: PropTypes.func,
+  // TODO - type this better, maybe import the subcomponent token types and run it through util
+  // eslint-disable-next-line react/forbid-prop-types
+  tokens: PropTypes.any,
+  icon: PropTypes.elementType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  listItemRef: ABBPropTypes.ref()
+}
+
+export default withLinkRouter(PressableListItemBase)

package/src/Notification/Notification.jsx

@@ -112,7 +112,7 @@ const Notification = forwardRef(
     const textStyles = selectTextStyles(themeTokens, themeOptions)
 
     const content = wrapStringsInText(
-      typeof children === 'function' ? children({ textStyles }) : children,
+      typeof children === 'function' ? children({ textStyles, variant }) : children,
       { style: textStyles }
     )
 

package/src/Pagination/Pagination.jsx

@@ -103,12 +103,17 @@ const Pagination = forwardRef(
               label={buttonLabel}
               copy={copy}
               isActive={isItemActive(itemIndex)}
+              key={buttonLabel}
             />
           )
         }
 
         if (shouldRenderEllipsis(itemIndex)) {
-          return <Text style={ellipsisTextStyles}>...</Text>
+          return (
+            <Text key="..." style={ellipsisTextStyles}>
+              ...
+            </Text>
+          )
         }
 
         return null

package/src/Radio/Radio.jsx

@@ -151,15 +151,19 @@ const Radio = forwardRef(
     const uniqueId = useUniqueId('radio')
     const inputId = id ?? uniqueId
 
+    const selectedProps = selectProps({
+      accessibilityRole: 'radio',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
     return (
       <Pressable
         ref={ref}
         disabled={inactive}
         onKeyDown={handleKeyDown}
         onPress={handleChange}
-        accessibilityRole="radio"
-        accessibilityState={{ checked: isChecked, disabled: inactive }}
-        {...selectProps(rest)}
+        {...selectedProps}
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })

package/src/RadioCard/RadioCard.jsx

@@ -98,6 +98,12 @@ const RadioCard = forwardRef(
     const getCardTokens = (cardState) => selectPressableCardTokens(getTokens(cardState))
     const { themeOptions } = useTheme()
 
+    const selectedProps = selectProps({
+      accessibilityRole: 'radio',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
     return (
       <PressableCardBase
         ref={ref}
@@ -105,9 +111,7 @@ const RadioCard = forwardRef(
         checked={isChecked}
         tokens={getCardTokens}
         onPress={handleChange}
-        accessibilityRole="radio"
-        accessibilityState={{ checked: isChecked, disabled: inactive }}
-        {...selectProps(rest)}
+        {...selectedProps}
       >
         {(cardState) => {
           const { radioSpace, contentSpace, ...themeTokens } = getTokens(cardState)

package/src/Tabs/Tabs.jsx

@@ -6,6 +6,8 @@ import StackView from '../StackView'
 import {
   a11yProps,
   getTokensPropType,
+  focusHandlerProps,
+  pressProps,
   selectSystemProps,
   useHash,
   useInputValue,
@@ -20,6 +22,12 @@ import HorizontalScroll, {
 import TabsItem from './TabsItem'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  pressProps,
+  viewProps
+])
 
 const { selectHorizontalScrollTokens, useItemPositions } = horizontalScrollUtils
 
@@ -99,15 +107,22 @@ const Tabs = forwardRef(
                 label,
                 id,
                 accessibilityRole = defaultTabItemAccessibiltyRole,
+                onPress,
                 ref: itemRef,
                 LinkRouter: ItemLinkRouter = LinkRouter,
-                linkRouterProps: itemLinkRouterProps
+                linkRouterProps: itemLinkRouterProps,
+                ...itemRest
               },
               index
             ) => {
               const itemId = id ?? label
               const isSelected = Boolean(currentValue && currentValue === itemId)
-              const handlePress = (event) => setValue(itemId, event)
+              const handlePress = (event) => {
+                if (typeof onPress === 'function') onPress(event)
+                setValue(itemId, event)
+              }
+
+              const itemProps = selectItemProps(itemRest)
               return (
                 <TabsItem
                   ref={itemRef}
@@ -122,6 +137,7 @@ const Tabs = forwardRef(
                   accessibilityRole={accessibilityRole}
                   LinkRouter={ItemLinkRouter}
                   linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                  {...itemProps}
                 >
                   {label}
                 </TabsItem>
@@ -140,6 +156,7 @@ Tabs.propTypes = {
   ...withLinkRouter.PropTypes,
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...selectedItemPropTypes,
       ...withLinkRouter.PropTypes,
       href: PropTypes.string,
       label: PropTypes.string,

package/src/Tags/Tags.jsx

@@ -127,12 +127,12 @@ const Tags = forwardRef(
             toggleOneValue(id, event)
           }
 
-          const itemProps = {
+          const itemProps = selectItemProps({
             accessibilityState: { checked: isSelected },
             accessibilityRole: itemA11yRole,
             ...a11yProps.getPositionInSet(items.length, index),
-            ...selectItemProps(itemRest)
-          }
+            ...itemRest
+          })
 
           return (
             <ButtonBase

package/src/TextInput/TextInput.jsx

@@ -41,7 +41,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
+const TextInput = forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref) => {
   const { supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
@@ -51,9 +51,9 @@ const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   }
 
   return (
-    <InputSupports nativeID={selectedProps.nativeID} {...supportsProps}>
-      {({ inputId, ...props }) => (
-        <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
+    <InputSupports nativeID={nativeID} {...supportsProps}>
+      {({ inputId, ...propsFromInputSupports }) => (
+        <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
       )}
     </InputSupports>
   )

package/src/ViewportProvider/useViewportListener.js

@@ -28,11 +28,16 @@ const useViewportListenerCSR = (setViewport) => {
     const onChange = ({ window }) => setViewport(viewports.select(window.width))
     const listener = Dimensions.addEventListener('change', onChange)
 
-    // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
-    // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
-    return listener?.remove || (() => Dimensions.removeEventListener('change', onChange))
-
-    // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+    return () => {
+      if (typeof listener?.remove === 'function') {
+        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
+        // See https://github.com/facebook/react-native/issues/34508
+        listener.remove()
+        // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        Dimensions.removeEventListener('change', onChange)
+      }
+    }
   }, [setViewport])
 }
 

package/src/utils/hasOwnProperty.js

@@ -0,0 +1,11 @@
+/**
+ * Linter disallows object instance prototype methods like someObject.hasOwnProperty(key),
+ * but we can use this instead.
+ *
+ * @param {object} object
+ * @param {String} key
+ * @returns {Boolean}
+ */
+export default function hasOwnProperty(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key)
+}

package/src/utils/props/a11yProps.js

@@ -40,62 +40,164 @@ const nativeA11yPropTypes = {
   onAccessibilityTap: PropTypes.func
 }
 
-const a11yPropTypes = {
-  ...nativeA11yPropTypes,
+const a11yPropTypes = Platform.select({
   // React Native Web adds many a11y props that alias aria-* attributes
   // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-  accessibilityActiveDescendant: PropTypes.string,
-  accessibilityAtomic: PropTypes.bool,
-  accessibilityAutoComplete: PropTypes.string,
-  accessibilityBusy: PropTypes.bool,
-  accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
-  accessibilityColumnCount: PropTypes.number,
-  accessibilityColumnIndex: PropTypes.number,
-  accessibilityColumnSpan: PropTypes.number,
-  accessibilityControls: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string)
-  ]),
-  accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
-  accessibilityDescribedBy: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string)
-  ]),
-  accessibilityDetails: PropTypes.string,
-  accessibilityDisabled: PropTypes.bool,
-  accessibilityErrorMessage: PropTypes.string,
-  accessibilityExpanded: PropTypes.bool,
-  accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityHasPopup: PropTypes.string,
-  accessibilityHidden: PropTypes.bool,
-  accessibilityInvalid: PropTypes.bool,
-  accessibilityKeyShortcuts: PropTypes.string,
-  accessibilityLabelledBy: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string)
-  ]),
-  accessibilityLevel: PropTypes.number,
-  accessibilityModal: PropTypes.bool,
-  accessibilityMultiline: PropTypes.bool,
-  accessibilityMultiSelectable: PropTypes.bool,
-  accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  accessibilityPlaceholder: PropTypes.string,
-  accessibilityPosInSet: PropTypes.number,
-  accessibilityPressed: PropTypes.bool,
-  accessibilityReadOnly: PropTypes.bool,
-  accessibilityRequired: PropTypes.bool,
-  accessibilityRoleDescription: PropTypes.string,
-  accessibilityRowCount: PropTypes.number,
-  accessibilityRowIndex: PropTypes.number,
-  accessibilityRowSpan: PropTypes.number,
-  accessibilitySelected: PropTypes.bool,
-  accessibilitySetSize: PropTypes.number,
-  accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
-  accessibilityValueMax: PropTypes.number,
-  accessibilityValueMin: PropTypes.number,
-  accessibilityValueNow: PropTypes.number,
-  accessibilityValueText: PropTypes.string
+  web: {
+    ...nativeA11yPropTypes,
+    accessibilityActiveDescendant: PropTypes.string,
+    accessibilityAtomic: PropTypes.bool,
+    accessibilityAutoComplete: PropTypes.string,
+    accessibilityBusy: PropTypes.bool,
+    accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
+    accessibilityColumnCount: PropTypes.number,
+    accessibilityColumnIndex: PropTypes.number,
+    accessibilityColumnSpan: PropTypes.number,
+    accessibilityControls: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string)
+    ]),
+    accessibilityCurrent: PropTypes.oneOf([
+      true,
+      false,
+      'page',
+      'step',
+      'location',
+      'date',
+      'time'
+    ]),
+    accessibilityDescribedBy: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string)
+    ]),
+    accessibilityDetails: PropTypes.string,
+    accessibilityDisabled: PropTypes.bool,
+    accessibilityErrorMessage: PropTypes.string,
+    accessibilityExpanded: PropTypes.bool,
+    accessibilityFlowTo: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string)
+    ]),
+    accessibilityHasPopup: PropTypes.string,
+    accessibilityHidden: PropTypes.bool,
+    accessibilityInvalid: PropTypes.bool,
+    accessibilityKeyShortcuts: PropTypes.string,
+    accessibilityLabelledBy: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string)
+    ]),
+    accessibilityLevel: PropTypes.number,
+    accessibilityModal: PropTypes.bool,
+    accessibilityMultiline: PropTypes.bool,
+    accessibilityMultiSelectable: PropTypes.bool,
+    accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    accessibilityPlaceholder: PropTypes.string,
+    accessibilityPosInSet: PropTypes.number,
+    accessibilityPressed: PropTypes.bool,
+    accessibilityReadOnly: PropTypes.bool,
+    accessibilityRequired: PropTypes.bool,
+    accessibilityRoleDescription: PropTypes.string,
+    accessibilityRowCount: PropTypes.number,
+    accessibilityRowIndex: PropTypes.number,
+    accessibilityRowSpan: PropTypes.number,
+    accessibilitySelected: PropTypes.bool,
+    accessibilitySetSize: PropTypes.number,
+    accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
+    accessibilityValueMax: PropTypes.number,
+    accessibilityValueMin: PropTypes.number,
+    accessibilityValueNow: PropTypes.number,
+    accessibilityValueText: PropTypes.string
+  },
+  // Ignore web-only props in native builds
+  default: nativeA11yPropTypes
+})
+
+// These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
+// so all props work on RN, RNW >=0.18 and RNW <=0.18, regardless of which they were written for:
+// - On native, bundle them into objects, like `accessibilityValue: { max: 100 }`
+// - On web, split them into both of:
+//   - The appropriate aria-* attr, like `aria-valuenow`, which will work regardless of RNW version
+//   - The corresponding RNW >=0.18 prop, like `accessibilityValueNow`, which in some cases does more
+//     than just add the aria-* (e.g. `accessibilityDisabled` adds `disabled` if element supports it,
+//     and future releases might add more features here).
+const rwnPropMappings = {
+  // Former accessibilityValue props.
+  accessibilityValueMax: (value) =>
+    Platform.select({
+      web: { 'aria-valuemax': value, accessibilityValueMax: value },
+      default: { accessibilityValue: { max: value } }
+    }),
+  accessibilityValueMin: (value) =>
+    Platform.select({
+      web: { 'aria-valuemin': value, accessibilityValueMin: value },
+      default: { accessibilityValue: { min: value } }
+    }),
+  accessibilityValueNow: (value) =>
+    Platform.select({
+      web: { 'aria-valuenow': value, accessibilityValueNow: value },
+      default: { accessibilityValue: { now: value } }
+    }),
+  accessibilityValueText: (value) =>
+    Platform.select({
+      web: { 'aria-valuetext': value, accessibilityValueText: value },
+      default: { accessibilityValue: { text: value } }
+    }),
+
+  // Former accessibilityState props
+  accessibilityBusy: (value) =>
+    Platform.select({
+      web: { 'aria-busy': value, accessibilityBusy: value },
+      default: { accessibilityState: { busy: value } }
+    }),
+  accessibilityChecked: (value) =>
+    Platform.select({
+      web: { 'aria-checked': value, accessibilityChecked: value },
+      default: { accessibilityState: { checked: value } }
+    }),
+  accessibilityDisabled: (value) =>
+    Platform.select({
+      web: {
+        'aria-disabled': value,
+        // RNW >= 0.18 maps `accessibilityDisabled` to `disabled` attr if element supports it
+        accessibilityDisabled: value,
+        // As of RNW 0.18.9, Pressable doesn't support `accessibilityDisabled`, only `disabled`,
+        // but everything else supports `accessibilityDisabled` but not `disabled`.
+        disabled: value
+      },
+      default: { accessibilityState: { disabled: value } }
+    }),
+  accessibilityExpanded: (value) =>
+    Platform.select({
+      web: { 'aria-expanded': value, accessibilityExpanded: value },
+      default: { accessibilityState: { expanded: value } }
+    }),
+  accessibilitySelected: (value) =>
+    Platform.select({
+      web: { 'aria-selected': value, accessibilitySelected: value },
+      default: { accessibilityState: { selected: value } }
+    })
+}
+if (Platform.OS === 'web') {
+  const mapIfDefined = (value, fn) => (value === undefined ? undefined : fn(value))
+
+  // On Web only, these React Native object props need manual mapping in RNW >=0.18
+  // which dropped support for the React Native shape of these props.
+  // Re-use our RNW 0.18 prop mappings to support both RNW <0.18 (aria-*) and
+  // new features added in >=0.18 (e.g. for accessibilityDisabled).
+  rwnPropMappings.accessibilityValue = ({ max, min, now, text } = {}) => ({
+    ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
+    ...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
+    ...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
+    ...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
+  })
+  rwnPropMappings.accessibilityState = ({ busy, checked, disabled, expanded, selected } = {}) => ({
+    ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
+    ...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
+    ...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
+    ...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
+    ...mapIfDefined(selected, rwnPropMappings.accessibilitySelected)
+  })
 }
 
 export default {
@@ -110,7 +212,18 @@ export default {
    * Where components accept React Native a11y props, pass { ...rest } from its props to this,
    * then spread the returned object into the component's props (usually its outer container).
    */
-  select: getPropSelector(a11yPropTypes, /^aria-/),
+  select: getPropSelector(
+    // Allow all React Native accessibility props
+    a11yPropTypes,
+    // Allow any `aria-*` attribute on web; ignore them on native
+    Platform.OS === 'web' && /^aria-/,
+    // For the props added and deprecated in React Native Web 0.18, convert them to
+    // a form that is platform-appropriate and RNW-version safe
+    (key, value) => {
+      const rnwPropMapper = rwnPropMappings[key]
+      return rnwPropMapper ? rnwPropMapper(value) : undefined
+    }
+  ),
   /**
    * Use this to disable focus for elements which are visually hidden but still rendered.
    */