@telus-uds/components-base 3.28.2 → 3.29.1

package/lib/cjs/HorizontalScroll/index.js

@@ -14,8 +14,7 @@ var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
 var _itemPositions = require("./itemPositions");
 var _HorizontalScrollButton = _interopRequireDefault(require("./HorizontalScrollButton"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 var _default = exports.default = _HorizontalScroll.default;
 const horizontalScrollUtils = exports.horizontalScrollUtils = {
   selectHorizontalScrollTokens: _HorizontalScroll.selectHorizontalScrollTokens,

package/lib/cjs/Icon/IconText.js

@@ -14,8 +14,7 @@ var _Icon = _interopRequireWildcard(require("./Icon"));
 var _StackView = require("../StackView");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Returns an icon and some text with a sized gap between them. This is a utility component

package/lib/cjs/Icon/index.js

@@ -19,6 +19,5 @@ Object.defineProperty(exports, "iconComponentPropTypes", {
 var _Icon = _interopRequireWildcard(require("./Icon"));
 var _IconText = _interopRequireDefault(require("./IconText"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 var _default = exports.default = _Icon.default;

package/lib/cjs/InputSupports/InputSupports.js

@@ -72,8 +72,7 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps,
-      validation: feedbackValidation,
-      accessibilityDescribedBy: feedbackId
+      validation: feedbackValidation
     }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
       id: feedbackId,
       title: feedback || maxCharsReachedErrorMessage,

package/lib/cjs/InputSupports/useInputSupports.js

@@ -32,9 +32,7 @@ const useInputSupports = _ref => {
     accessibilityLabel: label,
     accessibilityHint: joinDefined([!hasValidationError && feedback, hint, maxCharacterAllowed ? getCopy('maxCharacters').replace(/%\{charCount\}/g, maxCharacterAllowed) : undefined]),
     // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId,
-    // feedback receives a11yRole=alert on error, so there's no need to include it here
-    hint && hintId, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
+    accessibilityDescribedBy: joinDefined([hint && hintId, feedback && feedbackId || undefined, charactersCount ? getCopy('charactersRemaining').replace(/%\{charCount\}/g, charactersCount) : undefined]),
     accessibilityInvalid: hasValidationError
   };
   return {

package/lib/cjs/Link/ChevronLink.js

@@ -47,6 +47,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', applyChevronTokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
     ...otherlinkProps,
+    useMeasuredMobileIconLayout: true,
     iconPosition: direction,
     tokens: getTokens,
     dataSet: dataSet,

package/lib/cjs/Link/LinkBase.js

@@ -13,6 +13,7 @@ var _props = require("../utils/props");
 var _pressability = require("../utils/pressability");
 var _utils = require("../utils");
 var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
+var _MobileIconTextContent = _interopRequireDefault(require("./MobileIconTextContent"));
 var _ThemeProvider = require("../ThemeProvider");
 var _Icon = require("../Icon");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -144,6 +145,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     tokens = {},
     children,
     dataSet,
+    useMeasuredMobileIconLayout = false,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -187,8 +189,8 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      const mobileCompensation = null;
-      return [outerBorderStyles, mobileCompensation, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      const shouldUseMeasuredMobileContent = _Platform.default.OS !== 'web' && useMeasuredMobileIconLayout;
+      return [outerBorderStyles, shouldUseMeasuredMobileContent ? staticStyles.measuredMobileOuterBorderCompensation : null, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -203,19 +205,32 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
       } = themeTokens;
       const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link';
       const adjustedIconSpace = _Platform.default.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace;
+      const shouldUseMeasuredMobileContent = _Platform.default.OS !== 'web' && useMeasuredMobileIconLayout;
+      const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline;
+      const linkTextContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [textStyles, blockTextStyles, textBaselineStyle, staticStyles.bubblePointerEvents],
+        children: typeof children === 'function' ? children(linkState) : children
+      });
+      const sharedIconProps = {
+        ...iconProps,
+        tokens: iconTokens,
+        style: staticStyles.bubblePointerEvents
+      };
+      if (shouldUseMeasuredMobileContent) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileIconTextContent.default, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: adjustedIconSpace,
+          iconProps: sharedIconProps,
+          children: linkTextContent
+        });
+      }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
         icon: IconComponent,
         iconPosition: iconPosition,
         space: adjustedIconSpace,
-        iconProps: {
-          ...iconProps,
-          tokens: iconTokens,
-          style: staticStyles.bubblePointerEvents
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
-          children: typeof children === 'function' ? children(linkState) : children
-        })
+        iconProps: sharedIconProps,
+        children: linkTextContent
       });
     }
   });
@@ -273,11 +288,12 @@ const staticStyles = _StyleSheet.default.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(_Platform.default.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: _Platform.default.OS === 'android' ? 2 : 0,
-      paddingTop: _Platform.default.OS === 'android' ? 2 : 0
+      paddingVertical: _Platform.default.OS === 'android' ? 2 : 0
     })
   }
 });

package/lib/cjs/Link/MobileIconTextContent.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Icon = _interopRequireWildcard(require("../Icon/Icon"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MobileIconTextContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    space = 0,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps = {},
+    children
+  } = _ref;
+  const [translateY, setTranslateY] = _react.default.useState(0);
+  const latestTranslateYRef = _react.default.useRef(0);
+  const layoutsRef = _react.default.useRef({
+    container: null,
+    text: null,
+    icon: null
+  });
+  const applyAlignment = _react.default.useCallback(() => {
+    const {
+      container,
+      text,
+      icon
+    } = layoutsRef.current;
+    if (!container || !icon || !icon.height) return;
+    const targetY = text ? text.y + text.height / 2 : container.height / 2;
+    const iconY = icon.y + icon.height / 2;
+    const nextTranslateY = Math.round((targetY - iconY) * 100) / 100;
+    if (!Number.isFinite(nextTranslateY)) return;
+    if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return;
+    latestTranslateYRef.current = nextTranslateY;
+    setTranslateY(nextTranslateY);
+  }, []);
+  const handleContainerLayout = _react.default.useCallback(_ref2 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref2;
+    layoutsRef.current.container = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleTextLayout = _react.default.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref3;
+    layoutsRef.current.text = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const handleIconLayout = _react.default.useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref4;
+    layoutsRef.current.icon = layout;
+    applyAlignment();
+  }, [applyAlignment]);
+  const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    ref: ref,
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }) : null;
+  const iconWrapper = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    onLayout: handleIconLayout,
+    style: [staticStyles.iconContainer, {
+      transform: [{
+        translateY
+      }]
+    }],
+    children: iconContent
+  }) : null;
+  if (iconPosition === 'inline') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+      onLayout: handleContainerLayout,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        onLayout: handleTextLayout,
+        children: children
+      }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.inlineIconContainer,
+        children: iconWrapper
+      })]
+    });
+  }
+  const iconSpaceStyle = iconPosition === 'left' ? {
+    marginRight: space
+  } : {
+    marginLeft: space
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    onLayout: handleContainerLayout,
+    style: staticStyles.rowContainer,
+    children: [iconPosition === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      onLayout: handleTextLayout,
+      children: children
+    }), iconPosition === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: iconSpaceStyle,
+      children: iconWrapper
+    })]
+  });
+});
+MobileIconTextContent.displayName = 'MobileIconTextContent';
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: _utils.spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: _propTypes.default.node
+};
+const staticStyles = _StyleSheet.default.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+});
+var _default = exports.default = MobileIconTextContent;

package/lib/cjs/Listbox/Listbox.js

@@ -19,8 +19,7 @@ var _ListboxOverlay = _interopRequireDefault(require("./ListboxOverlay"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const styles = _StyleSheet.default.create({
   container: {
     padding: 0,

package/lib/cjs/Modal/Modal.js

@@ -246,7 +246,7 @@ const Modal = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
           })]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
-        onPress: isBackdropClickable && handleClose,
+        onPress: isBackdropClickable ? handleClose : undefined,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })

package/lib/cjs/Pagination/PageButton.js

@@ -12,8 +12,7 @@ var _utils = require("../utils");
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const PageButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     label,

package/lib/cjs/Pagination/Pagination.js

@@ -18,8 +18,7 @@ var _PageButton = _interopRequireDefault(require("./PageButton"));
 var _SideButton = _interopRequireDefault(require("./SideButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectTextStyles = (_ref, themeOptions) => {
   let {

package/lib/cjs/QuickLinks/QuickLinks.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _ThemeProvider = require("../ThemeProvider");
 var _ViewportProvider = require("../ViewportProvider");
 var _utils = require("../utils");
+var _semantics = require("../utils/a11y/semantics");
 var _List = _interopRequireDefault(require("../List"));
 var _StackWrap = _interopRequireDefault(require("../StackView/StackWrap"));
 var _QuickLinksCard = _interopRequireDefault(require("./QuickLinksCard"));
@@ -40,6 +42,10 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   } = (0, _ThemeProvider.useThemeTokens)('QuickLinks', tokens, variant, {
     viewport
   });
+  const itemAccessibilityRole = _Platform.default.select({
+    web: ['ul', 'ol'].includes(tag) ? _semantics.tagsToRoles.li : undefined,
+    default: undefined
+  });
   const content = list && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
     ref: ref,
     tokens: listTokens,
@@ -54,6 +60,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
       justifyContent: stackJustify
     },
     tag: tag,
+    itemAccessibilityRole: itemAccessibilityRole,
     ...rest,
     children: children
   });

package/lib/cjs/Radio/Radio.js

@@ -16,8 +16,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _StackView = _interopRequireDefault(require("../StackView"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 const selectContainerStyles = _ref => {

package/lib/cjs/RadioCard/RadioCard.js

@@ -15,8 +15,7 @@ var _Card = require("../Card");
 var _StackView = _interopRequireDefault(require("../StackView"));
 var _RadioButton = _interopRequireWildcard(require("../Radio/RadioButton"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 

package/lib/cjs/RadioCard/RadioCardGroup.js

@@ -13,8 +13,7 @@ var _StackView = _interopRequireWildcard(require("../StackView"));
 var _RadioCard = _interopRequireDefault(require("./RadioCard"));
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);

package/lib/cjs/Shortcuts/Shortcuts.js

@@ -15,8 +15,7 @@ var _ViewportProvider = require("../ViewportProvider");
 var _utils = require("../utils");
 var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const {

package/lib/cjs/SideNav/SideNav.js

@@ -13,8 +13,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const selectContainerTokens = _ref => {
   let {
     borderWidth,

package/lib/cjs/StackView/StackWrapBox.js

@@ -50,6 +50,7 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     variant,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -76,7 +77,8 @@ const StackWrapBox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const content = (0, _getStackedContent.default)(children, {
     direction,
     space: 0,
-    box: boxProps
+    box: boxProps,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -112,6 +114,12 @@ StackWrapBox.propTypes = {
    * is not defined, the accessibilityRole will default to "heading".
    */
   tag: _propTypes.default.oneOf(_utils.layoutTags),
+  /**
+   * Optional accessibility role to apply to each item in the stack.
+   * On web, items are wrapped (or cloned) with this role, enabling correct list semantics
+   * when the container tag is "ul" or "ol".
+   */
+  itemAccessibilityRole: _propTypes.default.string,
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/cjs/StackView/StackWrapGap.js

@@ -35,6 +35,7 @@ const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     tag,
     accessibilityRole,
+    itemAccessibilityRole,
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -54,7 +55,8 @@ const StackWrapGap = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   };
   const content = (0, _getStackedContent.default)(children, {
     direction,
-    space: 0
+    space: 0,
+    itemAccessibilityRole
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,

package/lib/cjs/StackView/getStackedContent.js

@@ -10,8 +10,7 @@ var _Divider = _interopRequireDefault(require("../Divider"));
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
@@ -43,7 +42,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
     space,
     direction = 'column',
     box,
-    preserveFragments = false
+    preserveFragments = false,
+    itemAccessibilityRole
   } = _ref;
   const boxProps = box && typeof box === 'object' ? box : {
     space
@@ -55,15 +55,24 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
   const validChildren = _react.default.Children.toArray(topLevelChildren).filter(Boolean);
   const content = validChildren.reduce((newChildren, child, index) => {
     const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    (0, _react.createElement)(_Box.default, {
-      ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
+    let item;
+    if (box) {
+      // If wrapped in Box, that Box needs a key.
+      // If possible, use an existing content key; use an index-based key only if necessary.
+      item = /*#__PURE__*/(0, _react.createElement)(_Box.default, {
+        ...boxProps,
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID,
+        testID: boxID
+      }, child);
+    } else if (itemAccessibilityRole) {
+      item = /*#__PURE__*/_react.default.cloneElement(child, {
+        accessibilityRole: itemAccessibilityRole,
+        key: child.key || boxID
+      });
+    } else {
+      item = child;
+    }
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {

package/lib/cjs/TabBar/TabBar.js

@@ -58,6 +58,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
@@ -69,6 +70,7 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     onChange,
     variant,
     tokens,
+    accessibilityLabel,
     ...rest
   } = _ref3;
   const [isSelected, setIsSelected] = _react.default.useState(initiallySelectedItem);
@@ -83,6 +85,8 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
+      accessibilityRole: "tablist",
+      accessibilityLabel: accessibilityLabel,
       children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarItem.default, {
         label: item.label,
         href: item.href,
@@ -91,7 +95,6 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist",
         tokens: item.tokens
       }, item.id))
     })
@@ -116,7 +119,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: _utils.variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: (0, _utils.getTokensPropType)('TabBar')
+  tokens: (0, _utils.getTokensPropType)('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: _propTypes.default.string
 };
 const styles = _StyleSheet.default.create({
   tabBar: {

package/lib/cjs/Tabs/Tabs.js

@@ -15,8 +15,7 @@ var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 var _TabsItem = _interopRequireDefault(require("./TabsItem"));
 var _TabsDropdown = _interopRequireDefault(require("./TabsDropdown"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);