@telus-uds/components-base 1.8.3 → 1.8.4

package/lib/Tags/Tags.js

@@ -129,7 +129,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("Tags items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {

package/lib/ThemeProvider/utils/styles.js

@@ -51,7 +51,7 @@ function applyTextStyles(_ref) {
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
+    styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
@@ -101,7 +101,7 @@ function applyWebShadow(_ref2) {
   } = _ref2;
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
-    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
+    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
   };
   return boxShadow;
 }

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -28,19 +28,19 @@ const getComponentTheme = (theme, componentName) => {
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
-    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
+    throw new Error("Called useTheme's getStyle on \"".concat(componentName, "\" with no theme provided"));
   }
 
   const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
+    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
+    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
   }
 
   return componentTheme;
@@ -49,9 +49,11 @@ const getComponentTheme = (theme, componentName) => {
 exports.getComponentTheme = getComponentTheme;
 
 const doesThemeConditionApply = (_ref, appearances) => {
+  var _appearances$key;
+
   let [key, value] = _ref;
   // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = appearances[key] ?? null;
+  const appearanceValue = (_appearances$key = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
 
@@ -192,11 +194,7 @@ const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error(`Invalid UDS token schema version detected.
-
-The UDS base components ${_package.default.name} v${_package.default.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
-
-If you see this error than most likely you have attempted to install ${_package.default.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md`);
+    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md"));
   }
 };
 

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -153,7 +153,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: 2,
     direction: "row",

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -86,7 +86,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("ToggleSwitchGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   const toggleSwitches = items.map((_ref2, index) => {

package/lib/Tooltip/Backdrop.js

@@ -19,15 +19,7 @@ function createPortalNode(nodeId) {
   // this way the backdrop stays in place when scrolling the window - that's why we need to
   // position it at the scroll position when rendering
 
-  node.style.cssText = `
-  position: absolute; 
-  top: ${window.scrollY}px;
-  left: ${window.scrollX}px; 
-  right: 0; 
-  bottom: 0; 
-  z-index: 9999; 
-  pointer-events: none;
-  `;
+  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
   document.body.appendChild(node);
   return node;
 }
@@ -48,7 +40,7 @@ function Backdrop(_ref) {
   } = _ref;
   const [portalNode, setPortalNode] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    const nodeId = `tooltip-backdrop-${Date.now()}`;
+    const nodeId = "tooltip-backdrop-".concat(Date.now());
     const node = createPortalNode(nodeId);
     setPortalNode(node);
     return () => {

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -24,16 +24,22 @@ function useVerticalExpandAnimation(_ref) {
     tokens
   } = _ref;
   const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [wasExpanded, setWasExpanded] = (0, _react.useState)(isExpanded);
+  const expandStateChanged = isExpanded !== wasExpanded;
   const expandAnimatedValue = (0, _react.useRef)(new _Animated.default.Value(0)).current;
   const elementRef = (0, _react.useRef)(null);
   const {
     expandDuration,
     collapseDuration
-  } = tokens; // Treat as animating from when expanded state changes, until animation completes
-
-  (0, _react.useEffect)(() => setIsAnimating(true), [isExpanded]);
+  } = tokens;
+  (0, _react.useLayoutEffect)(() => {
+    if (expandStateChanged) {
+      setIsAnimating(true);
+      setWasExpanded(isExpanded);
+    }
+  }, [expandStateChanged, isExpanded]);
   (0, _react.useEffect)(() => {
-    const onComplete = () => !isExpanded && setIsAnimating(false);
+    const onComplete = () => setIsAnimating(false);
 
     if (_Platform.default.OS === 'web') {
       if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
@@ -55,20 +61,40 @@ function useVerticalExpandAnimation(_ref) {
 
     animation.start(onComplete);
     return () => animation.stop();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]); // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
+  const containerStyles = {};
+  if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
 
-  const containerStyles = !isExpanded && !isAnimating ? {
-    visibility: 'hidden'
-  } : {}; // don't visually collapse the container until we have it measured
-
-  if (containerHeight !== null) {
+  if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (_Platform.default.OS === 'web') {
-      const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
-      containerStyles.height = isExpanded ? containerHeight : 0;
+      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
+      containerStyles.visibility = 'hidden';
     } else {
-      containerStyles.height = expandAnimatedValue;
+      // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
+      // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
+      containerStyles.opacity = 0;
+    }
+  } // don't visually collapse the container until we have it measured
+
+
+  if (containerHeight === null) {
+    if (_Platform.default.OS === 'web') {
+      // on web we can hide the contents until we have the container measured and avoid occasional jitter
+      // this won't work on native platforms
+      containerStyles.height = 0;
+      containerStyles.visibility = 'hidden';
     }
+  } else if (_Platform.default.OS === 'web') {
+    const transitionDuration = isExpanded ? expandDuration : collapseDuration;
+    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.height = isExpanded ? containerHeight : 0;
+  } else if (_Platform.default.OS === 'ios' && isExpanded && !isAnimating && !expandStateChanged && typeof containerHeight === 'number') {
+    // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where
+    // it fails to reflow properly after the last animation frame, leaving the last line of text not visible.
+    // Force reflow after animation completes with a static height non-identical to the last animated height.
+    containerStyles.height = containerHeight + 1;
+  } else {
+    containerStyles.height = expandAnimatedValue;
   }
 
   return [containerStyles, elementRef];

package/lib/utils/children.js

@@ -73,7 +73,7 @@ const isWrapable = child => {
   return isStringOrNumber(child) || child.type === _A11yText.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
 };
 
-const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => "".concat(newKey).concat(child.key || ''), ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
 
 
 const wrapChild = (child, wrappedText) => {
@@ -82,7 +82,7 @@ const wrapChild = (child, wrappedText) => {
 
   if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
     /* eslint-disable-next-line no-param-reassign */
-    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
+    wrappedText[lastIndex] = "".concat(wrappedText[lastIndex]).concat(child);
   } else {
     wrappedText.push(child);
   }

package/lib/utils/input.js

@@ -28,29 +28,23 @@ const validateProps = (_ref, _ref2, hookName) => {
   const usageError = error => {
     // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
     // Help devs out by telling them exactly which hook threw the error as well as why.
-    throw new Error(`${hookName} ${error}.
-
-Consumers of this hook must be one of:
-1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
-2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
-3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
-`);
+    throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
   };
 
   if (value && !onChange && !readOnly) {
-    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
+    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
   }
 
   if (initialValue && value) {
-    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
+    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
+    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
+    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
   }
 };
 /**
@@ -164,7 +158,7 @@ const useMultipleInputValues = function () {
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues ?? (values === undefined ? [] : undefined)
+    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
   }, 'useMultipleInputValues');
   const enforceMaxValues = (0, _react.useCallback)(newValues => {
     if (!maxValues) return newValues;

package/lib/utils/props/componentPropType.js

@@ -33,8 +33,8 @@ function componentPropType(passedName) {
     const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
 
     if (!nameInProp || !passedNames.includes(nameInProp)) {
-      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
-      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
+      const propDescription = nameInProp ? "Component ".concat(nameInProp) : typeof props[propName];
+      return new Error("".concat(componentName, ": ").concat(propDescription, " was passed to `").concat(propName, "` prop; should be ").concat(passedNames.join(' or ')));
     }
 
     return undefined;
@@ -42,7 +42,7 @@ function componentPropType(passedName) {
 
   const checkRequired = (props, propName, componentName) => {
     if (props[propName] === undefined) {
-      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
+      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
     }
 
     return undefined;

package/lib/utils/props/selectSystemProps.js

@@ -10,7 +10,7 @@ exports.default = selectSystemProps;
 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}`);
+      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ".concat(propHelper));
     }
 
     return { ...acc,
@@ -20,7 +20,7 @@ function selectSystemProps(systemPropHelpers) {
 
   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}`);
+      throw new Error("An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ".concat(propHelper));
     }
 
     return { ...acc,

package/lib/utils/props/tokens.js

@@ -22,7 +22,7 @@ const getTokenNames = componentName => {
   const componentTokenSchema = _systemThemeTokens.components[componentName];
 
   if (!componentTokenSchema) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
+    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
   }
 
   return Object.keys(componentTokenSchema);
@@ -63,7 +63,7 @@ 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 prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
     const token = tokens[prefixedKey];
     return token !== undefined ? { ...validTokens,
       [key]: token

package/lib/utils/useSpacingScale.js

@@ -110,6 +110,8 @@ const resolveSpacingOptions = space => {
 
 
 const useSpacingScale = spaceValue => {
+  var _spaceValue$space;
+
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -119,7 +121,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
+  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
   const {
     size
   } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {

package/lib/utils/useUniqueId.js

@@ -13,7 +13,7 @@ function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [uniqueId] = (0, _react.useState)(() => {
     id += 1;
-    return `${prefix}-${id}`;
+    return "".concat(prefix, "-").concat(id);
   });
   return uniqueId;
 }

package/lib-module/A11yInfoProvider/index.js

@@ -0,0 +1,63 @@
+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 = _ref => {
+  let {
+    children
+  } = _ref;
+  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,56 @@
+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((_ref, ref) => {
+  let {
+    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;

package/lib-module/ActivityIndicator/Spinner.js

@@ -0,0 +1,77 @@
+import React, { forwardRef } from 'react';
+import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
+import { useA11yInfo } from '../A11yInfoProvider';
+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 SVG_RADIUS = 20;
+const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
+const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
+const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
+const animationProps = {
+  begin: '0s',
+  dur: "".concat(DURATION, "ms"),
+  fill: 'freeze',
+  repeatCount: 'indefinite'
+};
+const bezierProps = {
+  calcMode: 'spline',
+  keyTimes: '0; 0.5; 1',
+  keySplines: "".concat(BEZIER.join(', '), " ; ").concat(BEZIER.join(', '))
+}; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
+// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
+
+const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    thickness,
+    label
+  } = _ref;
+  const {
+    reduceMotionEnabled
+  } = useA11yInfo();
+  return /*#__PURE__*/_jsx("svg", {
+    ref: ref,
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px"),
+    viewBox: "0 0 48 48",
+    "aria-valuetext": label,
+    role: "progressbar",
+    "aria-busy": true,
+    children: /*#__PURE__*/_jsxs("g", {
+      children: [reduceMotionEnabled ? null : /*#__PURE__*/_jsx("animateTransform", {
+        attributeName: "transform",
+        type: "rotate",
+        values: "-180 24 24;".concat(360 + MIN_STROKE_ANGLE - 180, " 24 24"),
+        ...animationProps
+      }), /*#__PURE__*/_jsx("circle", {
+        fill: "none",
+        stroke: color,
+        strokeWidth: thickness * 48 / size,
+        strokeLinecap: "round",
+        cx: "24",
+        cy: "24",
+        r: "20",
+        strokeDasharray: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
+        strokeDashoffset: 0,
+        children: reduceMotionEnabled ? null : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("animate", {
+            attributeName: "stroke-dashoffset",
+            values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
+            ...animationProps,
+            ...bezierProps
+          }), /*#__PURE__*/_jsx("animate", {
+            attributeName: "stroke-dasharray",
+            values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
+            ...animationProps,
+            ...bezierProps
+          })]
+        })
+      })]
+    })
+  });
+});
+Spinner.displayName = 'Spinner';
+Spinner.propTypes = propTypes;
+export default Spinner;