@telus-uds/components-base 1.14.3 → 1.15.0

package/lib-module/List/PressableListItemBase.js

@@ -0,0 +1,117 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const selectPressableStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    interItemMargin
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    marginBottom: interItemMargin,
+    ...Platform.select({
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+
+const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    href,
+    tokens,
+    icon,
+    children,
+    listItemRef,
+    ...rest
+  } = _ref2;
+  const {
+    onPress,
+    ...props
+  } = clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rest: listItemProps
+  } = hrefAttrsProp.bundle(props);
+  const handlePress = linkProps.handleHref({
+    href,
+    onPress
+  });
+  return /*#__PURE__*/_jsx(ListItemBase, {
+    ref: listItemRef,
+    tokens: tokens(),
+    ...listItemProps,
+    children: _ref3 => {
+      let {
+        isLastItem
+      } = _ref3;
+
+      const getTokens = pressableState => resolvePressableTokens(tokens, pressableState, {
+        last: isLastItem
+      });
+
+      const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
+
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: handlePress,
+        href: href,
+        hrefAttrs: hrefAttrs,
+        style: getPressableStyle,
+        ref: ref,
+        children: pressableState => {
+          const themeTokens = getTokens(pressableState);
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ListItemMark, {
+              icon: icon,
+              tokens: themeTokens
+            }), /*#__PURE__*/_jsx(ListItemContent, {
+              tokens: themeTokens,
+              children: typeof children === 'function' ? children(pressableState) : children
+            })]
+          });
+        }
+      });
+    }
+  });
+});
+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/lib-module/Notification/Notification.js

@@ -143,7 +143,8 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
 
   const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles
+    textStyles,
+    variant
   }) : children, {
     style: textStyles
   });

package/lib-module/Pagination/Pagination.js

@@ -10,6 +10,7 @@ import usePagination from './usePagination';
 import PageButton from './PageButton';
 import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 const selectTextStyles = (_ref, themeOptions) => {
@@ -93,12 +94,13 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     };
 
     if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/_jsx(PageButton, { ...itemProps,
+      return /*#__PURE__*/_createElement(PageButton, { ...itemProps,
         LinkRouter: ItemLinkRouter,
         linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
         copy: copy,
-        isActive: isItemActive(itemIndex)
+        isActive: isItemActive(itemIndex),
+        key: buttonLabel
       });
     }
 
@@ -106,7 +108,7 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
       return /*#__PURE__*/_jsx(Text, {
         style: ellipsisTextStyles,
         children: "..."
-      });
+      }, "...");
     }
 
     return null;

package/lib-module/Radio/Radio.js

@@ -151,17 +151,20 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
 
   const uniqueId = useUniqueId('radio');
   const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     disabled: inactive,
     onKeyDown: handleKeyDown,
     onPress: handleChange,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      checked: isChecked,
-      disabled: inactive
-    },
-    ...selectProps(rest),
+    ...selectedProps,
     children: _ref5 => {
       let {
         focused: focus,

package/lib-module/RadioCard/RadioCard.js

@@ -87,18 +87,21 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/_jsx(PressableCardBase, {
     ref: ref,
     inactive: inactive,
     checked: isChecked,
     tokens: getCardTokens,
     onPress: handleChange,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      checked: isChecked,
-      disabled: inactive
-    },
-    ...selectProps(rest),
+    ...selectedProps,
     children: cardState => {
       const {
         radioSpace,

package/lib-module/Tabs/Tabs.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import StackView from '../StackView';
-import { a11yProps, getTokensPropType, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
 import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
 import TabsItem from './TabsItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 const {
   selectHorizontalScrollTokens,
   useItemPositions
@@ -94,15 +95,21 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
           label,
           id,
           accessibilityRole = defaultTabItemAccessibiltyRole,
+          onPress,
           ref: itemRef,
           LinkRouter: ItemLinkRouter = LinkRouter,
-          linkRouterProps: itemLinkRouterProps
+          linkRouterProps: itemLinkRouterProps,
+          ...itemRest
         } = _ref3;
         const itemId = id !== null && id !== void 0 ? 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 /*#__PURE__*/_jsx(TabsItem, {
           ref: itemRef,
           href: href,
@@ -117,6 +124,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
           linkRouterProps: { ...linkRouterProps,
             ...itemLinkRouterProps
           },
+          ...itemProps,
           children: label
         }, itemId);
       })
@@ -126,7 +134,8 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = { ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
-  items: PropTypes.arrayOf(PropTypes.shape({ ...withLinkRouter.PropTypes,
+  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+    ...withLinkRouter.PropTypes,
     href: PropTypes.string,
     label: PropTypes.string,
     id: PropTypes.string,

package/lib-module/Tags/Tags.js

@@ -131,14 +131,14 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
         toggleOneValue(id, event);
       };
 
-      const itemProps = {
+      const itemProps = selectItemProps({
         accessibilityState: {
           checked: isSelected
         },
         accessibilityRole: itemA11yRole,
         ...a11yProps.getPositionInSet(items.length, index),
-        ...selectItemProps(itemRest)
-      };
+        ...itemRest
+      });
       return /*#__PURE__*/_jsx(ButtonBase, {
         ref: itemRef,
         ...pressHandlers,

package/lib-module/TextInput/TextInput.js

@@ -27,6 +27,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
 const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
+    nativeID,
     variant = {},
     ...rest
   } = _ref;
@@ -41,18 +42,18 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   return /*#__PURE__*/_jsx(InputSupports, {
-    nativeID: selectedProps.nativeID,
+    nativeID: nativeID,
     ...supportsProps,
     children: _ref2 => {
       let {
         inputId,
-        ...props
+        ...propsFromInputSupports
       } = _ref2;
       return /*#__PURE__*/_jsx(TextInputBase, {
         ref: ref,
-        ...inputProps,
         nativeID: inputId,
-        ...props
+        ...propsFromInputSupports,
+        ...inputProps
       });
     }
   });

package/lib-module/ViewportProvider/useViewportListener.js

@@ -33,10 +33,16 @@ const useViewportListenerCSR = setViewport => {
       return 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 === null || listener === void 0 ? void 0 : listener.remove) || (() => Dimensions.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+    const listener = Dimensions.addEventListener('change', onChange);
+    return () => {
+      if (typeof (listener === null || listener === void 0 ? void 0 : 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]);
 }; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
 

package/lib-module/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/lib-module/utils/props/a11yProps.js

@@ -36,53 +36,211 @@ const nativeA11yPropTypes = {
   onAccessibilityEscape: PropTypes.func,
   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 = function () {
+    let {
+      max,
+      min,
+      now,
+      text
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return { ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
+      ...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
+      ...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
+      ...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
+    };
+  };
+
+  rwnPropMappings.accessibilityState = function () {
+    let {
+      busy,
+      checked,
+      disabled,
+      expanded,
+      selected
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return { ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
+      ...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
+      ...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
+      ...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
+      ...mapIfDefined(selected, rwnPropMappings.accessibilitySelected)
+    };
+  };
+}
+
 export default {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
@@ -96,7 +254,14 @@ 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.