@telus-uds/components-base 1.12.0 → 1.14.0

package/lib/BaseProvider/index.js

@@ -24,12 +24,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const BaseProvider = _ref => {
   let {
     defaultTheme,
-    children
+    children,
+    themeOptions
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         defaultTheme: defaultTheme,
+        themeOptions: themeOptions,
         children: children
       })
     })
@@ -37,8 +39,11 @@ const BaseProvider = _ref => {
 };
 
 BaseProvider.propTypes = {
+  children: _propTypes.default.node.isRequired,
   defaultTheme: (_ThemeProvider$propTy = _ThemeProvider.default.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  children: _propTypes.default.node.isRequired
+  themeOptions: _propTypes.default.shape({
+    forceAbsoluteFontSizing: _propTypes.default.bool
+  })
 };
 var _default = BaseProvider;
 exports.default = _default;

package/lib/Button/ButtonBase.js

@@ -17,11 +17,13 @@ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
-var _utils = require("../ThemeProvider/utils");
+var _ThemeProvider = require("../ThemeProvider");
 
 var _propTypes2 = _interopRequireDefault(require("./propTypes"));
 
-var _utils2 = require("../utils");
+var _utils = require("../utils");
+
+var _Icon = require("../Icon");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -31,7 +33,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.focusHandlerProps, _utils2.linkProps, _utils2.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
 
 const getOuterBorderOffset = _ref => {
   let {
@@ -55,7 +57,7 @@ const selectOuterContainerStyles = _ref2 => {
     alignSelf,
     backgroundColor: outerBackgroundColor,
     opacity,
-    ...(0, _utils.applyOuterBorder)({
+    ...(0, _ThemeProvider.applyOuterBorder)({
       outerBorderGap,
       outerBorderWidth,
       outerBorderColor,
@@ -137,7 +139,7 @@ const selectInnerContainerStyles = _ref4 => {
     paddingBottom: offsetBorder(paddingBottom),
     backgroundColor,
     minWidth,
-    ...(0, _utils.applyShadowToken)(shadow)
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
   };
 };
 
@@ -154,7 +156,7 @@ const selectBorderStyles = _ref5 => {
   };
 };
 
-const selectTextStyles = _ref6 => {
+const selectTextStyles = (_ref6, themeOptions) => {
   let {
     fontSize,
     color,
@@ -163,12 +165,13 @@ const selectTextStyles = _ref6 => {
     fontWeight,
     textAlign
   } = _ref6;
-  return (0, _utils.applyTextStyles)({
+  return (0, _ThemeProvider.applyTextStyles)({
     fontSize,
     color,
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   });
 };
@@ -183,13 +186,24 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
       maxWidth: "calc(100% + ".concat(getOuterBorderOffset(themeTokens) * 2, "px)"),
       outline: 'none',
       // removes the default browser :focus outline
-      ...(0, _utils2.getCursorStyle)(inactive, accessibilityRole)
+      ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)
     },
     default: {}
   });
 };
 
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
+const selectItemIconTokens = _ref8 => {
+  let {
+    color,
+    iconSize
+  } = _ref8;
+  return {
+    size: iconSize,
+    color
+  };
+};
+
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
   let {
     id,
     href,
@@ -200,20 +214,23 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
     // alias for inactive
     inactive = disabled,
     selected = false,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps,
     ...rawRest
-  } = _ref8;
+  } = _ref9;
 
   const {
     onPress,
     ...rest
-  } = _utils2.clickProps.toPressProps(rawRest);
+  } = _utils.clickProps.toPressProps(rawRest);
 
   const extraButtonState = {
     inactive,
     selected
   };
 
-  const resolveButtonTokens = pressableState => (0, _utils2.resolvePressableTokens)(tokens, pressableState, extraButtonState);
+  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
 
   const systemProps = selectProps(rest);
 
@@ -222,10 +239,13 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
   };
 
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     href: href,
-    onPress: _utils2.linkProps.handleHref({
+    onPress: _utils.linkProps.handleHref({
       href,
       onPress
     }),
@@ -237,10 +257,15 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text];
+      const iconTokens = selectItemIconTokens(themeTokens);
+      const {
+        iconSpace
+      } = themeTokens; // If the container has a width set, fill it instead of sizing from content.
       // If in future we support text alignments other than center, add here.
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
+      const IconComponent = icon || themeTokens.icon;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
@@ -251,10 +276,18 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
             transition: 'background-color 200ms, border-color 200ms'
           }
         })],
-        children: (0, _utils2.wrapStringsInText)(typeof children === 'function' ? children({ ...(0, _utils2.resolvePressableState)(pressableState, extraButtonState),
-          textStyles
-        }) : children, {
-          style: textStyles
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: iconSpace,
+          iconProps: { ...iconProps,
+            tokens: iconTokens
+          },
+          children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
+            textStyles
+          }) : children, {
+            style: textStyles
+          })
         })
       });
     }
@@ -295,6 +328,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = (0, _utils2.withLinkRouter)(ButtonBase);
+var _default = (0, _utils.withLinkRouter)(ButtonBase);
 
 exports.default = _default;

package/lib/Button/ButtonGroup.js

@@ -51,6 +51,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     name: inputGroupName,
@@ -102,6 +103,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     readOnly: readOnly,
@@ -233,6 +235,11 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: _propTypes.default.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib/Button/propTypes.js

@@ -13,6 +13,8 @@ var _props = require("../utils/props");
 
 var _A11yText = _interopRequireDefault(require("../A11yText"));
 
+var _Icon = require("../Icon");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
@@ -46,6 +48,22 @@ const buttonPropTypes = {
    * Function called when the button is pressed. Required unless the button has a href.
    */
   onPress: _propTypes.default.func,
+
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+
+  /**
+   * A function component for an SVG icon to render inside the link. Inherits size and color from
+   * the link and any Typography the link is nested inside.
+   */
+  icon: _propTypes.default.func,
   variant: _props.variantProp.propType
 };
 var _default = buttonPropTypes;

package/lib/Carousel/Carousel.js

@@ -31,11 +31,15 @@ var _CarouselContext = require("./CarouselContext");
 
 var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
 
-var _StepTracker = _interopRequireDefault(require("../StepTracker"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
-var _StackView = _interopRequireDefault(require("../StackView"));
+var _SkipLink = _interopRequireDefault(require("../SkipLink"));
 
-var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _A11yText = _interopRequireDefault(require("../A11yText"));
+
+var _CarouselStepTracker = _interopRequireDefault(require("./CarouselStepTracker"));
+
+var _CarouselThumbnailNavigation = _interopRequireDefault(require("./CarouselThumbnailNavigation"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
@@ -54,19 +58,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-const staticTokens = {
-  stackView: {
-    justifyContent: 'center'
-  },
-  stepTracker: {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none'
-  }
-};
-
 const selectContainerStyles = width => ({
   backgroundColor: 'transparent',
   overflow: 'hidden',
@@ -174,25 +165,32 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onAnimationStart,
     onAnimationEnd,
     onIndexChanged,
+    skipLinkHref,
+    refocus,
+    title = 'carousel',
     springConfig = undefined,
-    onRenderPanelNavigation,
+    thumbnails = undefined,
+    panelNavigation = thumbnails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnailNavigation.default, {
+      thumbnails: thumbnails
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {}),
     tag = 'ul',
-    accessibilityRole = 'adjustable',
-    accessibilityLabel = 'carousel',
+    accessibilityRole,
+    accessibilityLabel = title,
+    accessibilityLiveRegion = 'polite',
     copy,
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
+    viewport
+  });
   const {
     previousIcon,
     nextIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
-    spaceBetweenSlideAndPreviousNextNavigation,
-    spaceBetweenSlideAndPanelNavigation
-  } = (0, _ThemeProvider.useThemeTokens)('Carousel', tokens, variant, {
-    viewport
-  });
+    spaceBetweenSlideAndPreviousNextNavigation
+  } = themeTokens;
 
   const [activeIndex, setActiveIndex] = _react.default.useState(0);
 
@@ -212,9 +210,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dictionary: _dictionary.default,
     copy
   });
-
-  const childrenArray = _react.default.Children.toArray(children);
-
+  const childrenArray = (0, _utils.unpackFragment)(children);
   const systemProps = selectProps({ ...rest,
     accessibilityRole,
     accessibilityLabel,
@@ -236,6 +232,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 
   const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] = _react.default.useState(0);
 
+  const firstFocusRef = _react.default.useRef(null);
+
   const pan = _react.default.useRef(new _Animated.default.ValueXY()).current;
 
   const animatedX = _react.default.useRef(0);
@@ -244,9 +242,6 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 
   const isFirstSlide = !activeIndex;
   const isLastSlide = activeIndex + 1 >= children.length;
-  const panelNavigationTokens = { ...staticTokens.stepTracker,
-    containerPaddingTop: spaceBetweenSlideAndPanelNavigation
-  };
 
   const onContainerLayout = _ref2 => {
     let {
@@ -344,10 +339,13 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, [containerLayout.width, activeIndex, animate, children.length, onIndexChanged]);
 
   const fixOffsetAndGo = _react.default.useCallback(delta => {
+    var _firstFocusRef$curren;
+
     updateOffset();
     handleAnimationStart(activeIndex);
     updateIndex(delta);
-  }, [updateIndex, updateOffset, activeIndex, handleAnimationStart]);
+    if (refocus) (_firstFocusRef$curren = firstFocusRef.current) === null || _firstFocusRef$curren === void 0 ? void 0 : _firstFocusRef$curren.focus();
+  }, [updateIndex, updateOffset, activeIndex, handleAnimationStart, refocus]);
 
   const goToNeighboring = _react.default.useCallback(function () {
     let toPrev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -438,17 +436,22 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     raised: true
   };
 
-  const getCopyWithPlaceholders = copyKey => {
-    const copyText = getCopy(copyKey).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
+  const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {
+    const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
 
     return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
-  };
+  }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
     activeIndex: activeIndex,
+    goTo: goTo,
+    getCopyWithPlaceholders: getCopyWithPlaceholders,
+    itemLabel: itemLabel,
     totalItems: childrenArray.length,
+    themeTokens: themeTokens,
+    firstFocusRef: firstFocusRef,
+    refocus: refocus,
     width: containerLayout.width,
-    goTo: goTo,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: staticStyles.root,
       onLayout: onContainerLayout,
@@ -464,6 +467,17 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           variant: previousNextIconButtonVariants,
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
         })
+      }), Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
+        ref: firstFocusRef,
+        href: skipLinkHref,
+        children: getCopyWithPlaceholders('skipLink')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default // 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')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectContainerStyles(containerLayout.width),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
@@ -476,6 +490,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           }]),
           ...panResponder.panHandlers,
           ...(0, _utils.getA11yPropsFromHtmlTag)(tag),
+          // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
+          // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
+          accessibilityLiveRegion: accessibilityLiveRegion,
           children: childrenArray.map((element, index) => {
             const hidden = !isAnimating && index !== activeIndex;
 
@@ -500,23 +517,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
-    }), showPanelNavigation ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
-      direction: "row",
-      tokens: staticTokens.stackView,
-      children: onRenderPanelNavigation ? onRenderPanelNavigation({
-        activeIndex,
-        totalItems: childrenArray.length
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
-        current: activeIndex,
-        steps: childrenArray.map((_, index) => String(index)),
-        copy: {
-          // Give StepTracker copy from Carousel's language and dictionary
-          stepLabel: getCopyWithPlaceholders('stepLabel'),
-          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
-        },
-        tokens: panelNavigationTokens
-      })
-    }) : null]
+    }), showPanelNavigation ? panelNavigation : null]
   });
 });
 
@@ -554,6 +555,15 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    */
   springConfig: _propTypes.default.object,
 
+  /**
+   * An array of objects containing information on the thumbnails to be rendered as navigation panel
+   */
+  thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    accessibilityLabel: _propTypes.default.string,
+    alt: _propTypes.default.string,
+    src: _propTypes.default.string
+  })),
+
   /**
    * Minimal part of slide width must be swiped for changing index.
    * Otherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index
@@ -584,20 +594,35 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   onIndexChanged: _propTypes.default.func,
 
   /**
-   * Use this to render a custom panel navigation element instead of dots navigation
-   * This function is also provided with an object with the following properties
-   * activeIndex: index of current slide
-   * totalItems: total number of slides
+   * If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link
+   * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
+   */
+  skipLinkHref: _propTypes.default.string,
+
+  /**
+   * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
+   *
+   * Pass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.
+   *
+   * If skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content.
+   */
+  refocus: _propTypes.default.bool,
+
+  /**
+   * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
+   * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
+   * - activeIndex: index of current slide
+   * - totalItems: total number of slides
    * Use it as follows:
    * ```js
    *    <Carousel
-   *      onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}
+   *      panelNavigation={<CustomPanelNavigation />}
    *    >
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
    */
-  onRenderPanelNavigation: _propTypes.default.func,
+  panelNavigation: _propTypes.default.element,
 
   /**
    * When slide animation start

package/lib/Carousel/CarouselContext.js

@@ -10,6 +10,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,19 +20,27 @@ const CarouselContext = /*#__PURE__*/_react.default.createContext();
 
 const CarouselProvider = _ref => {
   let {
-    children,
     activeIndex,
+    children,
+    goTo,
+    getCopyWithPlaceholders,
+    itemLabel,
+    refocus = false,
+    themeTokens,
     totalItems,
-    width,
-    goTo
+    width
   } = _ref;
 
   const value = _react.default.useMemo(() => ({
     activeIndex,
+    goTo,
+    getCopyWithPlaceholders,
+    itemLabel,
+    refocus,
+    themeTokens,
     totalItems,
-    width,
-    goTo
-  }), [activeIndex, totalItems, width, goTo]);
+    width
+  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
     value: value,
@@ -53,7 +63,11 @@ function useCarousel() {
 CarouselProvider.propTypes = {
   children: _propTypes.default.arrayOf(_propTypes.default.element).isRequired,
   activeIndex: _propTypes.default.number.isRequired,
+  goTo: _propTypes.default.func.isRequired,
+  getCopyWithPlaceholders: _propTypes.default.func.isRequired,
+  itemLabel: _propTypes.default.string.isRequired,
+  refocus: _propTypes.default.bool,
+  themeTokens: (0, _utils.getTokensPropType)('Carousel'),
   totalItems: _propTypes.default.number.isRequired,
-  width: _propTypes.default.number.isRequired,
-  goTo: _propTypes.default.func.isRequired
+  width: _propTypes.default.number.isRequired
 };

package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _propTypes = require("prop-types");
+
+var _CarouselContext = require("../CarouselContext");
+
+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; }
+
+/**
+ * Focus target so that when a new slide is shown, the user can tab into
+ * its content using the keyboard.
+ *
+ * @TODO rework this after integrating with SkipLink when available.
+ */
+const CarouselFirstFocus = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    title
+  } = _ref;
+  const {
+    getCopyWithPlaceholders
+  } = (0, _CarouselContext.useCarousel)(); // TODO: integrate skip link description if behaving as skip link.
+  // Consider moving this content to aria-live area while only the skip link is focused.
+
+  const accessibilityLabel = "".concat(title, ", ").concat(getCopyWithPlaceholders('stepTrackerLabel'));
+
+  const accessibilityRole = _Platform.default.select({
+    web: 'link',
+    // The focused item will ultimately be a skip link.
+    default: 'button' // 'link' role usually denotes opening browser on Native.
+
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default // TODO: integrate skip link functionality, jump focus to after Carousel
+  , {
+    onPress: undefined,
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    style: _StyleSheet.default.absoluteFill,
+    focusable: true
+  });
+});
+CarouselFirstFocus.displayName = 'CarouselFirstFocus';
+CarouselFirstFocus.propTypes = {
+  /**
+   * Simple description of this carousel for screenreaders, to be read before
+   * "{itemLabel} {index} of {count}.
+   *
+   * For example, "Summer offers" in "Summer offers, offer 1 of 3"
+   */
+  title: _propTypes.PropTypes.string
+};
+var _default = CarouselFirstFocus;
+exports.default = _default;