@telus-uds/components-base 1.18.1 → 1.19.1

package/lib-module/utils/BaseView/BaseView.js

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+import NativeView from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useTheme } from '../../ThemeProvider';
+/**
+ * Identical to React Native's View and supporting all the same props, but with:
+ *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaseView = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  const {
+    themeOptions
+  } = useTheme();
+  const styleProp = Array.isArray(style) ? [...style] : [style];
+
+  if (!themeOptions.forceZIndex) {
+    styleProp.unshift(styles.resetZIndex);
+  }
+
+  return /*#__PURE__*/_jsx(NativeView, { ...rest,
+    style: styleProp,
+    ref: ref,
+    children: children
+  });
+});
+BaseView.displayName = 'BaseView';
+const styles = StyleSheet.create({
+  resetZIndex: {
+    zIndex: 'auto'
+  }
+});
+BaseView.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
+export default BaseView;

package/lib-module/utils/BaseView/BaseView.native.js

@@ -0,0 +1,6 @@
+import BaseView from "react-native-web/dist/exports/View";
+/**
+ * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
+ */
+
+export default BaseView;

package/lib-module/utils/BaseView/index.js

@@ -0,0 +1,2 @@
+import BaseView from './BaseView';
+export default BaseView;

package/lib-module/utils/animation/useVerticalExpandAnimation.js

@@ -72,7 +72,7 @@ function useVerticalExpandAnimation(_ref) {
     }
   } else if (Platform.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
     containerStyles.height = isExpanded ? containerHeight : 0;
   } else if (Platform.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

package/lib-module/utils/children.js

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

package/lib-module/utils/floating-ui/index.js

@@ -0,0 +1 @@
+export { useFloating, arrow, offset, shift, flip, autoPlacement } from '@floating-ui/react-dom';

package/lib-module/utils/floating-ui/index.native.js

@@ -0,0 +1 @@
+export { useFloating, arrow, offset, shift, flip, autoPlacement } from '@floating-ui/react-native';

package/lib-module/utils/input.js

@@ -21,23 +21,29 @@ 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("".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"));
+    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\`.
+`);
   };
 
   if (value && !onChange && !readOnly) {
-    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
+    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
   }
 
   if (initialValue && value) {
-    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
+    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
+    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
+    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
   }
 };
 /**
@@ -148,7 +154,7 @@ export const useMultipleInputValues = function () {
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
+    initialValue: initialValues ?? (values === undefined ? [] : undefined)
   }, 'useMultipleInputValues');
   const enforceMaxValues = useCallback(newValues => {
     if (!maxValues) return newValues;

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

@@ -26,8 +26,8 @@ export default 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 ".concat(nameInProp) : typeof props[propName];
-      return new Error("".concat(componentName, ": ").concat(propDescription, " was passed to `").concat(propName, "` prop; should be ").concat(passedNames.join(' or ')));
+      const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
+      return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
     }
 
     return undefined;
@@ -35,7 +35,7 @@ export default function componentPropType(passedName) {
 
   const checkRequired = (props, propName, componentName) => {
     if (props[propName] === undefined) {
-      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
+      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
     }
 
     return undefined;

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

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

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

@@ -9,7 +9,7 @@ export const getTokenNames = componentName => {
   const componentTokenSchema = tokenKeys[componentName];
 
   if (!componentTokenSchema) {
-    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
   }
 
   return Object.keys(componentTokenSchema);
@@ -47,7 +47,7 @@ export const getTokenNames = componentName => {
 export const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
     const token = tokens[prefixedKey];
     return token !== undefined ? { ...validTokens,
       [key]: token

package/lib-module/utils/useOverlaidPosition.js

@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+
+const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
+  const offset = Math.max(0, initialOffset);
+  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+
+    case 'far':
+      return fromEdge + sourceSize;
+
+    default:
+      return 0;
+  }
+};
+
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+
+
+function getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+
+  return positioning;
+}
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * a small task because UDS's tooltip logic only really works for short text - it might be
+ * better to use a third-party library).
+ */
+
+
+const useOverlaidPosition = _ref3 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = useRef(null);
+  const [sourceLayout, setSourceLayout] = useState(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+
+  const targetRef = useRef(null);
+  const [targetDimensions, setTargetDimensions] = useState(null);
+  const [windowDimensions, setWindowDimensions] = useState(null);
+  const onTargetLayout = useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  useEffect(() => {
+    const handleDimensionsChange = _ref5 => {
+      var _sourceRef$current;
+
+      let {
+        window
+      } = _ref5;
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
+        // Could add a debouncer here if there's too many rerenders during gradual resizes
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    };
+
+    let subscription;
+
+    const unsubscribe = () => {
+      var _subscription;
+
+      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        // React Native <0.65.0
+        Dimensions.removeEventListener('change', handleDimensionsChange);
+      }
+
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+
+    if (readyToShow) {
+      subscription = Dimensions.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: Dimensions.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+
+    return unsubscribe;
+  }, [readyToShow]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+
+export default useOverlaidPosition;

package/lib-module/utils/useSpacingScale.js

@@ -101,8 +101,6 @@ 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 = useViewport();
@@ -112,7 +110,7 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : resolveResponsiveProp(spaceValue, viewport, 0));
+  const space = !overridden && ((spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) ?? resolveResponsiveProp(spaceValue, viewport, 0));
   const {
     size
   } = useThemeTokens('spacingScale', tokens, variant, {

package/lib-module/utils/useUniqueId.js

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

package/package.json

@@ -8,14 +8,14 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.6.0",
+    "@telus-uds/system-constants": "^1.1.0",
+    "@telus-uds/system-theme-tokens": "^2.7.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
     "react-native-picker-select": "^8.0.4",
-    "semver": "^7.3.5"
+    "semver": "7.3.5"
   },
   "description": "Base components",
   "devDependencies": {
@@ -54,6 +54,9 @@
   },
   "scripts": {
     "test": "jest",
+    "test:web": "jest --config jest.config-web.js",
+    "test:ios": "jest --config jest.config-ios.js",
+    "test:android": "jest --config jest.config-android.js",
     "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
@@ -67,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.18.1"
+  "version": "1.19.1"
 }

package/src/Button/ButtonBase.jsx

@@ -123,7 +123,7 @@ const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
 })
 
 const selectTextStyles = (
-  { fontSize, color, lineHeight, fontName, fontWeight, textAlign },
+  { fontSize, color, lineHeight, fontName, fontWeight, textAlign, textLine, textLineStyle },
   themeOptions
 ) =>
   applyTextStyles({
@@ -133,7 +133,9 @@ const selectTextStyles = (
     fontName,
     fontWeight,
     themeOptions,
-    textAlign
+    textAlign,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle
   })
 
 const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {

package/src/Carousel/Carousel.jsx

@@ -164,7 +164,7 @@ const Carousel = React.forwardRef(
       ),
       tag = 'ul',
       accessibilityRole,
-      accessibilityLabel = title,
+      accessibilityLabel,
       accessibilityLiveRegion = 'polite',
       copy,
       ...rest
@@ -422,6 +422,32 @@ const Carousel = React.forwardRef(
     const activePanelNavigation =
       tabs && showPanelTabs ? <CarouselTabsPanel items={tabs} /> : panelNavigation
 
+    const isFirstFocusContainer = Boolean(refocus && !skipLinkHref)
+    const containerRef = (element) => {
+      // Apply both firstFocusRef to the container
+      firstFocusRef.current = element
+      // Also apply forwarded ref if there is one (which could be a function ref)
+      if (ref) {
+        if (typeof ref === 'object') {
+          // eslint-disable-next-line no-param-reassign
+          ref.current = element
+        } else if (typeof ref === 'function') {
+          ref(element)
+        }
+      }
+    }
+    // If container isn't used for focus, give it a label of title if none is passed in,
+    // otherwise read the current position on focus
+    const containerAccessibilityLabel =
+      systemProps.accessibilityLabel ?? isFirstFocusContainer
+        ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}`
+        : title
+    const containerProps = {
+      accessibilityLabel: containerAccessibilityLabel,
+      // If used for focus, attach the ref and draw a focus box around the whole carousel
+      ...(isFirstFocusContainer && { ref: containerRef, focusable: true })
+    }
+
     return (
       <CarouselProvider
         activeIndex={activeIndex}
@@ -434,7 +460,13 @@ const Carousel = React.forwardRef(
         refocus={refocus}
         width={containerLayout.width}
       >
-        <View style={staticStyles.root} onLayout={onContainerLayout} ref={ref} {...systemProps}>
+        <View
+          style={staticStyles.root}
+          onLayout={onContainerLayout}
+          ref={ref}
+          {...systemProps}
+          {...containerProps}
+        >
           {showPreviousNextNavigation && (
             <View
               style={selectPreviousNextNavigationButtonStyles(
@@ -464,14 +496,14 @@ const Carousel = React.forwardRef(
               {getCopyWithPlaceholders('skipLink')}
             </SkipLink>
           )}
-          <A11yText
-            // Read the current slide position to screen readers on slide.
-            // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
-            ref={!skipLinkHref && refocus ? firstFocusRef : null}
-            accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
-            focusable={!skipLinkHref && refocus}
-            text={getCopyWithPlaceholders('stepTrackerLabel')}
-          />
+          {!isFirstFocusContainer && (
+            <A11yText
+              // Read the current slide position to screen readers on slide.
+              // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
+              accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
+              text={getCopyWithPlaceholders('stepTrackerLabel')}
+            />
+          )}
           <View style={selectContainerStyles(containerLayout.width)}>
             <Animated.View
               style={StyleSheet.flatten([

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -21,16 +21,6 @@ const CarouselTabsPanel = forwardRef(({ items }, ref) => {
 
   return (
     <>
-      <View
-        focusable
-        accessible
-        onFocus={(event) => {
-          // When user forward-tabs into this section, focus the next tab; if they backwards-tab
-          // (shift-tab) back into the carousel content, don't interfere.
-          const previousWebFocus = event.relatedTarget
-          if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus()
-        }}
-      />
       <StackView direction="row" space={3} divider={{ variant: dividerVariant }} ref={ref}>
         {items.map(({ title, onPress, ...panelItemProps }, index) => {
           const selected = index === activeIndex

package/src/Pagination/SideButton.jsx

@@ -13,8 +13,9 @@ import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
 
 // We need to drop the icon here since it gets rendered via children and not
-// `ButtonBase` in order to tap into the state of the button
-const selectButtonTokens = ({ icon: _, ...rest }) => selectTokens('Button', rest)
+// `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
+// is also not needed
+const selectButtonTokens = ({ icon: _, displayLabel: __, ...rest }) => selectTokens('Button', rest)
 const selectIconTokens = ({ color, iconSize, iconDisplace }, direction) => {
   return {
     color,
@@ -36,13 +37,12 @@ const SideButton = forwardRef(
 
     const getCopy = useCopy({ dictionary, copy })
 
-    const { icon } = getTokens(tokens, buttonVariant)
+    const { icon, displayLabel } = getTokens(tokens, buttonVariant)
 
     const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
     const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
-    const showLabel = viewport !== 'sm' && viewport !== 'xs'
 
     const accessibilityLabel =
       direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel')
@@ -69,7 +69,7 @@ const SideButton = forwardRef(
               iconPosition={directionToSide[direction]}
               iconProps={iconProps}
             >
-              {showLabel && <Text style={textStyles}>{label}</Text>}
+              {displayLabel && <Text style={textStyles}>{label}</Text>}
             </IconText>
           )
         }}