@telus-uds/components-base 1.14.1 → 1.15.0

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.

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

@@ -1,9 +1,48 @@
-export default function getPropSelector(propTypes, regexp) {
-  const keys = Object.keys(propTypes);
+import merge from 'lodash.merge';
+import hasOwnProperty from '../hasOwnProperty';
+/**
+ * @callback PropSelectorCallback - a callback called for each prop passed to a component
+ * @param {string} key - the key for the prop to be tested
+ * @param {*} value - the value of the prop being passed in to the component
+ * @returns {object|undefined}
+ */
+
+/**
+ * @param {PropSelectorCallback} callback
+ * @param {object} items
+ * @param {string} key
+ * @param {*} value
+ * @returns {object|undefined}
+ */
+
+const applyCallback = (callback, items, key, value) => {
+  // If there's no callback, continue and look up keys as normal
+  if (typeof callback !== 'function') return undefined;
+  const newItems = callback(key, value); // If the callback doesn't return anything, continue and look up keys as normal
+
+  if (!newItems) return undefined; // If the callback returns items, merge them in, deep merging props that are objects
+
+  return merge({}, items, newItems);
+};
+/**
+ * Generates a function to filter an object of props down to a subset of allowed props, with
+ * optional prop alteration and re-mapping via an optional callback.
+ *
+ * @param {object} propTypes - an object where every defined key is a valid prop
+ * @param {*} [regexp] - an optional regular expression where any match is a valid prop
+ * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
+ * @returns {object} - valid props for this component
+ */
+
+
+export default function getPropSelector(propTypes, regexp, callback) {
   return props => Object.entries(props).reduce((items, _ref) => {
     let [key, value] = _ref;
-    return keys.includes(key) || regexp && regexp.test(key) ? { ...items,
-      [key]: value
-    } : items;
+    return (// If there's a callback and it matches something, applyCallback merges it in; return that
+      applyCallback(callback, items, key, value) || ( // If there's no callback match, check if this prop is valid and merge it in if it is
+      hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? { ...items,
+        [key]: value
+      } : items)
+    );
   }, {});
 }

package/lib-module/utils/ssr.js

@@ -1,9 +1,113 @@
+import React from 'react';
 import AppRegistry from "react-native-web/dist/exports/AppRegistry";
 /** @typedef {import('react').ComponentType} ReactComponent */
 
 /** @typedef {import('react').ReactElement} ReactElement */
 
 /**
+ * Returns object with `renderApp` and `getStyles` functions.
+ * Weave these into your app's server-side render process:
+ *
+ * - Call `renderApp` first to do the actual server-side render
+ * - After the render is complete, call `getStyles`
+ * - Include the style tags returned by `getStyles` in the SSR <head>
+ *
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
+ * @param {object} [options] -
+ *  - `styleGetters`: optional array of additional style getter functions to call after render
+ *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
+ * @param {boolean} [options.styleGetters]
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ssrStyles = function () {
+  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
+  let {
+    styleGetters = [],
+    collectStyles
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let hasAppRendered = false;
+  return {
+    /**
+     * Server-side-renders the provided app in a way that supports collecting
+     * styles for Styled Components and React Native Web stylesheets.
+     *
+     * @param {ReactComponent} App - the root component for the app
+     * @param {object} [props] - props for this render e.g. page routing props
+     * @param {object} [options] -
+     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
+     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
+     * @param {boolean} [options.renderedByRNW]
+     * @param {ReactComponent} [options.WrapperComponent]
+     *
+     * @returns {ReactElement} - the rendered app output
+     */
+    renderApp: function (App, props) {
+      let {
+        renderedByRNW = false,
+        WrapperComponent
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      AppRegistry.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
+
+      const {
+        element,
+        getStyleElement
+      } = AppRegistry.getApplication(appName, {
+        WrapperComponent,
+        initialProps: props
+      });
+      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
+      // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
+      // So, use that IF user says AppRegistry.runApplication will do the client-side render.
+      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
+      // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
+      // Default to this as many platforms (e.g. NextJS) will use their own renderers.
+      WrapperComponent ? /*#__PURE__*/_jsx(WrapperComponent, {
+        children: /*#__PURE__*/_jsx(App, { ...props
+        })
+      }) : /*#__PURE__*/_jsx(App, { ...props
+      });
+
+      const getRNWStyle = () => getStyleElement({
+        key: 'react-native-stylesheet'
+      });
+
+      styleGetters.push(getRNWStyle);
+
+      if (typeof collectStyles === 'function') {
+        renderedApp = collectStyles(renderedApp);
+      }
+
+      hasAppRendered = true;
+      return renderedApp;
+    },
+
+    /**
+     * Turns styles collected during renderApp into an array of React elements of
+     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
+     *
+     * Must be called after `renderApp` has completed.
+     *
+     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
+     * @returns {ReactElement[]} - flat array of <style> React elements
+     */
+    getStyles: function () {
+      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
+
+      for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
+        existingStyles[_key] = arguments[_key];
+      }
+
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+    }
+  };
+};
+export default ssrStyles;
+/**
+ * @deprecated - use ssrStyles instead
+ *
  * Registers the app's root component with React Native Web and generates
  * the main <style> tag containing React Native Web stylesheet styles.
  *
@@ -21,6 +125,8 @@ export const getReactNativeWebSSRStyles = function (AppRoot) {
   return [getStyleElement()];
 };
 /**
+ * @deprecated - use ssrStyles instead
+ *
  * Gets style tags for each currently supported CSS-in-JS library and returns
  * them alongside any existing style tags.
  *

package/lib-module/utils/useResponsiveProp.js

@@ -1,9 +1,8 @@
 import { viewports } from '@telus-uds/system-constants';
 import { useViewport } from '../ViewportProvider';
+import hasOwnProperty from './hasOwnProperty';
 
-const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
-
-const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwn(objectProp, key));
+const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwnProperty(objectProp, key));
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
  *
@@ -21,7 +20,7 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
   const value = viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
   viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
-  prop[viewports.keys.find(key => hasOwn(prop, key))];
+  prop[viewports.keys.find(key => hasOwnProperty(prop, key))];
   return value === undefined ? defaultValue : value;
 };
 /**

package/lib-module/utils/withLinkRouter.js

@@ -1,9 +1,6 @@
 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);
+import PropTypes from 'prop-types';
+import hasOwnProperty from './hasOwnProperty';
 /**
  * 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.
@@ -33,6 +30,7 @@ const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(ob
  * ```
  */
 
+import { jsx as _jsx } from "react/jsx-runtime";
 
 const withLinkRouter = Component => {
   const wrappedComponent = /*#__PURE__*/forwardRef((_ref, ref) => {

package/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.3.0",
+    "@telus-uds/system-theme-tokens": "^2.4.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
@@ -18,17 +18,14 @@
   },
   "description": "Base components",
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/cli": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
     "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-native": "^4.0.1",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/react-native": "^7.2.0",
-    "react-test-renderer": "^16.3.2",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-native": "11.0.0",
+    "react-test-renderer": "~18.0.0",
+    "@testing-library/react-hooks": "~7.0.1",
+    "@testing-library/react-native-17": "npm:@testing-library/react-native@7.2.0",
+    "react-test-renderer-17": "npm:react-test-renderer@17.0.2",
     "webpack": "5.x"
   },
   "directories": {
@@ -44,10 +41,10 @@
   "module": "lib-module/index.js",
   "name": "@telus-uds/components-base",
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.2 || ~18.0.0",
+    "react-dom": "^17.0.2 || ~18.0.0",
     "react-native": "*",
-    "react-native-web": "~0.17.5"
+    "react-native-web": "~0.17.7 || ~0.18.7"
   },
   "react-native": "src/index.js",
   "repository": {
@@ -63,13 +60,11 @@
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
     "build:code": "npm run build:main && npm run build:module",
-    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
-    "storybook": "start-storybook",
-    "build-storybook": "build-storybook"
+    "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.14.1"
+  "version": "1.15.0"
 }

package/src/A11yInfoProvider/index.jsx

@@ -16,8 +16,14 @@ const A11yInfoProvider = ({ children }) => {
       return () => {}
     }
 
-    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled)
-    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled)
+    const motionSubscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setReduceMotionEnabled
+    )
+    const screenReaderSubscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      setScreenReaderEnabled
+    )
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([
@@ -38,8 +44,18 @@ const A11yInfoProvider = ({ children }) => {
     }
 
     return () => {
-      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
-      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
+      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
+      if (typeof motionSubscription?.remove === 'function') {
+        motionSubscription?.remove()
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
+      }
+
+      if (typeof screenReaderSubscription?.remove === 'function') {
+        screenReaderSubscription?.remove()
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
+      }
     }
   }, [])
 

package/src/Button/ButtonGroup.jsx

@@ -141,8 +141,10 @@ const ButtonGroup = forwardRef(
                   tokens={getButtonTokens}
                   selected={isSelected}
                   inactive={inactive}
-                  {...itemA11y}
-                  {...selectItemProps(itemRest)}
+                  {...selectItemProps({
+                    ...itemRest,
+                    ...itemA11y
+                  })}
                 >
                   {label}
                 </ButtonBase>

package/src/Checkbox/Checkbox.jsx

@@ -176,6 +176,12 @@ const Checkbox = forwardRef(
     const inputId = id ?? uniqueId
     const { themeOptions } = useTheme()
 
+    const selectedProps = selectProps({
+      accessibilityRole: 'checkbox',
+      accessibilityState: { checked: isChecked, disabled: inactive },
+      ...rest
+    })
+
     return (
       <View style={staticStyles.wrapper} ref={ref}>
         <StackView direction={feedbackPosition === 'top' ? 'column-reverse' : 'column'} space={0}>
@@ -183,9 +189,7 @@ const Checkbox = forwardRef(
             disabled={inactive}
             onKeyDown={handleKeyDown}
             onPress={handleChange}
-            accessibilityRole="checkbox"
-            accessibilityState={{ checked: isChecked, disabled: inactive }}
-            {...selectProps(rest)}
+            {...selectedProps}
           >
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })

package/src/ExpandCollapse/Control.jsx

@@ -56,11 +56,14 @@ const ExpandCollapseControl = forwardRef(
   ) => {
     const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
 
-    const selectedProps = selectProps({ ...rest, accessibilityRole })
-    selectedProps.accessibilityState = {
-      ...(selectedProps.accessibilityState || {}),
-      expanded: isExpanded
-    }
+    const selectedProps = selectProps({
+      accessibilityRole,
+      ...rest,
+      accessibilityState: {
+        ...(rest.accessibilityState || {}),
+        expanded: isExpanded
+      }
+    })
 
     const getControlState = ({ pressed, hovered, focused }) => ({
       pressed,