@telus-uds/components-base 1.1.0 → 1.3.1

package/lib/utils/props/responsiveProps.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const getByViewport = propType => ({
+  xs: propType,
+  sm: propType,
+  md: propType,
+  lg: propType,
+  xl: propType
+});
+/**
+ * Utilities for props that allow different values to be applied at different viewports.
+ *
+ * These should apply viewport inheritance such that if a viewport is undefined, the value is
+ * taken from the next smallest viewport for which a value is available. For example, a
+ * responsive prop { xs: 2, lg: 3 } should apply 2 at sizes sm and md, and 3 at size xl.
+ *
+ * @property {Function} getByViewport - returns an object where each each viewport has a key
+ *   containing the provided argument.
+ * @property {Function} getTypeByViewport - returns a PropTypes shape validator for an object where
+ *   each viewport has a key containing the provided proptype.
+ * @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
+ *   either the provided proptype on its own, or the output of getTypeByViewport
+ */
+
+
+var _default = {
+  getByViewport,
+  getTypeByViewport: propType => _propTypes.default.shape(getByViewport(propType)),
+  getTypeOptionallyByViewport: propType => _propTypes.default.oneOfType([propType, _propTypes.default.shape(getByViewport(propType))])
+};
+exports.default = _default;

package/lib/utils/props/selectSystemProps.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = selectSystemProps;
+
+// Returns a selector for requested prop kinds as well as the propTypes for
+// those props merged into one object
+function selectSystemProps(systemPropHelpers) {
+  const selectProps = props => systemPropHelpers.reduce((acc, propHelper) => {
+    if (typeof (propHelper === null || propHelper === void 0 ? void 0 : propHelper.select) !== 'function') {
+      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);
+    }
+
+    return { ...acc,
+      ...propHelper.select(props)
+    };
+  }, {});
+
+  const selectedPropTypes = systemPropHelpers.reduce((acc, propHelper) => {
+    if (!(propHelper !== null && propHelper !== void 0 && propHelper.types)) {
+      throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ${propHelper}`);
+    }
+
+    return { ...acc,
+      ...propHelper.types
+    };
+  }, {});
+  return [selectProps, selectedPropTypes];
+}

package/lib/utils/props/spacingProps.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _responsiveProps = _interopRequireDefault(require("./responsiveProps"));
+
+var _variantProp = _interopRequireDefault(require("./variantProp"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
+ *
+ * @typedef SpacingOptions
+ * @property {VariantProp} [SpacingOptions.variant] - optional theme scale variants e.g. compact, wide
+ * @property {number} [SpacingOptions.size] - optional override to force a particular pixel size
+ * @property {number} [SpacingOptions.subtract] - optional number to subtract from final pixel size
+ *
+ * @typedef SpacingObject
+ * @property {SpacingIndex} [SpacingObject.xs] - space scale index to use above xs viewport
+ * @property {SpacingIndex} [SpacingObject.sm] - space scale index to use above sm viewport
+ * @property {SpacingIndex} [SpacingObject.md] - space scale index to use above md viewport
+ * @property {SpacingIndex} [SpacingObject.lg] - space scale index to use above lg viewport
+ * @property {SpacingIndex} [SpacingObject.xl] - space scale index to use above xl viewport
+ * @property {SpacingIndex} [SpacingObject.space] - space scale index to use at all viewports
+ * @property {SpacingOptions} [SpacingObject.options] - optional options for this spacing
+ *
+ * @typedef {SpacingIndex|SpacingObject} SpacingValue
+ */
+const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+const spacingIndexPropType = _propTypes.default.oneOf(spacingScale);
+
+const spacingObjectPropType = _propTypes.default.shape({ ..._responsiveProps.default.getByViewport(spacingIndexPropType),
+  space: spacingIndexPropType,
+  options: _propTypes.default.shape({
+    variant: _variantProp.default.propType,
+    size: _propTypes.default.number
+  })
+});
+/**
+ * Components and utilities that assign fixed space between components use a theme-defined spacing scale.
+ *
+ * They typically take one or more props of the {@link SpacingValue} type and turn it into a pixel size value
+ * using the hook `useSpacingScale`, which resolves any options or responsive behaviour and returns the
+ * appropriate value from the theme spacing scale.
+ *
+ * - see /ADRs/inter-component-spacing/README.md - ADR on this structure
+ * - see /src/utils/spacing/useSpacingScale.js - hook that processes spacing values
+ * - @see {@link SpacingIndex} - themes provide spacing scales of up to 12 sizes with optional theme rules.
+ * - @see {@link SpacingValue} - either a simple number referencing an index position on the spacing
+ *   scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
+ *   viewports or `space` to apply at all viewports.
+ */
+
+
+var _default = {
+  scale: spacingScale,
+  types: {
+    spacingIndex: spacingIndexPropType,
+    spacingObject: spacingObjectPropType,
+    // Most spacing components and utilities take this prop / arg type:
+    spacingValue: _propTypes.default.oneOfType([spacingIndexPropType, spacingObjectPropType])
+  }
+};
+exports.default = _default;

package/lib/utils/props/tokens.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
+// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
+// or components (e.g. Icon tokens)
+const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
+
+const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
+
+const getTokenNames = componentName => {
+  const componentTokenSchema = _systemThemeTokens.components[componentName];
+
+  if (!componentTokenSchema) {
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
+  }
+
+  return Object.keys(componentTokenSchema);
+};
+/**
+ * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
+ * or by a provided array of tokens. A prefix may be provided, for example:
+ *
+ * @example
+ * ```jsx
+ * // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
+ * selectTokens('Button', themeTokens)
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns `{ backgroundColor, width }` where the values of those keys come from
+ * // the source object's `{ containerBackgroundColor, containerWidth }` properties.
+ * selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // returns tokens that are defined in the `Button` theme schema, from tokens with
+ * // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
+ * selectTokens('Button', themeTokens, 'button')
+ * ```
+ *
+ * @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
+ * @param {object} tokens - a source object of theme tokens
+ * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
+ * @returns {object} - subset of theme tokens
+ */
+
+
+exports.getTokenNames = getTokenNames;
+
+const selectTokens = (specifier, tokens, prefix) => {
+  const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
+  const filteredTokens = tokenNames.reduce((validTokens, key) => {
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
+    const token = tokens[prefixedKey];
+    return token !== undefined ? { ...validTokens,
+      [key]: token
+    } : validTokens;
+  }, {});
+  return filteredTokens;
+};
+/**
+ * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
+ * @typedef {{[key: string]: TokenValue}} TokensSet
+ * @typedef {(AppearanceSet) => TokensSet} TokensGetter
+ * @typedef {TokensSet|TokensGetter} TokensProp
+ */
+
+/**
+ * 'tokens' is an optional object prop on all themable components. Its keys must match the
+ * token keys in the component's theme schema.
+ *
+ * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
+ * where the main theming system doesn't apply. It is intentionally permissive about values.
+ *
+ * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
+ * @return {function} - a custom PropTypes validator
+ *
+ * @example
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in Component schema
+ *   tokens: getTokensPropType('Component')
+ * }
+ *
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in schemas for Component1 and Component2
+ *   tokens: getTokensPropType('Component1', 'Component2')
+ * }
+ */
+
+
+exports.selectTokens = selectTokens;
+
+const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
+  _propTypes.default.checkPropTypes({
+    [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
+  }, props, propName, componentName);
+
+  if (typeof props[propName] !== 'function') {
+    _propTypes.default.checkPropTypes({
+      [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+    }, props, propName, componentName);
+  }
+};
+/**
+ * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
+ *
+ * For example, for a set of tokens used in a common style, or for a set of tokens required by
+ * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
+ *
+ * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ *
+ * @param {string[]} componentTokenKeys - array of strings of token names
+ * @param {object} [options]
+ * @param {boolean} [options.partial] - if true, allows tokens to be undefined
+ * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
+ * @returns
+ */
+
+
+exports.getTokensPropType = getTokensPropType;
+
+const getTokensSetPropType = (componentTokenKeys, {
+  partial = false,
+  allowFunction = false
+} = {}) => {
+  const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+  (props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
+
+  return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
+};
+
+exports.getTokensSetPropType = getTokensSetPropType;

package/lib/utils/props/variantProp.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
+ * @typedef {AppearanceSet} VariantProp
+ */
+var _default = {
+  /**
+   * 'variant' is an optional object prop on all themable components.
+   *
+   * Contains an object with keys that correspond to the current component theme's allowed
+   * appearances and values that correspond to the allowed values of that component.
+   *
+   * Since the particular keys and values depend on which theme is currently active,
+   * the exact shape of variant props is not enforced using PropTypes.
+   */
+  propType: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))
+};
+exports.default = _default;

package/lib/utils/props/viewProps.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const viewPropTypes = {
+  pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
+  onLayout: _propTypes.default.func,
+  nativeID: _propTypes.default.string,
+  testID: _propTypes.default.string,
+  dataSet: _propTypes.default.object
+};
+var _default = {
+  /**
+   * Subset of `View` proptypes that could conceivably be needed on any component
+   * that renders a single View.
+   */
+  types: viewPropTypes,
+
+  /**
+   * Filters a props object, returning only cross-platform View props that are potentially
+   * relevant to any basic layout component that renders one View.
+   */
+  select: (0, _getPropSelector.default)(viewPropTypes)
+};
+exports.default = _default;

package/lib/utils/ssr.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSSRStyles = exports.getReactNativeWebSSRStyles = void 0;
+
+var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/** @typedef {import('react').ComponentType} ReactComponent */
+
+/** @typedef {import('react').ReactElement} ReactElement */
+
+/**
+ * Registers the app's root component with React Native Web and generates
+ * the main <style> tag containing React Native Web stylesheet styles.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @returns {ReactElement[]}
+ */
+const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
+  _AppRegistry.default.registerComponent(appName, () => AppRoot);
+
+  const {
+    getStyleElement
+  } = _AppRegistry.default.getApplication(appName);
+
+  return [getStyleElement()];
+};
+/**
+ * Gets style tags for each currently supported CSS-in-JS library and returns
+ * them alongside any existing style tags.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @param {ReactElement[]} [existingStyles]
+ * @returns {ReactElement[]}
+ */
+
+
+exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
+
+const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
+  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName) // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
+  ];
+};
+
+exports.getSSRStyles = getSSRStyles;

package/lib/utils/useResponsiveProp.js

@@ -40,7 +40,7 @@ const resolveResponsiveProp = (prop, viewport, defaultValue) => {
  * For example, if passed `{ sm: 4, lg: 8 }`, it will return 8 on `xl` and `lg` viewports,
  * 4 on `md` and `sm` viewports, and `undefined` (or a provided `defaultValue`) on `xs` viewports.
  *
- * To generate propTypes for responsive props, see `responsiveProps` in `./utils/propTypes.js`.
+ * To generate propTypes for responsive props, see `responsiveProps` in `./utils/props/responsiveProps.js`.
  *
  * @param {*} prop - any value which may be an object with viewport keys
  * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport

package/lib/utils/useSpacingScale.js

@@ -13,10 +13,10 @@ var _useResponsiveProp = require("./useResponsiveProp");
 
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
- * @typedef {import('./propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('./propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('./propTypes.js').SpacingObject} SpacingObject
- * @typedef {import('./propTypes.js').SpacingOptions} SpacingOptions
+ * @typedef {import('./props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('./props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./props/spacingProps.js').SpacingObject} SpacingObject
+ * @typedef {import('./props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 const resolveSpacingOptions = space => {
   if (!(space !== null && space !== void 0 && space.options)) return {};

package/lib/utils/withLinkRouter.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
+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__*/(0, _react.forwardRef)(({
+    LinkRouter,
+    linkRouterProps,
+    ...props
+  }, ref) => {
+    if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
+      ref: ref
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.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.default.elementType,
+  linkRouterProps: _propTypes.default.object
+};
+var _default = withLinkRouter;
+exports.default = _default;

package/lib-module/A11yInfoProvider/index.js

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import AccessibilityInfo from "react-native-web/dist/exports/AccessibilityInfo";
+import Platform from "react-native-web/dist/exports/Platform";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScreenReaderContext = /*#__PURE__*/createContext(false);
+const ReducedMotionContext = /*#__PURE__*/createContext(false);
+
+const A11yInfoProvider = ({
+  children
+}) => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'test') {
+      // On Jest these effects do nothing but can cause `act` state change warnings
+      // and "...after the Jest environment has been torn down" errors, so skip them.
+      return () => {};
+    }
+
+    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
+    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
+
+    const setInitialA11yInfo = async () => {
+      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
+      // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
+
+      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled); // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
+
+      setReduceMotionEnabled(!!initialReduceMotionEnabled);
+    };
+
+    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
+      setInitialA11yInfo();
+    }
+
+    return () => {
+      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
+      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
+    value: reduceMotionEnabled,
+    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
+      value: screenReaderEnabled,
+      children: children
+    })
+  });
+};
+
+A11yInfoProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default A11yInfoProvider;
+export const useA11yInfo = () => {
+  const screenReaderEnabled = useContext(ScreenReaderContext);
+  const reduceMotionEnabled = useContext(ReducedMotionContext);
+  return {
+    reduceMotionEnabled,
+    screenReaderEnabled
+  };
+};

package/lib-module/A11yText/index.js

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * A11yText is a zero-size invisible element that adds text to be read by screen readers.
+ *
+ * It should be used to add selectable screen-reader-only text to the main document flow,
+ * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
+ */
+
+const A11yText = /*#__PURE__*/forwardRef(({
+  text,
+  heading,
+  ...rest
+}, ref) => {
+  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,
+    // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
+    accessible: Platform.OS === 'ios',
+    accessibilityLabel: text,
+    accessibilityRole: heading ? 'header' : 'text',
+    ...rest
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.invisible,
+    ref: ref,
+    ...selectedProps
+  });
+});
+A11yText.displayName = 'A11yText';
+A11yText.propTypes = { ...selectedSystemPropTypes,
+  text: PropTypes.string.isRequired,
+  heading: PropTypes.bool
+};
+const styles = StyleSheet.create({
+  invisible: {
+    // Without width or height it is not shown
+    minHeight: 1,
+    minWidth: 1,
+    // Ensures it doesn't occupy space
+    // position: 'absolute' causes it to be read first in its container
+    marginEnd: -1,
+    marginBottom: -1,
+    // Ensures it is in the correct position on Native
+    top: -1
+  }
+});
+export default A11yText;